ES6之数组解构

---

ES6学习系列

---

对象和数组字面量是JavaScript中两种最常用的数据结构，由于JSON数据格式的普及，二者已经成为语言中最重要的一部分。在代码中，我们经常定义很多对象和数组，然后从去提取相关的信息片段，ES6为简化这种任务引入了新特性：解构（destructuring assignment）。

数组解构

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

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

上面代码从colors数组中解构出了red和green两个值，并分别存储在变量firstColor和变量secondColor中。在数组解构语法中，我们通过值在数组中的位置进行选取，且可以将其存储在任意变量中，未显式声明的元素都会直接被忽略。

切记，在这个整个过程中，数组本身不会发生任何变化

在解构模式中，也可以使用省略元素，只为感兴趣的元素提供变量。比如，只想取数组中的第三个值，则不需要提供第一个和第二个元素的变量名称：

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

这段代码中使用解构赋值语法从colors中获取第三个元素，thirdColor前的逗号是前方元素的占位符，无论数组中的元素有多少个，你都可以通过这种方法提取想要的元素，不需要为每一个元素都指定变量名。

解构赋值

数组解构也可以用于赋值上下文，但是不需要用小括号来包裹表达式。这一点与对象的解构的约定不同。

let colors = ["red", "green", "blue"],
    firstColor = "black", secondColor = "purple";
[firstColor, secondColor] = colors;
// red
console.log(firstColor);
// green
console.log(secondColor);

在这个示例中，首先定义了两个变量，然后再记性解构赋值。
数组解构语法还有一个独特的案例：交换两个变量的值。在排序算法中，值交换时一个非常常见的操作，如果要在ES5中交换两个变量的值，则必须引入第三个变量：

// 在ES5中交换变量
let a = 1, b = 2, tmp;
tmp = a;
a = b;
b = tmp;
// 2
console.log(a);
// 1
console.log(b);

在这种变量交换的方式中，中间变量tmp时不可或缺的。如果使用数组结构赋值语法，就不需要额外的变量了。在ES6中非常简单

let a = 1, b = 2;
[a, b] = [b, a];
// 2
console.log(a);
// 1
console.log(b);

在这个示例中，数组解构赋值更像一个镜像：赋值语句左侧与其他数组解构示例一样，是一个解构模式；右侧是一个为交换过程创建的临时数组字面量。代码执行过程中，先解构临时数组，将b和a的值复制到左侧数组的前两个位置，最终结果时变量互换了它们的值。

如果右侧数组解构赋值表达式的值为null或者undefined，则会导致程序抛出错误，这一特性与对象解构赋值很相似

默认值

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

let colors = ["red"],
    firstColor = "black", secondColor = "purple";
[firstColor, secondColor = "green"] = colors;
// red
console.log(firstColor);
// green
console.log(secondColor);

不定元素

在前面曾经介绍过函数的不定参数，而在数组解构语法中有一个相似的概念：不定元素。在数组中，可以通过Rest element …语法数组中的其余元素赋值给一个特定的变量，比如

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

数组colors中的第一个元素被赋值给了firstColor，其余的元素被赋值给restColors数组，所以restColors包含了两个元素。不定元素语法有助于从数组中提取特定元素并保证其余元素可用，它还有另外一个有趣的应用。
在设计JavaScript时，很明显遗漏了一个数组复制的功能。而在ES5中，开发者经常使用concat()方法来客隆数组

let colors = ["red", "green", "blue"];
var cloneColors = colors.concat();
// (3) ['red', 'green', 'blue']
console.log(cloneColors);

concat方法的设计初衷时连接两个数组，如果调用时不传递参数就会返回当前数组的副本在ES6中，可以通过不定元素的语法来实现相同的目标

// ES5
// var cloneColors = colors.concat();
// ES6
let [...cloneColors] = colors;
// (3) ['red', 'green', 'blue']
console.log(cloneColors);

在被解构的数组中，不定元素必须为最后一个条目，在后面继续添加逗号会导致程序抛出异常 Uncaught SyntaxError: Rest element must be last element