最新版本看这里（原文nakeman.cn/engineering…

解构赋值语法（Destructuring）是ES6新进的 使用 objects 和 arrays 的（可统称「结构对象」）更便捷的新语法，这种语法针对将结构对象的多个成员值一次读取（赋值给本地变量）出来，解构语法借用了对象字面量和数组字面量的语法。

What

复合数据的使用

对象 和 线性集合数组 任务非常常见，它们都是有结构的 复合数据的，经常需要从它们的结构中读取出数据（有多个）来。

Object and array have become a particularlyimportant part of the language. It’s quite common to define objects and arrays, and then systematically pull out relevant pieces of information from those struc- tures.

ECMAScript 6 simplifies this task by adding destructuring, which is the process of breaking down a data structure into smaller parts.

destructuring 是一种便捷的对象或数组的结构成员读取的新语法。

赋值操作的一种

解构赋值语法的核心（属）是赋值，它是一种赋值语句的一种；与一般单值赋值语句相对，它是一种复值赋值。单值赋值的模式是简单的——将一个字量值或者表达值的估值“赋给”一个符号变量，赋值是语法自动的；同样，结构赋值也有一定的模式，和语法自动（下面提供了各种详细）。 赋值模式： var = initializer 赋值语法：** variable = value;** 解构赋值语法：{variable,...} = object( or expressoin)

• 等号
• 等号右边：结构实例，或产生对象的表达式
• 等号左边：结构变量，由花括号或方括号，及本地变量列表

Why

对象 和 线性集合数组 复合数据的传统使用方式很繁琐：将字段一个一个读出到本地变量 In ECMAScript 5 and earlier, the need to fetch information from objects and arrays could result in a lot of duplicate code to get certain data into local variables.

如果你的对象或数组很大，数据字段很多，甚至是有多层嵌套时，读取数据就更麻烦，此时，解构语法则更显价值 imagine if you had a large number of variables to assign: you would have to assign them all one by one. And if you had to traverse a nested data structure to find the information instead, you might have to dig through the entire structure just to find one piece of data.

对象

默认值

Both object and array destructuring can specify default values for any property or item that is undefined , and both throw errors when the right side of an assignment evaluates to null or undefined .

被解构的结构对象的成员不一定都存在（defined），解构语法支持对未定义的对象成员提供默认值（ default values），并且当被解构的结构对象（赋值等号的右边）为 null or undefined 时，抛出异常。

let node = {
type: "Identifier",
name: "foo"
};
let { type, name, value = true } = node;

嵌套解构

You can also navigate deeply nested data structures with object and array destructuring, descending to any arbitrary depth.

解构语法支持访问任意嵌套层次的对象

let node = {
type: "Identifier",
name: "foo",
loc: {
start: {
line: 1,
column: 1
},
end: {
line: 1,
column: 4
}
}
};
let { loc: { start }} = node;
console.log(start.line);
console.log(start.column);
// 1
// 1

声明式解构赋值

Destructuring declarations use var , let , or const to create variables and must always have an initializer.

最简单的解构语法是声明式：解构对象值到本地变量。声明式解构语法必须带有初始化器（ initializer ，等号及右边的表达式），不然语法不完整：

let { type, name } = node; // fine
let { type, name } ;  // syntax error

完整对象解构语法：{variable,...} = object( or expressoin)

• 等号
• 等号右边：对象实例，或产生对象的表达式
• 等号左边：花括号，及本地变量列表

解构赋值给现有变量

解构赋值语法也中对已经有的变量或对象属性进行赋值；注意赋值语句需要用括号，将其标识为表达式，不然结构变量（等号左边）会被认为是一个代码块。

let node = { type: "Identifier", name: "foo" }, type = "Literal", name = 5; // assign different values using destructuring ({ type, name } = node); console.log(type); console.log(name); // "Identifier" // "foo"

Destructuring assignments are used in place of other assignments and allow you to destructure into object properties and already existing variables.

解构赋值表达式

解构赋值也可直接用作表达式，取值是等号右边的结构对象（EM：这个不知道用啥，分开写不是更清楚明了吗？） function outputInfo(value) { console.log(value === node); } // true outputInfo({ type, name } = node); // 这个将node将解构赋值给变量后，传入函数

赋值给不同本地变量

如果给 不同于对象成员名的本地变量赋值，要加前缀，注意被赋值的本地变量在冒号的右边 let node = { type: "Identifier", name: "foo" }; let { type: localType, name: localName } = node; console.log(localType); console.log(localName); // "Identifier" // "foo"

数组

Array destructuring syntax is very similar to object destructuring: it just uses array literal syntax instead of object literal syntax. The destructuring operates on positions within an array rather than the named properties that are available in objects. 数组解构语法模式与对象解构语法是相似，只是使用了数组字面量语法，例如使用「方括号」替代「花括号」。另外，数组只有位置下标，所没有（也不用）属性来访问结构成员。

忽略不关心的成员

由于使用数组下标，你可以很方便直接读取某个数组成员值：

let colors = [ "red", "green", "blue" ]; let [ , , thirdColor ] = colors; console.log(thirdColor); // "blue"

解构赋值给现有变量

与对象解构赋值不同，数组解构不需要括号，因为它的语法不会产生歧义： let colors = [ "red", "green", "blue" ], firstColor = "black", secondColor = "purple"; [ firstColor, secondColor ] = colors; console.log(firstColor); console.log(secondColor); // "red" // "green"

Rest Items

Chapter 3 introduced rest parameters for functions, and array destructuring has a similar concept called rest items. Rest items use the ... syntax to assign the remaining items in an array to a particular variable. 像新的ES6 函数技术支持 rest参数 一样，数组解构赋值语法也支持rest 项：将余下的数组成员赋给一个特定的变量

let colors = [ "red", "green", "blue" ]; let [ firstColor, ...restColors ] = colors; console.log(firstColor); // "red" console.log(restColors.length); // 2 console.log(restColors[0]); // "green" console.log(restColors[1]); // "blue"

Rest 语法用于克隆数组 // cloning an array in ECMAScript 6 let colors = [ "red", "green", "blue" ]; let [ ...clonedColors ] = colors; console.log(clonedColors); // "[red,green,blue]"

函数参数解构赋值

Destructured parameters use the destructuring syntax to make options objects more transparent when used as function parameters. You can list all the actual data you’re interested in along with other named parameters. Destructured parameters can be array patterns, object patterns, or a mix- ture, and you can use all the features of destructuring. 结构对象的值解构出来不但可以赋给本地（结构变量），也可以直接用来调用函数。

function setCookie(name, value, { secure, path, domain, expires }) { // code to set the cookie }

let options = {secure: true,expires: 60000};

setCookie("type", "js", options);

所谓函数参数解构赋值（destructured parameters），其实只是一般本地声明式解构赋值的一种灵活运用：

function setCookie(name, value, options) { let { secure, path, domain, expires } = options; // code to set the cookie }