ES6 解构赋值

数组的解构赋值：

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

也就是说 ， 只要关系是一一对应的，我们可以以任何形式进行数组的赋值。

当解构失败时 ， 输出的值是undefined 。

let [a, b, ...c] = [1];
a => 1 ; b => undefined ; c = [];

不完全解构：左边变量数小于右面值的数量，一样的规则解析。不会报错。

如果右边不是数组（不是可遍历解构），报错。

let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

报错。

解构赋值对于 var let const 都适用。

解构赋值的默认值：

let [a , b = 1] = [2];
//a => 2 ,b => 1;
let [ x = fn() ] = [1];
//fn() 不会执行,会被赋值为1
let [ x = 1, y = x] = [];
// x= 1, y = 1
let [ x = 1, y = x] = [2];
// x=2, y=2
let [x = 1, y = x] = [1, 2];
//x = 1, y = 2
let [ x = 1, y = x] = [null,false]
// x = null, y = false
let [x = y , y = 1] = [];
//ReferenceError

最后一个报错原因：x使用到y时，y还没有被定义。要先执行到 y = 1 才可以。

只有数组的值严格等于undefined，才会被赋予默认值，否则即使是null和false也会被正常赋值。

对象的解构赋值 ：

var {a , b} = { a : '123' , b : '234'};
//a = 123 , b = 234
var {a , b} = { b : '234' , a : '123'};
//a = 123 , b = 234

也就是说，赋值看的是变量名相同，与顺序无关。

{a : demo } = { a : 1 };
//demo = 1

a只是一个匹配模式，不会被赋值。

let x ;
{ x } = {x : 1};

由于es6的块级作用域，{ }会被看成一个作用域，报错。我们需要加一个括号。

let x;
({ x } = { x : 1});

由于数组是特殊的对象， 所以：

var arr = [1, 2, 3];
var {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

字符串：

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

length:

let {length : len} = 'hello';
len // 5

解构赋值时，如果等号右边是数字或者布尔值，则有限的转换为对象。

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

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

等号右边如果是null , undefined : 报错。

函数参数的解构赋值：
数组：

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

对象：

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]

与下面的做一下对比

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

两种写法在开始看来都有默认值，但是注意⚠️的是：在后面的写法中，是将参数的对象把默认的 { x : 0, y : 0} 给覆盖掉，使用时需要注意。

解构赋值的用途：
1、交换变量值：

[ x , y ] = [ y , x ];

2、函数可以有多个返回值，然后通过解构赋值赋值给其他变量。

3、提取json数据