ES6 解构赋值

一、概念

解构赋值是对赋值运算符的扩展 。
它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
在代码书写上简介且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

二、数组模型的解构Array

1、基本

let [a, b, c] = [1, 2, 3];
console.log("a:" + a, "b:" + b, "c:" + c);
//a:1 b:2 c:3

2、可嵌套

let [a, [
    [b], c
]] = [1, [
    [2], 3
]];
console.log("a:" + a, "b:" + b, "c:" + c); 
//a:1 b:2 c:3

3、可忽略

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

4、不完全解构

let [a = 1, b] = [];
console.log("a:" + a, "b:" + b); 
// a ：1, b ：undefined

5、剩余运算符

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

6、字符串等

let [a, b, c, d, e] = 'he l lo';
console.log("a:" + a, "b:" + b, "c:" + c, "d:" + d, "e:" + e);
//a:h b:e c:  d:l e:

在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。可遍历对象即实现 Iterator 接口的数据。

7、解构默认值

let [a = 2] = [undefined];
console.log("a:" + a); 
// a : 2

当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果。

let [a = 3, b = a] = []; // a = 3, b = 3
let [a = 3, b = a] = [1]; // a = 1, b = 1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2
// a 与 b 匹配结果为 undefined ，触发默认值：a = 3; b = a =3
// a 正常解构赋值，匹配结果：a = 1，b 匹配结果 undefined ，触发默认值：b = a =1
// a 与 b 正常解构赋值，匹配结果：a = 1，b = 2

三、对象模型的解构Object

1、基本

let {foo,bar} = {foo: 'aaa',bar: 'bbb'};
console.log("foo:" + foo, "bar:" + bar);
// foo:aaa bar:bbb

let { baz: foo} = { baz: 'ddd'};
console.log("foo:" + foo);
// foo:ddd

2、可嵌套可忽略

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

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

3、不完全解构

let obj = {p: [{y: 'world'}]};
let {p: [{y}, x]} = obj;
console.log("x:" + x, "y:" + y);
// x:undefined y:world

4、剩余运算符

let {a,b,...rest} = {a: 10,b:20,c:30,d:40};
console.log("a=" + a, "b=" + b, "c=" + rest);
// a=10 b=20 c=[object Object]
console.log("a=" + a, "b=" + b, "c=" + JSON.stringify(rest));
// a=10 b=20 c={"c":30,"d":40}

5、解构默认值

let {a = 10, b = 5} = {a: 3};
console.log("a=" + a, "b=" + b);
//a=3 b=5

let {a: aa = 10,b: bb = 5} = {a: 3};
console.log("aa:" + aa, "bb:" + bb);
//aa:3 bb:5

6、调换顺序

let {a = 10, b = 5} = {b: 2,a: 1};
console.log("a:" + a, "b:" + b);
// a:1 b:2

对象是没有顺序的。数组具有下标，所以有严格的顺序要求

7、赋值顺序

let {foo: bar,bar: foo} = {foo: '1',bar: '2'};
console.log("foo=" + foo, "bar=" + bar);
// foo=2 bar=1

等于号是赋值运算符，先将后面的赋值给前面的，在将值赋值给键