什么是解构？

根据肯定的情势从数组或许对象中取值，对变量举行赋值的历程称为「解构」

在 ES5 中，为变量赋值只能直接指定值：

var a=1,b=2,c=3
a; // 1
b; // 2
c; // 3

但是在 ES6 中，我们能够被许可写成：

var [a,b,c]=[1,2,3];
a; // 1
b; // 2
c; // 3

ES6 中能够很明显看出来，我们能够在数组中取数据，根据位置的对应关联对变量赋值。

[默认值]

解构赋值许可运用默认值

var [foo = true] = [];
foo; // true

[x,y = 'b'] = ['a']
x; // "a"
y; // "b"

[x,y = 'b'] = ['a','c']
x; // "a"
y; // "c"

ES6 内部运用的是严厉相称运算符(===)推断一个位置是不是有值。所以，假如一个数组成员不严厉即是 undefind，默认值是不会见效的。

var [x = 1] = [undefined];
x; // 1

null == undefined // true
var [x = 1] = [null];
x; // null

上述代码中，一个数组成员是 null,因而默认值不见效。由于 null 不严厉即是 undefined。

function f(){
    console,log('aaa');
}
let [x = f()] = [1]; // undefined ,不实行 f()
x; // 1

对象的解构赋值

var {foo,bar}={foo:"aaa",bar:"bbb"};
foo; // "aaa"
bar; // "bbb"

对象的解构赋值和数组有一个差别，数组的元素是按序次分列的，变量的取值由它的位置决议；而对象的属性没有序次，变量必需与属性同名，才取到准确的值。

var {laf} = {foo:"aaa",bar:"bbb"};
laf; // undefined;

在上面代码中，变量没有对应的同名属性，致使取不到值，末了即是 undefind。
实际上，对象的解构赋值是以下情势的简写。

var { foo: foo, bar: bar } = { foo:"aaa", bar:"bbb" }

实际上，在对象的解构赋值的内部机制，是先找到同名属性，然后在赋值给对应的变量。真正被赋值的是后者，而不是前者。

var { foo : bar } = {foo : "aaaa"};
foo; // foo is not defined
bar; // "aaaa"

采纳这类写法是，变量的声明和赋值都是一体的。关于 let 和 const 而言，变量不能从新声明，所以一旦赋值的变量之前声明过，就会报错。

let foo;
let {foo}={foo:'1'}
// Uncaught SyntaxError: Identifier 'foo' has already been declared

所以不能反复 let 声明：

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

对象的解构也能够制订默认值。

var {x,y = 5} = {x:1};
x; // 1
y; // 5

默认值见效前提是，对象属性严厉不即是 undefined

var {x = 3} = {x: undefined};
x; // 3
var {x = 3} = {x:null};
x; // null

和数组一样，解构也能够用于嵌套解构的对象。

var obj={
    p:[
        "hello",
        {y:"world"}
    ]
}

这时候的 p 是情势，不是变量，因而不会被赋值。假如 p 也要作为变量赋值，应当写成如许：

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

x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

下面一个例子：

var {loc,loc:{start},loc:{ start: { { line,column } } }={
    loc:{
        start:{
            line:1,
            column:5
        }
    }
}

上面代码有三次解构赋值，分别是对loc、start、line三个属性的解构赋值。注重，末了一次对line属性的解构赋值当中，只要line是变量，loc和start都是情势，不是变量。

var obj = [];
var arr = [];

({foo:obj.prop,bar: arr[0]} = {foo:123,bar:true});

obj; // {prop:123}
arr; // [true]

假如解构情势是嵌套的对象，而且子对象地点的父属性不存在，则会报错

var {foo : {bar}} = {baz:'baz'};

准确的写法：

var {foo,foo:{bar}}={foo:{bar:'bar'}};