ES6 解构赋值

数组的解构赋值：

let [a, b, c] = [1, 2, 3];let [a, [b], c] = [1, [2], 3];let [,,a] = [1, 2, 3];  a=3let [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() 不会执行,会被赋值为1let [ x = 1, y = x] = [];// x= 1, y = 1let [ x = 1, y = x] = [2];// x=2, y=2let [x = 1, y = x] = [1, 2];//x = 1, y = 2let [ x = 1, y = x] = [null,false]// x = null, y = falselet [x = y , y = 1] = [];//ReferenceError

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

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

对象的解构赋值 ：

var {a , b} = { a : '123' , b : '234'};//a = 123 , b = 234var {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 // 1last // 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 // truelet {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数据