ES6进修之一

2024年5月19日 201次阅读 来源: 清晖

周末两天进修了ES6基本内容，包含作用域、变量赋值、字符串、数值、数组、函数、对象这几项的扩大。团体觉得，ES6就是对ES5举行bug修复和功用补充。

作用域

– 部份作用域与let

ES5不存在传统意义上的块级作用域，假如肯定要说有，那就是运用函数来模仿块级作用域，如：

    // code 1
    (function(){
    //这里是块级作用域
    //作用：限定向全局作用域中增加过量的变量和函数，即防止内部暂时变量影响全局空间
    })();

有些fresh meat ( like me, haha )能够会在运用for轮回时疏忽i是全局变量而致使轮回没法停止,直至页面崩溃，以下场景

// code 2
var arr1 = [1, 2, 3, 4];
var arr2 = [1, 2];
for (var i = 0; i < arr1.length; i++){
   blablabla...
   for (var i = 0; i < arr2.length; i++){
      blablabla...
   }
}

上面这段代码中，someone能够以为轮回最多实行4*2=8次，实际上这里会无穷轮回：每次内层轮回实行终了，i都即是2，从而致使外层轮回的轮回前提永远为true。究其原因，在于内外层是在同一个作用域，内外层的i是同一个变量，而不是内层自成作用域。
如今ES6帮我们处理这个问题了，运用let和大括号定义部份变量，上段代码能够改写以下：

// code 3
var arr1 = [1, 2, 3, 4];
var arr2 = [1, 2];
for (var i = 0; i < arr1.length; i++){
   blablabla...
   for (let i = 0; i < arr2.length; i++){
      blablabla...
   }
}

let声明的部份变量带来的一个附加转变是：没法举行变量提拔。在部份作用域内，运用let声明变量之前，该变量都不可用。从部份作用域最先到部份变量声明之前这段被称为暂时性死区TDZ，TDZ是针对某特定部份变量而言的。

– const

js也有常量啦！这个不得不让人叹息js真的愈来愈像java了。const声明的常量只在当前作用域有用。别的，关于复合范例的变量，如对象，const变量存储的是地点，这时候不可修正的是地点，但地点中存储的内容是可变的。

变量赋值

– 默认值
ES5中我们是否是常常有这类写法：

// code 4
var polySay = function(name, age) {
    name = sayWhat || "Poly";
    age = sayWhat || "forever 18";
    console.log("My nane is " + name + "and I'm " + age);
};

为了兼容不传参数的情况，我们能够写了N多相似以上的代码。如今ES6给我们供应了一项新功用：给变量设置默认值。在声明变量时能够设置一个默认值，以备运用时发明转变量没有赋值。
上面代码能够改写为：

// code 5
var polySay = function({name:"Poly", age: "forever 18"}) {
    console.log("My nane is " + name + "and I'm " + age);
};

– 解构赋值
前面函数参数设置默认值中，你能够注意到设置默认值的体式格局有点生疏，这涉及到ES6为我们供应的另一个新功用：解构赋值。解构赋值是指根据肯定形式，从数组和对象中提取值为变量举行赋值。比方：

// code 6
let [a, [b], c] = [1, [2, 3]];
// a被赋值为1，b被赋值为2
// c没有剖析到响应的解构，因而c被赋值为udefined

又比方：

// code 7
let {name: who, age} = {name: "Poly", age: "forever 18"};
// who被赋值为"Poly"

解构赋值重要针对数组和对象，顺带捎上字符串、数值和布尔值。由于字符串会被自动转换为字符数组，然后二者会被转换为对象。

// code 8
let [a, b, c] = "Hello";
// a被赋值为“H”，b 被赋值为“e”,c被赋值为“l”
// 由于等号右边的"Hello"被自动转化为［"H", "e", "l", "l", "o" ］
let (toString:s) = 123;
// 数值123被转化为对象，而Number对象有toString属性
let (toString s) = true
// 布尔值true被转化为对象，而Boolean对象有toString属性

解构赋值的运用还包含：函数返回多个值、提取JSON数据。

// code 9
function polySay(){
   return [1, 2, 3];
}
// 再也不必拼数组拼对象（是拼集，不是拼爹）
let [a, b, c] = polySay();
let json = {
   id: 111,
   name: "Poly",
};
let {id, name} = json;
//再也不必一个个取

很好用，有木有，有木有？

字符串

to do

数值

to do

数组

to do

函数

to do

对象

to do

时候所限，剩下几个部份没有写完，后续补上，顶锅遁走。

    原文作者：清晖
    原文地址: https://segmentfault.com/a/1190000008052140
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞