【ES6】let命令、const命令、解构赋值

let命令

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是也存在新的特性。

• let所声明的变量，只在let命令所在的代码块内有效，避免全局污染。(适用于for循环)

{
let a = 10;
var b = 20;
console.log(a)  //10
}
console.log(b)	//20
console.log(a)  //a is not defined

• 不存在变量提升。

console.log(test)   //undefined
var test = 10;

console.log(test)  //报错
let test = 10;

• 暂时性死区。在代码块内，使用let命令声明变量之前，该变量都是不可用的。

for(var i=1;i<=5;i++){

}
console.log(i)  //6

for(let i=1;i<=5;i++){
console.log(i)  //1  2  3  4  5
}
console.log(i)  //i is not defined

• 不允许重复声明。

function () {
let a = 10;
let a = 1;
}	 // 报错

Let实际上为Javascript新增了块级作用域。外层作用域无法读取内层作用域的变量，内层作用域可以定义外层作用域的同名变量。

let foo = 1;
{
let foo =2 ;    //定义同名变量
let bar ="one";
}
console.log(foo);	//1
console.log(bar);	//报错

块级作用域的出现，实际上使得获得广泛应用的立即执行函数表达式（IIFE）不再必要了。

const命令

const声明一个只读的常量。一旦声明，常量的值就不能改变。

• const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const b
b = 10
console.log(b)  //报错

• console所声明的常量，只在console命令所在的代码块内有效（块级作用域）

const obj = {
name:'tom',
age:12
}
obj.name = 'lerry'
console.log(obj)    //{ name: 'lerry', age: 12 }

• 暂时性死区。

if (true) {
console.log(MAX);  //MAX is not defined
}

• 不允许重复声明。

function () {
console a = 10;
console a = 1;
}	 // 报错

解构赋值

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

let [a, b, c] = [1, 2, 3];

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。如果解构不成功，变量的值就等于undefined。

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]
console.log(a,b,c)   //1 2 3

数组的解构赋值

• 不完全解构

let [a,[b],d] = [1,[2,3],4]
console.log(a,b,d)   //1 2 4

• 集合解构

let [a,b,...c] = [1,2,3,4]
console.log(a,b,c)  //1 2 [ 3, 4 ]

• 默认值（当匹配值严格等于undefined时，默认值生效）

let [a,b='22'] = [10,20]
console.log(a,b)    //10 20

let [a,b='22'] = [10]
console.log(a,b)    //10 22

• 默认值也可以为函数

function f(){
console.log('aaa');
}
let [x = f()] = [1];
console.log(x)	//1

• 数组嵌套对象

let [a,{name:user}] = ['hello',{name:"terry"}]
console.log(a,user) //hello terry

• 对象嵌套数组

let {test:arr} = {test:[1,2,3]}
console.log(arr)    //[ 1, 2, 3 ]

对象的解构赋值

• 对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let {name,age} = {name:'tom',age:12}
console.log(name,age)   //tom 12

• 默认值（当匹配值严格等于undefined时，默认值生效）。

let {a,b=4} = {a:1}
console.log(a,b)    //1 4

• 嵌套解构

let obj = {p:['hello',{y:'whord'}]}
let {p:[x,{y}]} = obj;
console.log(x,y)    //hello whord

字符串的解构赋值

• 解构时，字符串被转换成了一个类似数组的对象。

let [a,b,c,d,e] = 'hello'
console.log(typeof a,b,c,d,e)  //string e l l o

• 可以对数组的属性解构。

let {length:len} = 'hello'
console.log(len)    //5

let {trim} = 'hello'
console.log(trim)   //[Function: trim]
console.log(trim === String.prototype.trim)  //true

let {toSting} = true
console.log(toSting === Boolean.prototype.toSting)  //true

数值和布尔值的解构赋值

• 解构时，如果等号右边是数值或布尔值，则会先转为对象。

let {a,b,c} = 123
console.log(a,b,c)  //undefined undefined undefined

let [a,b,c] = 123
console.log(a,b,c)  //报错！123 is not iterable v

函数参数的解构赋值

• 基本语法。

function test([a,b]){
return a+b
}
let res = test([1,2])
console.log(res)    //3

• 默认值（当匹配值严格等于undefined时，默认值生效）。

function test({a=2,b=3}){
return a*b
}
let res = test({a:1})
console.log(res)    //3

解构赋值的常见用途

• 交换变量的值。

let a = 1;
let b = 2;
[a,b] = [b,a]
console.log(a,b)	//2 1

• 从函数返回多个值。

function test(){
return ['hello',12,true]
}
let [a,b,c] = test()
console.log(a,b,c)  //hello 12 true

• 函数参数的定义。

function f([x,y,z]){
console.log(x,y,z)
}
f([1,2,3]);		//1 2 3

• 提取JSON数据。

let jsonData = { id: 42, status: "OK", data: [867, 5309] };
let {id, status, data} = jsonData;
console.log(id, status, data)   //42 OK [ 867, 5309 ]