【探秘ES6】系列专栏（六）：解构赋值

ES6做为新一代JavaScript标准，已正式与广大前端开发者见面。为了让你们对ES6的诸多新特性有更深刻的了解，Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获受权，将持续对该系列进行翻译，组织成【探秘ES6】系列专栏，供你们学习借鉴。本文为该系列的第六篇。  

什么是解构赋值？

解构赋值可将数组的元素或对象的属性赋予给另外一个变量，该变量的定义语法与数组字面量或对象字面量很类似。此语法很是简洁，相比于传统的属性访问方式，更加直观清晰。

在不使用解构赋值的状况下，一般咱们这样访问数组中的元素：

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

使用解构赋值后，代码获得了极大的简化，同时可读性也更强：

var [first, second, third] = someArray;

除了个别特性，解构赋值的大部分特性在SpiderMonkey（Firefox的JavaScript引擎）中都已获得支持，详见 bug 694100。

解构数组与其可迭代性

上面的例子为咱们展现了解构赋值在数组中的运用，其基本语法形式为：

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

这只是将变量1到变量N分配到数组相应的元素中。固然，若是想在同一时间对变量进行声明，能够在赋值前增长相应的关键字：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"

ES6中，提供了一种将右侧多余的值以数组的形式赋值给左侧变量的语法——“rest“模式：

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

不管是访问数组外仍是数组中不存在的元素，都会获得相同的结果：undifined：

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"

使用解构赋值访问对象中未定义的属性，将会获得undifined：

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

为对象的属性命名，但未对其声明（缺乏var、const或let关键字），会抛出一个语法错误：

{ blowUp } = { blowUp: 10 };  
// Syntax error

这是由于，JavaScript的语法规定引擎对语句进行解析，需以块语句为开头（例如，{console}即是一个有效的块语句）。解决的办法是将整个表达式包裹在一对括号中：

({ safe } = {});  
// No errors

非对象、数组、迭代的解构类型

当咱们尝试对null或undefined使用解构赋值时，将会抛出一个类型错误：

var {blowUp} = null;  
// TypeError: null has no properties

可是，对于其余原始类型如：布尔量，数字或字符串等则能够运用解构赋值，并获得undifined：

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

对于这种状况，你可能会感到很意外。但缘由其实很简单，这是由于使用对象赋值模式时，被解构的值必需可以转换成一个对象（object）。大多数的类型均可以转换为一个对象，但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

（编者注：此功能在Firefox上目前只实现了前两种状况，而第三种并未实现。见bug932080。）

解构的实际应用

函数参数定义

做为开发人员，咱们常常把一个对象用做函数的参数。这个对象具备不少的属性，以便暴露出更多便于咱们使用的API，从而无需迫使咱们的开发者去记住大量独立参数的顺序。咱们对参数对象使用解构赋值，这样，在访问对象属性时，即可以免重复调用这一参数对象，示例代码以下：

function removeBreakpoint({ url, line, column }) {  
  // ...  
}

这是来自Firefox开发工具JavaScript调试器（在JavaScript中执行）中的代码简化片段。咱们发现这种模式是极好的。

配置对象参数

对前面的例子进行扩展，若咱们正在对对象的属性进行解构赋值，那么咱们仍旧能够为其赋予默认值。这是十分有用的，尤为是当咱们打算配置对象或是对象的属性已经有了合理的默认值。例如，jQuery中的AJAX函数须要一个配置对象做为其第二参数，能够改写以下：

jQuery.ajax = function (url, {  
  async = true,  
  beforeSend = noop,  
  cache = true,  
  complete = noop,  
  crossDomain = false,  
  global = true,  
  // ... more config  
}) {  
  // ... do stuff  
};

这样就避免了为配置对象中的每一个属性重复：var foo = config.foo || theDefaultFoo（编者注：不幸的是，在Firefox中，对象简写语法中的默认值仍旧不可以使用，详情见bug932080的最新更新。）

ES6迭代协议

ECMAScript6中还定义了一项迭代的协议，在这个系列的前面咱们已经谈到过。当你遍历 Maps（一个ES6非标准库），会获得一系列的[key，value]。咱们能够对这些[key，value]运用解构的方式，从而方便地访问它们：

var map = new Map();  
map.set(window, "the global");  
map.set(document, "the document");  
  
for (var [key, value] of map) {  
  console.log(key + " is " + value);  
}  
// "[object Window] is the global"  
// "[object HTMLDocument] is the document"

只遍历key：

for (var [key] of map) {  
  // ...  
}

或只遍历value：

for (var [,value] of map) {  
  // ...  
}

多返回值

你能够经过数组的形式返回多个值，并对其解构赋值：

function returnMultipleValues() {  
  return [1, 2];  
}  
var [foo, bar] = returnMultipleValues();

或者，返回的值为一个对象，用解构赋值的方式对其进行命名：

function returnMultipleValues() {  
  return {  
    foo: 1,  
    bar: 2  
  };  
}  
var { foo, bar } = returnMultipleValues();

与上面两种模式相比，下面这种模式就显得过于繁琐：

function returnMultipleValues() {  
  return {  
    foo: 1,  
    bar: 2  
  };  
}  
var temp = returnMultipleValues();  
var foo = temp.foo;  
var bar = temp.bar;

或着使用连续风格的传递（continuation passing style）：

function returnMultipleValues(k) {  
  k(1, 2);  
}  
returnMultipleValues((foo, bar) => ...);

从CommonJS的模块中导入接口名

不使用ES6模块了吗？仍使用CommonJS的模块？没问题！当导入一些CommonJS的模块时，很是常见的状况是模块的接口功能比你实际需求的多许多。经过解构的方式，你能够明确你须要的那部分，而且能够防止多余的接口名污染你的命名空间：

const { SourceMapConsumer, SourceNode } = require("source-map");

（若是你使用ES6模块，你应当知道相似的语法可用于声明导入。）

结语

因此，就如你所看到的那样，在不少独立细小的方面，解构赋值都很是有用。在Mozilla，关于它的使用咱们积累了大量的经验。十年前Lars Hansen将JS的解构赋值模式引入Opera，随后Brendan Eich将他引入Firefox。并在Firefox2中得以应用。

以前，咱们说ES6将会改变你写JavaScript的方式。将这些新的特性和微小的改进结合起来，它终将会影响你工做中的每个项目。这是一场以进化的方式发起的革命。

固然，这是团队努力取得的成果。在这里，特别感谢Tooru Fujisawa (arai)和Arpad Borsos (Swatinem)做出的杰出贡献。关于浏览器的支持方面，Chrome对解构的支持正在开发中，无疑其余浏览器会及时支持。至于如今，若是你想在Web上使用解构，则须要使用 Babel或 Traceur。

原文连接：ES6 In Depth: Destructuring

本译文遵循Creative Commons Attribution Share-Alike License v3.0