ES6-变量解构赋值

基本用法

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 因为匹配不上值没关系，至少模式没错，所以不会报错

给变量指定默认值

1. 如果轮不到赋值，则默认值生效：

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

2. 如果轮到赋值，但赋给的是undefined，则默认值生效：

   let [x, y = '3'] = ['1', undefined];
   console.log(y); // 3

3. 如果默认值是表达式，那么只有它真的会被赋值，js才会去计算这个表达式，如果它没有被赋值，那么js为了系统性能考虑，不会去计算这个表达式。

4. 如果默认值是其他变量，那么要注意这个变量是否已经存在。比如：

   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实现的太晚了，它的优点有很多，比如：

1. 赋值语句干净，简短，直观。

2. 交换变量的值的最佳方法：

   let x = 1;
   let y = 2;
   
   [x, y] = [y, x];

3. 对数组和对象快速取值，这是实践中最常用的用途，尤其是从服务器传来的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