在今天的教程中，我们将学习如何使用 ES6 解构赋值，它允许我们将数组解构为单个变量。
ES6 提供了一个称为破坏赋值的新特性，它允许我们将对象的属性或数组的元素解构为单独的变量。
让我们从数组解构开始。
JavaScript 数组解构简介
假设我们有一个返回数字数组的函数，如下所示：
function getScores() {
return [70, 80, 90];
}
以下调用 getScores() 函数并将返回值分配给变量：
let scores = getScores();
要获得个人分数，我们需要这样做：
let x = scores[0],
y = scores[1],
z = scores[2];
在 ES6 之前，没有直接的方法可以将返回数组的元素分配给多个变量，例如 x、y 和 z。
幸运的是，从 ES6 开始，我们可以使用如下的析构赋值：
let [x, y, z] = getScores();
console.log(x); // 70
console.log(y); // 80
console.log(z); // 90
变量 x、y 和 z 将采用返回数组的第一个、第二个和第三个元素的值。
请注意，方括号 [] 看起来像数组语法，但它们不是。
如果 getScores() 函数返回一个包含两个元素的数组，则第三个变量将未定义，如下所示：
function getScores() {
return [70, 80];
}let [x, y, z] = getScores();
console.log(x); // 70
console.log(y); // 80
console.log(z); // undefined
如果 getScores() 函数返回一个包含三个以上元素的数组，则丢弃剩余的元素。例如：
function getScores() {
return [70, 80, 90, 100];
}let [x, y, z] = getScores();
console.log(x); // 70
console.log(y); // 80
console.log(z); // 90
数组解构赋值和 Rest 语法
可以使用 rest 语法 (…) 将数组的所有剩余元素放入一个新数组中：
let [x, y ,…args] = getScores();
console.log(x); // 70
console.log(y); // 80
console.log(args); // [90, 100]
变量 x 和 y 接收返回数组的前两个元素的值。args 变量接收所有剩余的参数，它们是返回数组的最后两个元素。
请注意，可以在与变量声明分开的赋值中解构数组。例如：
let a, b;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20
设置默认值
请参见以下示例：
function getItems() {
return [10, 20];
}let items = getItems();
let thirdItem = items[2] != undefined ? items[2] : 0;console.log(thirdItem); // 0
这个怎么运行：
首先，声明返回两个数字数组的 getItems() 函数。
然后，将 items 变量分配给 getItems() 函数的返回数组。
最后，检查数组中是否存在第三个元素。如果不是，则将值 0 分配给 thirdItem 变量。
使用默认值的解构赋值会更简单：
let [, , thirdItem = 0] = getItems();
console.log(thirdItem); // 0
如果从数组中获取的值未定义，则可以为变量分配默认值，如下所示：
let a, b;
[a = 1, b = 2] = [10];
console.log(a); // 10
console.log(b); // 2
如果 getItems() 函数没有返回一个数组并且我们期望一个数组，则破坏赋值将导致错误。例如：
function getItems() {
return null;
}let [x = 1, y = 2] = getItems();
错误：
Uncaught TypeError: getItems is not a function or its return value is not iterable
解决此问题的典型方法是将 getItems() 函数的返回值回退到一个空数组，如下所示：
function getItems() {
return null;
}let [a = 10, b = 20] = getItems() || [];
console.log(a); // 10
console.log(b); // 20
嵌套数组解构
以下函数返回一个数组，其中包含一个元素，该元素是另一个数组或嵌套数组：
function getProfile() {
return [
‘John’,
‘Doe’,
[‘Red’, ‘Green’, ‘Blue’]
];
}
由于返回数组的第三个元素是另一个数组，因此，需要使用嵌套数组解构语法对其进行解构，如下所示：
let [
firstName,
lastName,
[
color1,
color2,
color3
]
] = getProfile();console.log(color1, color2, color3); // Red Green Blue
数组解构赋值应用
让我们看一些使用数组解构赋值语法的实际示例。
1) 交换变量
数组解构使得在不使用临时变量的情况下交换变量值变得容易：
let a = 10,
b = 20;[a, b] = [b, a];
console.log(a); // 20
console.log(b); // 10
2) 返回多个值的函数
在 JavaScript 中，函数可以返回一个值。但是，我们可以返回一个包含多个值的数组，例如：
function stat(a, b) {
return [
a + b,
(a + b) / 2,
a – b
]
}
然后使用数组解构赋值语法将返回数组的元素解构为变量：
let [sum, average, difference] = stat(20, 10);
console.log(sum, average, difference); // 30, 15, 10
在今天的教程中，我们学习了如何使用 ES6 解构赋值将数组中的元素解构为单个变量。
英文 | https://www.javascripttutorial.net
翻译 | 杨小爱
相关文章
