2020-11-09 ES6基础知识

let、const

---

一、let

声明变量

1. 变量只在当前的代码块有效

{
    let a = 10
    var b = 20
    console.log(a,b)
}

运行结果如下：

当不在代码块内打印时

{
    let a = 10
    var b = 20
    // console.log(a,b)
}
console.log(a,b)

运行结果如下：

2. 变量的声明不会提升

console.log(a)
let a = 1

执行过后代码报错，若为var a=1，结果为undefined

3. 暂时性死区（避免变量的全局污染）
4. 不允许重复声明

二、const

声明一个只读的常量，具备let的一切特性

• 声明之后不可以重新赋值
• 声明的同时必须初始化

三、解构

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。

1、数组的解构赋值

• 完全解构：左边的变量和右边的值是一一匹配的关系
• 不完全解构：左边的变量只匹配右边的一部分
• 解构不成功：左边的一部分变量匹配右边的值，剩余的变量为undefined
• 默认值只要变量的内容发生改变，那么默认值就会被覆盖，只有当变量匹配到的值为undefined时，默认值才会生效

let [a,b,c] = ['tom',20,true]
console.log(a,b,c)
//结果：tom 20 true 完全解构
let [a,b,c] = ['tom',20,true,11,[]]
console.log(a,b,c)
//结果：tom 20 true 不完全解构
let [a,b,c,d,e] = [1,2,3]
console.log(a,b,c,d,e)
//结果：1 2 3 undefined undefined 解构不成功
let [a,b,[...c]] = [1,2,[3,4,5]]
console.log(a,b,c)
//结果：1 2 [ 3, 4, 5 ] 将剩余的用...变成数组赋值给最后一个变量
let [a=4,b=5,c=6,d=7] = [1,2]
console.log(a,b,c,d)
//结果：1 2 6 7 默认值

2、对象的解构赋值

根据属性名，一一对应的关系，没有顺序，变量必须与属性同名，才能取到正确的值。
默认值（默认值生效的条件是，对象的属性值严格等于undefined）

let { foo, bar } = { foo: "aaa", bar: "bbb" };
console.log(foo,bar)
//结果：aaa bbb

3、字符串的解构赋值

解构时，字符串被转换成了一个类似数组的对象。
也可以对数组的属性解构

const [a, b, c, d, e] = 'hello';
console.log(a,b,c,d,e)
//结果：h e l l o
let {trim} = 'hello'
console.log(trim === String.prototype.trim)
//结果：true
let {toString}=true
console.log(toString === Boolean.prototype.toString);
//结果：true

4、数值和布尔值解构赋值

解构时，如果等号右边是数值和布尔值，则会先转为对象
不具备迭代器，解构不成功

5、函数参数的解构赋值

function add([a,b]){
    return a+b
}
var res = add([1,2]);
console.log(res)
//结果：3
function add([a,b]){
    return a+b
}
var res = add([3]);
console.log(res)
//结果：NaN，此时a为3，b为undefined，所以相加不是一个数值
function add({a=0,b=1}){
    return a+b
}
let res = add({a:10,b:5});
console.log(res)
//结果：15