ES6-解构赋值

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

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

完全解构，本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值，属性名和属性值一一对应。

如果解构不成功，变量的值就等于undefined。

另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。

数组的解构赋值

1）完全解构 ，左边的变量和右边的变量一一匹配

let [a,b,c] =['tom',20,true]
console.log(a,b,c)//tom 20 true 

2）不完全解构，等号左边的模式，只匹配一部分的等号右边的数组，但是解构依然可以成功.当等号左边变量只声明，没有被初始化时，也就是多出来的变量解构变量为undefined。

let [a,b,c] = ['tom',20,true,11,[]]
console.log(a,b,c)//tom 20 true 

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

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

3）集合解构 ...解构结果是一个数组

let [a,b,[c]] = [1,2,[3,4,5]]
console.log(a,b,c) //1 2 3
let [a,b,[...c]] = [1,2,[3,4,5]]
console.log(c) //[3,4,5]集合解构
let [x, y, ...z] = ['a']
console.log(x,y,z)//"a" undefined []

4）默认值 只有变量的值匹配为undefined时才生效

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

let[a=4,b=5,c=6,d=7,]=[1,2]
console.log(a,b,c,d) //1 2 6 7 默认值只要变量的内容发生改变，那么默认值会被覆盖

function test({a=1,b=2}){}
test({})
console.log(a,b)//1 2
test({d:10})
console.log(a,b)//1 2 

5)数组嵌套对象

let [a,{username:user}] =['hello',{username:'tom'}]
console.log(user)//tom

对象的解构赋值

数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。当变量名和属性值相同时，可以进行简写。

let {a:a,b:b} ={a:10,b:20}
console.log(a,b) //10 20 
let {a:a,b:b} ={b:10,a:20}
console.log(a,b) //20 10  根据属性名匹配，与次序无关
let {a,b} ={a:10,b:20}
console.log(a,b) //10 20  简写
let {a:c,b:d} ={a:10,b:20}
console.log(c,d) // 10 20
let {c,d} ={a:10,b:20}
console.log(c,d) //undefined undefined

和数组一样，解构也可以用于嵌套结构的对象。

let obj={p:['hello',{x:'world'}]}
let {p:[a,{x:b}]}=obj 
let {p:[a,{x}]}=obj 
console.log(a,b) //hello world
console.log(x) //world

let obj={p:['hello',{x:'world'}]}
let {p:[a,{b}]}=obj 
console.log(b)  //undefined

对象的解构也可以指定默认值。默认值生效的条件是，对象的属性值严格等于undefined。如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错。

let {a:y=20} ={b:10}
console.log(y) //20
let {a:y=20} ={b:10,a=11}
console.log(y) //11
var {foo: {bar}} = {baz: 'baz'};
foo //报错

字符串的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

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

解构字符串的属性

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

let {trim} ='hello'
console.log(trim===String.prototype.trim) //true  trim是方法 string是属性false

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

数值和布尔值的解构赋值

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

let {a,b,c} = 123
//let {a,b,c} = true
console.log(a,b,c) //以上两者均输出undefined undefined undefined
let [a,b,c] = 123
console.log(a,b,c)//报错 不具备迭代功能

下面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

函数参数的解构赋值

function add([x, y]){
  return x + y;
}
add([1, 2]); // 3

[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ]

上面代码中，函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y。

函数参数的解构也可以使用默认值。

function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]