读（深入浅出ES6）系列笔记（二）

六：解构 Destructuring

1、数组与迭代器的解构

解构赋值的特性访问数组中的前三个元素：var [first, second, third] = someArray;对任意深度的嵌套数组进行解构：var [foo, [[bar], baz]] = [1, [[2], 3]];console.log(foo);// 1console.log(bar);// 2console.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]);// undefinedvar [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

2、对象的解构

每个属性与不同的变量绑定，首先指定被绑定的属性，然后紧跟一个要解构的变量。var robotA = { name: "Bender" };var { name: nameA } = robotA;console.log(nameA);// "Bender"当属性名与变量名一致时，可以通过一种实用的句法简写：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 没有语法错误

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

当你尝试解构null或undefined时，你会得到一个类型错误：var {blowUp} = null;// TypeError: null has no properties（null没有属性）然而，你可以解构其它原始类型，例如：布尔值、数值、字符串，但是你将得到undefined：var {wtf} = NaN;console.log(wtf);// undefined当使用对象赋值模式时，被解构的值需要被强制转换为对象。大多数类型都可以被转换为对象，但null和undefined却无法进行转换。当使用数组赋值模式时，被解构的值一定要包含一个迭代器。

4、默认值

当你要解构的属性未定义时你可以提供一个默认值：var { message: msg = "Something went wrong" } = {};console.log(msg);// "Something went wrong"var { x = 3 } = {}; console.log(x);// 3

5、解构的实际应用

（1）函数参数定义    避免多个参数的使用顺序。    function removeBreakpoint({ url, line, column }) {      // ...    }（2）给需要解构的对象属性赋予默认值。    jQuery.ajax = function (url, {      async = true,      cache = true,      // ... 更多配置    }) {      // ... do stuff    };（3）当你迭代Maps对象后，你可以得到一系列形如[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"只遍历键：    for (var [key] of map) {      // ...    }或只遍历值：    for (var [,value] of map) {      // ...    }（4）多重返回值    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;    或者使用CPS变换：    function returnMultipleValues(k) {      k(1, 2);    }    returnMultipleValues((foo, bar) => ...);（5）使用解构导入部分CommonJS模块    当我们导入CommonJS模块X时，将显式定义模块的一部分来拆分使用，同时还不会污染你的命名空间：    const { SourceMapConsumer, SourceNode } = require("source-map");

本文主要是读迷你书所属的深入浅出ES6系列文章而做的笔记，详细教程请阅读原文：
http://www.infoq.com/cn/es6-in-depth/非常不错的系列教程