有迭代器接口的数据的解构赋值
基本用法
let [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
凡是右边数据是有迭代器接口的数据，就都可以解构，常见的有迭代器接口的数据就是数组。
如果右边数据不是具有迭代器接口的数据，那就不能解构，会报错。
解构的顺序是从左到右，上面例子就是先解构第一个元素，赋值给第一个变量，然后向右进行。
复杂用法
解构赋值本质是模式匹配，只要等号两边的模式相同，左边的变量就会被赋予对应的值，如果不匹配，则只有匹配的几个变量会被赋值，其他变量默认为undefined。
let [a, [[b], c]] = [1, [[2], 3]];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
let [,,c] = [1,2,3];
console.log(c); // 3
let [,c,] = [1,2,3];
console.log(c); // 2
轮不到赋值的变量，值为undefined：
let [a,b] = [1];
console.log(b);
剩余符号的用法：
剩余符号就是...，也就是三个点，表示剩下的我全包了。只允许用在最后一个变量的身前。
let [a, ...b] = [1, 2, 3, 4, 5];
console.log(b); // [2, 3, 4, 5]
let [a, ...b, c] = [1, 2, 3, 4, 5];
console.log(b); // Uncaught SyntaxError: Rest element must be last element
如果剩余变量轮不到赋值，默认值不是undefined，而是空数组：
let [a,b,...c] = [1,2];
console.log(c); // []
模式差别会导致报错
所谓模式，可以简单理解为，数组符号[]和对象符号{}组成的架构，必须是左右匹配的，元素可以多一点少一点没关系，顶多是undefined，但是模式不匹配，会直接报错。
看下面栗子，尽管给a赋值1看起来是天经地义的，但是模式不同，所以js报错。可见，模式匹配是必须的：
let [a, [b,c]] = [1,2,3];
a; // Uncaught TypeError: undefined is not a function
let [a, [b,c]] = [1,[]];
a; // 1
b; // undefined 因为匹配不上值没关系，至少模式没错，所以不会报错
给变量指定默认值
- 如果轮不到赋值，则默认值生效：
let [a,b = 3] = [1];
console.log(b); // 3
- 如果轮到赋值，但赋给的是undefined，则默认值生效：
let [x, y = '3'] = ['1', undefined];
console.log(y); // 3
-
如果默认值是表达式，那么只有它真的会被赋值，js才会去计算这个表达式，如果它没有被赋值，那么js为了系统性能考虑，不会去计算这个表达式。
-
如果默认值是其他变量，那么要注意这个变量是否已经存在。比如：
let [x = y, y = 1] = []; // ReferenceError: y is not defined
给x赋值的时候，y还不存在，当然报错。
对象的解构赋值
基本用法
属性名匹配成功，就赋值，不成功就不赋值。不赋值默认也是undefined。
let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
复杂用法
跟数组解构差不多，但是对象的解构赋值没有剩余符号的这一说。
引用不匹配的属性值
比如我的变量名跟对象的属性名恰好不一致，但确实希望变量得到该属性值，怎么办？就像这样，写成a:c，c是你写的变量名，a:c表示：虽然我变量名不叫a而是叫c，但是我希望c得到a属性的值。
let { a: c } = { a: 'aaa', b: 'bbb' };
c // "aaa"
深度赋值
let { b: {c} } = { b: {c: 'ccc'} };
console.log(c); // ccc
let { b: {c: d} } = { b: {c: 'ccc'} };
console.log(d); // ccc
看出端倪了么？其实，
let { a, b } = { a: "aaa", b: "bbb" }
就可以理解为：
let { a: a, b: b } = { a: "aaa", b: "bbb" }
然后对应赋值就可以了，冒号后面才是变量名，冒号前面就是“线索”，按照线索找值就行了。
对象解构赋值跟数组解构赋值的鲜明对比：
let { b, b: {c: d} } = { b: {c: 'ccc'} };
console.log(d); // ccc
console.log(b); // {c: "ccc"}
对象解构赋值，不像数组解构赋值那样排排队，然后挨个赋值，而是每次都根据“线索”找值，能找到就找到，找不到就undefined。
数组和对象混合嵌套赋值
无论怎么混合嵌套，只需要知道，模式匹配就行。模式匹配最重要！！
let [a, { b: c }] = ['aaa', { b: 'bbb' }];
console.log(c); // bbb
console.log(a); // aaa
let { b,b: {c: [d, e]} } = { b: {c: ['ddd', 'eee']} };
console.log(b); // {c: ['ddd', 'eee']}
console.log(d); // ddd
console.log(e); // eee
提醒注意，并没有定义一个叫c的变量，试图输出c肯定会出错。
默认值
也是用赋值号=赋值，跟数组一样道理。
大括号写在行首的陷阱
let x;
{x} = {x: 1};
// SyntaxError: syntax error
上栗，你以为能给x赋值1，但是其实不行，因为大括号写在行首，被js认为是代码块，而不是赋值的语法符号，所以，要么大括号别写在行首，要么，整体包在括号里：
let x;
({x} = {x: 1});
x; // 1
把数组当对象解构
数组也是有下标的，当然可以当做对象结构：
let {0: x, 2: z} = ['a', 'b', 'c'];
console.log(x,z); // a c
字符串的解构赋值
很简单，字符串可以被拆开当做数组来解构。
let [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
由于类似数组的对象都天然有一个length属性，因此还可以对这个属性解构赋值。
let {length : len} = 'hello';
len // 5
数值和布尔值的解构赋值
数值、布尔值不像字符串能拆成数组来解构，没讨论意义。
函数参数的解构赋值
这个用处就很大了，甚至可以说是解决了之前js世界的函数参数的天生缺陷。
什么缺陷呢？js之前只能这么传参，这种传参的缺陷是，你需要传5个参数，往往这5个参数来自于一个数组，于是你必须事先把这个数组拆开成5个变量，然后分别传进去：
function f(a,b,c,d,e) {
return a + b + c + d + e;
}
f(19, 19, 19, 19, 19); // 95
如果你强行想要一次性传入一个数组[19,19,19,19,19]，那就有点小麻烦，只能这样，这样的缺陷就是用下标表示变量，不够直观：
function f(arr) {
return arr[0] + arr[1] + arr[2] + arr[3] + arr[4];
}
f([19, 19, 19, 19, 19]); // 95
现在ES6之后，你就可以传入一个数组作为一套参数，js帮你自动解构：
function f([a,b,c,d,e]) {
return a + b + c + d + e;
}
f([19, 19, 19, 19, 19]); // 95
默认值
函数参数也可以有默认值，都是一样的。数组元素可以空着，也可以写undefined，但不能写null，null被认为是有值。
function f([a,b,c = 100,d,e]) {
return a + b + c + d + e;
}
f([1, 1, , 1, 1]); // 104
变量解构赋值的优点汇总
变量解构赋值其实在其他语言都早已实现，只是ES实现的太晚了，它的优点有很多，比如：
- 赋值语句干净，简短，直观。
- 交换变量的值的最佳方法：
let x = 1;
let y = 2;
[x, y] = [y, x];
- 对数组和对象快速取值，这是实践中最常用的用途，尤其是从服务器传来的JSON，结构可能相当复杂，从前你要写多行语句来获取其中的每一个属性，现在就简单的一逼了。
比如：
var json_from_server = [
{
name: 'zhang',
age: 16
},
{
name: 'wang',
age: 23
},
];
var [{name: a, age:b}, {name:c, age: d}] = json_from_server;
console.log(a,b,c,d); // zhang 16 wang 23
如果不用结构赋值，要怎么写呢？如下：
var json_from_server = [
{
name: 'zhang',
age: 16
},
{
name: 'wang',
age: 23
},
];
var a = json_from_server[0]['name'];
var b = json_from_server[0]['age'];
var c = json_from_server[1]['name'];
var d = json_from_server[1]['age'];
console.log(a,b,c,d); // zhang 16 wang 23
是不是代码很冗余？
- 就像上面说的，函数参数能解构，所以参数名既能保持语义，又能当做数组一次性传入。
- 默认值可以直接在赋值语句里定义，就不用像以往那样专门写一行语句来设定默认值，干净了很多。
- 函数参数也能设定默认值，就不用在函数体内判断参数是否存在，然后决定设不设默认值，省却很多麻烦。
网友评论