2.2.1 数组的解构赋值

ES6 允许按照一定模式从数组和对象中提取值，再对变量赋值，这被称为解构( Destructuring ）。在实际的项目开发中，从数组和对象中提取值使用得非常频繁，本任务主要讲解如何从数组和对象中提取值。

在以前的开发中为变量赋值，只能直接指定值 。

示例8

// 传统赋值
let cly = 1;
let hzh = 2;
let hcq = 3;
console.log("把上面的三个数输出：");
console.log([cly, hzh, hcq]);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
把上面的三个数输出：
[ 1, 2, 3 ]
 
[Done] exited with code=0 in 0.435 seconds

// 在 ES6 的语法中允许这样
let [cly, hzh, hcq] = [1, 2, 3];
console.log("把上面的三个数输出：");
console.log([cly, hzh, hcq]);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
把上面的三个数输出：
[ 1, 2, 3 ]
 
[Done] exited with code=0 in 0.206 seconds

示例 8 中代码表示可以从数组中提取值，按照对应位置对变量赋值。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

示例 9 是使用嵌套数组进行解构的例子。

示例9

let [hzh, [[hcq], cly]] = [1, [[2],3]];
console.log("输出hzh：");
console.log("hzh = " + hzh);
console.log("");
console.log("输出hcq：");
console.log("hcq = " + hcq);
console.log("");
console.log("输出cly：");
console.log("cly = " + cly);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出hzh：
hzh = 1
 
输出hcq：
hcq = 2
 
输出cly：
cly = 3
 
[Done] exited with code=0 in 0.171 seconds

如果解构不成功，变量的值就等于 undefined。示例 10 中 hcq 属于解构不成功， hcq 的值会等于 undefined。

示例10

let [hzh, hcq] = ['黄子涵'];
console.log("输出hzh：");
console.log("hzh = " + hzh);
console.log("");
console.log("输出hcq：");
console.log("hcq = " + hcq);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出hzh：
hzh = 黄子涵
 
输出hcq：
hcq = undefined
 
[Done] exited with code=0 in 0.174 seconds

另一种情况是不完全解构，即等号左边的模式只匹配一部分等号右边的数组。这种情况下，解构依然可以成功 。示例 11 属于不完全解构，但是可以成功 。

示例11

let [hzh, hcq] = ['黄子涵', '黄春钦', '陈兰英'];
console.log("输出hzh：");
console.log("hzh = " + hzh);
console.log("");
console.log("输出hcq：");
console.log("hcq = " + hcq);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出hzh：
hzh = 黄子涵
 
输出hcq：
hcq = 黄春钦
 
[Done] exited with code=0 in 0.169 seconds

let [hzh, [hcq], cly] = ['黄子涵', ['黄春钦', '黄开卓'], '陈兰英'];
console.log("输出hzh：");
console.log("hzh = " + hzh);
console.log("");
console.log("输出hcq：");
console.log("hcq = " + hcq);
console.log("");
console.log("输出cly：");
console.log("cly = " + cly);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出hzh：
hzh = 黄子涵
 
输出hcq：
hcq = 黄春钦
 
输出cly：
cly = 陈兰英
 
[Done] exited with code=0 in 0.175 seconds

解构赋值也允许指定默认值。

示例12

let [hzh = '黄子涵'] = [];
console.log("输出hzh：");
console.log("hzh = " + hzh);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出hzh：
hzh = 黄子涵
 
[Done] exited with code=0 in 0.64 seconds

let [hzh, hcq = '黄春钦'] = ['黄子涵'];
console.log("输出hzh：");
console.log("hzh = " + hzh);
console.log("");
console.log("输出hcq：");
console.log("hcq = " + hcq);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出hzh：
hzh = 黄子涵
 
输出hcq：
hcq = 黄春钦
 
[Done] exited with code=0 in 0.213 seconds

let [hzh, hcq = '黄春钦'] = ['黄子涵', undefined];
console.log("输出hzh：");
console.log("hzh = " + hzh);
console.log("");
console.log("输出hcq：");
console.log("hcq = " + hcq);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出hzh：
hzh = 黄子涵
 
输出hcq：
hcq = 黄春钦
 
[Done] exited with code=0 in 0.743 seconds

let [hzh = '黄子涵'] = [undefined];
console.log("输出hzh：");
console.log("hzh = " + hzh);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出hzh：
hzh = 黄子涵
 
[Done] exited with code=0 in 0.618 seconds

let [hzh = '黄子涵'] = [null];
console.log("输出hzh：");
console.log("hzh = " + hzh);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出hzh：
hzh = null
 
[Done] exited with code=0 in 0.915 seconds

注意

ES6 内部使用严格相等运算符（＝＝＝）来判断一个位置是否有值，所以只有当一个数组成员严格等于 undefined，默认值才会生效。

示例 12 代码中，如果一个数组成员是 null，默认值就不会生效，因为 null 不严格等于 undefined。