20-解构赋值

5.10　解构赋值

ES6中一个倍受欢迎的新特性是解构赋值，它允许将一个对象或者数组“分解”成多个单独的值。以对象的解构开始：

// 一个普通的对象
const obj = { b: 2, c: 3, d: 4 };
// 对象解构赋值
const {a, b, c} = obj;
a;                        // undefined: obj中不存在属性"a"
b;                        // 2
c;                        // 3
d;                        // 引用 error: "d" 未定义

解构一个对象时，变量名必须与对象中的属性名保持一致（数组解构只能指派那些作为标识符的属性名）。这个例子中，由于a跟对象的任何属性都不匹配，所以它的值为undefined。同样，因为声明中没有指定d，所以它没有被赋值。

上例中，在同一个语句中既有声明也有赋值。对象解构也可以在一个赋值语句中完成，但是这个语句必须被括号括起来。否则，JavaScript解释器会认为左边的部分是一个代码块。

const obj = { b: 2, c: 3, d: 4 };
let a, b, c;
// 会报错:
{a, b, c} = obj;
// 正常运行:
({a, b, c} = obj);

数组解构时，可以给数组的元素任意指定变量名（按顺序）。

// 一个普通数组
const arr = [1, 2, 3];
// 数组解构赋值
let [x, y] = arr;
x;                      // 1 
y;                      // 2 
z;                      // 错误: z 未定义

这个例子中， x 接收了数组第一个元素，y接收了第二个元素，所有没被接收的元素都被丢弃了。也可以把所有剩下的元素放入一个新的数组中，展开运算符（…）可以完成这个功能，在第6章会学习这个运算符。

const arr = [1, 2, 3, 4, 5];
let [x, y, ...rest] = arr;
x;                                 // 1 
y;                                 // 2 
rest;                              // [3, 4, 5]

这个例子中， x 和 y 接收前两个元素，变量 rest 接收所有剩下的元素（可以将 rest 命名为任何想要的名字）。数组解构可以很方便地交换变量的值（以前可能需要一个中间变量来完成）。

let a = 5, b = 10;
[a, b] = [b, a];
a;                                // 10
b;                                // 5

数组解构不仅适用于数组，还适用于任何可迭代的对象（在第9章会学习）。

在这些简单的例子中，可能简单直接地给变量赋值比解构来得更容易。不过，当对象和数组的值需要从其他地方获取时，解构就派上用场了，它可以轻松地获取某个元素。大家将在第6章中看到它大显身手。