1、了解

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

ES6之前赋值方式

var a=1；
var b=2;
或者

var a=1,b=2;

ES6允许这样赋值

var [a,b] = [1,2];

2、解构规则

1)数组结构赋值

等号左右两边模式相同，左边的变量会被赋予对应的值

1.1)结构不成功，即右侧模式相同，但匹配没有对应的值

var [a]=[];
let [b,c]=[1];

--a:undefined,b:1,c:undefined

1.2)不完全结构，即右侧模式相同，且右侧的值多余左侧的变量

var [a,b] = [1,2,3];
let [e,[f],g]= [1,[2,3],4];

--a:1,b:2,e:1,f:2,g:4

1.3)结构失败，即右侧模式和左侧不匹配,右侧结构为具备Iterator接口的对象

var [foo] = 1; //TypeError: 1 is not iterable
let [a] = {};//error
let [b] = Array.prototype.slice.call({length:1,0:1});//b:1

在ES6中，有三类数据结构原生具备Iterator接口：数组、某些类似数组的对象、Set和Map结构。

2、对象结构赋值

 对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

2.1)同变量名、属性名情况

var {a,b} = {a:1,b:2};
a//1
b//2
var {c,d} = {c:1,e:2};

c//1

d//undefined

 

2.2)变量名和属性名不一致时

感觉像sql中的重命名，实际使用了ES6中属性的简洁表达：

var { a: b } = { a: "aaa", c: "bbb" };
b // "aaa"

2.3)对象嵌套模式匹配正确，可解析

var obj = {
  p: [
    "Hello",
    { y: "World" }
  ]
};
var { p: [x, { y }] } = obj;

x // "Hello"

y // "World"

2.4)指定默认值

var {a=1} = {}
a//1

默认值生效的条件是，对象的属性值严格等于undefined。

2.5)注意点

如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错。

// 报错
var {a: {b}} = {c: 'c'};

如果要将一个已经声明的变量用于解构赋值，必须非常小心。

var x;
{x} = {x: 1};//SyntaxError: expected expression, got '='
({x} = {x: 1})//正确

3、字符串解构

字符串本身可认为是类数组的结构

var [a,b,c] = "123";
a;//1
b;//2
c;//3
var {length:len} = '123';
len//3

4、函数参数解构