前言

为什么要使用解构赋值，ES5及以前的版本

var obj = {
    name:'li',
    age:18
};
var name = obj.name,
    age = obk.age;

虽然这段代码看上去也挺简单的,但想象一下如果你要给大量的变量赋值,你得一个一个的赋值。
或者你需要取一个嵌套结构数据的某个值,也许你得遍历整个结构。
如果你能把数据解构成一些小小的片段,那获取信息将会更加容易。

对象的解构

对象解构的语法形式是在一个赋值操作符左边放置一个对象字面量，例如：

let obj = {
    name:'li',
    age:18
};
let {name,age} = obj;
console.log(name); //li
console.log(age); //18

非同名变量赋值

在上面的例子中，我们使用与对象属性名相同的变量名称，当然，我们也可以定义与属性不同的变量名称。

let obj = {
    name:'li',
    age:18
};
let {name:name:fullname,age:year} = obj;
console.log(fullname); //li
console.log(year); //18

在这里，我们创建了两个局部变量，fullname和yaer，并将它们映射到了name和age。

默认值

使用解构赋值表达式时，如果指定的局部变量名称在对象中不存在，那么这个局部变量会被赋值为 undefined，就像这样：

let obj = {
    name:'li',
    age:18
};
let {country} = obj;
console.log(country); //undefined

上面的代码中，额外定义了一个局部变量country，然后尝试为它赋值，然而在obj对象上，没有对应的属性名称和属性值，所有被自动定义为undefined。

我们可以自己定义一个默认值，在属性名称后添加一个(=)和相对应的默认值即可。

let obj = {
    name:'li',
    age:18
};
let {name,age,country = 'China'} = obj;
console.log(country); //China

并且不会改变obj

console.log(obj.country); //undefined;

只有对象 obj 上没有该属性或者属性值为 undefined 时该默认值才生效。

let obj = {
    name:'li',
    age:18
};
let {name = 'wang'} = obj;
console.log(name); //li

嵌套对象的解构赋值

解构嵌套对象与对象字面量的语法相似，可以将对象拆解以获取你想要的信息。

let obj = {
    name:'li',
    age:18,
    scores:{
      math:95,
      chinese:98,
      english:93
    }
};
let {name,scores: { math = 0, chinese = 0, English = 0 }} = obj;
console.log(math, chinese, English); //95,98,93

我们定义了四个变量，name，math,chinese,English。此外我们还为变量math，chinese，Englist分别指定了默认值。

数组的解构赋值

与对象的解构语法相比，数组的解构就简单多了，它使用的数组的字面量，且解构操作全在数组内部完成，而不是像对象字面量语法一样使用对象的命名属性。

let list = [20,'zhang san','li si'];
let [grade,name] = list;
console.log(grade,name); //20,'zhang san'

在上面的代码中，我们从数组list中解构出数组索引0和1所对应的值并分别存储到变量grade和name中。

在数组解构中，也可以直接省略元素，值为需要的元素提供变量名。

let list = [20,'zhang san','li si'];
let [grade,,name] = list;
console.log(grade,name); //20,'li si'

这段代码中使用解构赋值语法从数组list中获取索引0和2所对应的元素,name前的逗号是前方元素的占位符,无论数组中的元素有多少个，都可以使用这种方式来提取想要的元素。

默认值

数组的解构赋值表达式中也可以为数组的任意位置添加默认值，当指定位置的属性不存在的或其值为undefined时使用默认值。

let list = [20,'zhang',];
let [grade,name,surname='san'] = list;
console.log(grade,name,surname); //20,'zhang','san'

上面的代码中，数组list只有两个元素，变量surname没有对应的匹配值，只有一个默认值san，所以surname的输出结果不是undefined而是默认值san。

嵌套数组解构赋值

和对象一样,也可以对嵌套数组进行解构操作，在原有的数组解构模式中插入另一个数组解构模式，即可将解构过程深入到下一级。

let colors = ['red',['green','yellow'],'blue'];
let [ firstColor , [ secondColor ] ] = colors;
conosle.log(firstColor,secondColor); //red,green

上面的代码中，我们通过数组的嵌套解构，为变量firstColor和secondColor分配对应的值。

剩余的元素

在数组中，可以通过拓展运算符...将数组中其余的元素赋值给一个变量，如：

let colors = ['red','green','blue'];
let [firstColor,...otherColors] = colors;
console.log(firstColor);  // red
console.log(otherColors); // ['green','blue']

这个例子中，数组 colors 的第一个元素被赋值给了 firstColor ，其他元素被赋值给了 otherColors 数组，所以 otherColors 中包含两个元素：'green' 和 'blue'。

ES6解构赋值

前言