[JavaScript] es6规则总结
let 和 const
let 是块级作用域
let 声明的变量只在其所在的作用域内生效
<script>
{
var today = "周3";
let yesterday = "周2";
}
console.log(today); //周3
console.log(yesterday); //yesterday is not defined
</script>
之前在做保存局部变量的时候，都是通过闭包将当前的变量保存到就近的作用域链中。而使用 let 就不用了，let 声明的变量只在比如
for (var i = 0; i < 10; i++) {
a[i].onclick = function() {
console.log(i); //10
};
}
console.log(i); //10
let 只在本次循环也就是块级作用域中有效
for (let i = 0; i < 10; i++) {
a[i].onclick = function() {
console.log(i); //1,2,3,4,5....
};
}
console.log(i); //i is not defined
在 for 循环中，设置变量 let i = xxx 是一个父级作用域，而内部执行代码是一个单独的子级作用域
let 没有变量提升
一般语言都是先声明后使用，如果没声明使用是错误的，但是 js 不同，即使没有声明一个变量，也可以直接使用，默认赋值是一个 undefined，这就是变量提升
而 let 修正了这一语法
console.log(a); //undefined
console.log(b); //b is not defined
var a = 1;
let b = 2;
函数上下文在初始化过程中，会创建变量对象，此时已经对变量进行声明，等到执行的时候，其实变量已经声明过了，=的时候并不是声明，而是一个赋值的过程
var a; ...code...; a = 1
暂时性死区
es6 中规定，当区块中存在 let 和 const 声明，则这一区块对 let 和 const 声明的变量一开始就形成了封闭的作用域，只要在声明之前调用，不管干什么都会报错。
function abc() {
a = 1; // ReferenceError: a is not defined
typeof a; // ReferenceError: a is not defined
let a = 2;
}
abc();
只要一进入当前作用域，所要使用的变量就已经存在，但是不可获取，只有在声明的一行语句出现之后，才可以使用该变量
不允许重复声明变量
let 声明不允许在相同作用域内声明相同的变量
function abc() {
let a = 1;
// var a = 1;
// const a = 1;
let a = 2; //SyntaxError: Identifier 'a' has already been declared
}
abc();
块级作用域
- 外部代码块不受内部代码块的影响（防止内部变量改变外部变量，或者内部变量泄露为全局变量）
- 外部代码块无法读取内部代码块的变量
- 内部代码块可以定义与外部代码块同名变量{let a = 1 { let a = 2}}
{
let a = 1;
console.log(a);
{
let a = 2;
console.log(a);
{
let a = 3;
console.log(a);
}
}
}
块级作用域和函数声明
es6 中规定函数声明的行为类似于 let，在块级作用域之外不可引用,但是为了兼容之前的旧有的代码，浏览器环境先使用的是不同的规则
- 允许在块级作用域声明函数
- 函数声明类似于 var，函数声明会提升到全局作用域或函数作用域顶部
- 同时函数声明还会提升到所在块级作用域的顶部
function aaa() {
console.log("out");
}
(function() {
if (false) {
function aaa() {
console.log("inner");
}
}
// aaa(); //Uncaught TypeError: aaa is not a function
})();
aaa(); //out
实际使用上就类似于 var 的行为了
const 声明常量
const 用来声明一个常量，常量的值一旦声明就不可改变。
const a = 1;
a = 3; //Uncaught TypeError: Assignment to constant variable.
const 声明常量，需要立即初始化，不能留到之后赋值
a = 1;//Uncaught SyntaxError: Missing initializer in const declaration
const 和 let 类似，只在声明的块级作用域之中有效。const 常量声明的变量也会存在暂时性死区。
同时，对简单数据类型来说，值保存在变量所指向的内存地址中，等同于常量。而对于引用类型比如数组，对象等，const 只能保证变量所指向指针是固定不变的，但是数据结构无法保证是否可变
const ob = {};
ob.name = "aaaa";
console.log(ob); //Object {name: "aaaa"}
const arr = [];
arr.push("123123");
console.log(arr); //["123123"]
使用 object.freeze()可以将对象冻结
let,const,class 声明的全局变量不属于顶层对象（window，global）的属性
变量的结构赋值
解构就是按照一定模式从数组和对象中提取值，然后对变量进行赋值
数组按照对应位置提取赋值
let [a, b, c] = [1, 2, 3];
console.log(c); //3
//嵌套赋值
let [a, [[b], c]] = [1, [[2], 3]];
console.log(b);
//其他类型
let [, , c] = [1, 2, 3];
let [a, , c] = [1, 2, 3];
let [a, ...b] = [1, 2, 3, 4]; // b = [2,3,4]
如果结构不成功，就会赋值 undefined
let [a,b,...c] = [1];
console.log(a) //1
console.log(b) //undefined
console.log(c) //[]
- 等号左边的只匹配一部分等号右边的，是不完全解构，可以成功
- 等号右边的只转为对象后不具有 Interator 接口或者本身不具备 Interator 接口，解构报错
- 只要数据结构具有 Interator 接口，就能使用数组形式的解构赋值
解构赋值可设默认值
let [a, b = 2] = [1];
console.log(a);//1
console.log(b);//2
let [a, b = 2] = [1, undefined];
console.log(a);//1
console.log(b);//2
es6 内部使用===判断是否有值，如果一个成员不严格等于 undefined，默认值是不生效的
比如 null,null 不严格等于 undefined。默认值可以是一个表达式
对象解构赋值
数组的解构赋值是按次序进行的，而对象的解构没有次序，要找到同名的属性才可得到值
let { a, b } = { a: "123", b: "456" };
console.log(a); //123
如果想要变量名和属性名不一样
let { a: d, b } = { a: "123", b: "456" };
console.log(d); //123
a 相当于是匹配的模式，而 b 才是实际赋值的变量
对象的嵌套赋值
let {
p,
p: [x, { y }]
} = { p: ["hello", { y: "world" }] };
console.log(p);//["hello", Object]
console.log(x);//hello
console.log(y);//world
对象也可以设置默认值
let {a=3} = {}
console.log(a)//3
let { a = 3 } = { a: null };
console.log(a); //null
默认值生效条件是，对象属性值严格等于 undefined。解构失败，变量的值为 undefined
其他的解构赋值
//字符串
const [a, b, c ] = "hello";
console.log(a); //h
console.log(b); //e
console.log(c);//l
//数值和布尔
let { toString: s } = 123;
console.log(s === Number.prototype.toString); //true
解构的规则是，只要等号右边的值不是对象或者数组，就先将其转为对象，但是 undefined 和 null 无法转为对象，就无法解构赋值
函数参数解构
function abc([a,b]) {}
abc([1,2])
作用
- 快速交换变量值
- 从函数返回多个值
- 函数参数快速定义
- 提取 json 的数据
- 函数参数设置默认是
- 遍历 map 结构
- 输入模块指定方法
