JS对象解构

什么是解构赋值？

解构赋值容许你使用相似数组或对象字面量的语法将数组和对象的属性赋给各类变量。这种赋值语法极度简洁，同时还比传统的属性访问方法更为清晰。

一般来讲，你极可能这样访问数组中的前三个元素：

var first = someArray[0]; var second = someArray[1]; var third = someArray[2];

若是使用解构赋值的特性，将会使等效的代码变得更加简洁而且可读性更高：

var [first, second, third] = someArray;

SpiderMonkey（Firefox的JavaScript引擎）已经支持解构的大部分功能，可是仍不健全。你能够经过bug 694100跟踪解构和其它ES6特性在SpiderMonkey中的支持状况。

数组与迭代器的解构

以上是数组解构赋值的一个简单示例，其语法的通常形式为：

[ variable1, variable2, ..., variableN ] = array;

这将为variable1到variableN的变量赋予数组中相应元素项的值。若是你想在赋值的同时声明变量，可在赋值语句前加入var、let或const关键字，例如：

var [ variable1, variable2, ..., variableN ] = array; let [ variable1, variable2, ..., variableN ] = array; const [ variable1, variable2, ..., variableN ] = array;

事实上，用变量来描述并不恰当，由于你能够对任意深度的嵌套数组进行解构：

var [foo, [[bar], baz]] = [1, [[2], 3]]; console.log(foo); // 1 console.log(bar); // 2 console.log(baz); // 3

此外，你能够在对应位留空来跳过被解构数组中的某些元素：

var [,,third] = ["foo", "bar", "baz"]; console.log(third); // "baz"

并且你还能够经过“不定参数”模式捕获数组中的全部尾随元素：

var [head, ...tail] = [1, 2, 3, 4]; console.log(tail); // [2, 3, 4]

当访问空数组或越界访问数组时，对其解构与对其索引的行为一致，最终获得的结果都是：undefined。

console.log([][0]); // undefined var [missing] = []; console.log(missing); // undefined

请注意，数组解构赋值的模式一样适用于任意迭代器：

function* fibs() { var a = 0; var b = 1; while (true) { yield a; [a, b] = [b, a + b]; } } var [first, second, third, fourth, fifth, sixth] = fibs(); console.log(sixth); // 5

对象的解构

经过解构对象，你能够把它的每一个属性与不一样的变量绑定，首先指定被绑定的属性，而后紧跟一个要解构的变量。

var robotA = { name: "Bender" }; var robotB = { name: "Flexo" }; var { name: nameA } = robotA; var { name: nameB } = robotB; console.log(nameA); // "Bender" console.log(nameB); // "Flexo"

当属性名与变量名一致时，能够经过一种实用的句法简写：

var { foo, bar } = { foo: "lorem", bar: "ipsum" }; console.log(foo); // "lorem" console.log(bar); // "ipsum"

与数组解构同样，你能够随意嵌套并进一步组合对象解构：

var complicatedObj = { arrayProp: [ "Zapp", { second: "Brannigan" } ] }; var { arrayProp: [first, { second }] } = complicatedObj; console.log(first); // "Zapp" console.log(second); // "Brannigan"

当你解构一个未定义的属性时，获得的值为undefined：

var { missing } = {}; console.log(missing); // undefined

请注意，当你解构对象并赋值给变量时，若是你已经声明或不打算声明这些变量（亦即赋值语句前没有let、const或var关键字），你应该注意这样一个潜在的语法错误：

{ blowUp } = { blowUp: 10 }; // Syntax error 语法错误

为何会出错？这是由于JavaScript语法通知解析引擎将任何以{开始的语句解析为一个块语句（例如，{console}是一个合法块语句）。解决方案是将整个表达式用一对小括号包裹：

({ safe } = {}); // No errors 没有语法错误

解构值不是对象、数组或迭代器

当你尝试解构null或undefined时，你会获得一个类型错误：

var {blowUp} = null; // TypeError: null has no properties（null没有属性）

然而，你能够解构其它原始类型，例如：布尔值、数值、字符串，可是你将获得undefined：

var {wtf} = NaN; console.log(wtf); // undefined

你可能对此感到意外，但通过进一步审查你就会发现，缘由其实很是简单。当使用对象赋值模式时，被解构的值须要被强制转换为对象。大多数类型均可以被转换为对象，但null和undefined却没法进行转换。当使用数组赋值模式时，被解构的值必定要包含一个迭代器。

默认值

当你要解构的属性未定义时你能够提供一个默认值：

var [missing = true] = []; console.log(missing); // true var { message: msg = "Something went wrong" } = {}; console.log(msg); // "Something went wrong" var { x = 3 } = {}; console.log(x); // 3