【ES6 教程】第2章 解构01—如何将数组的元素分配给变量

ES6教程11个月前发布 admin
1,022 0

在今天的教程中,我们将学习如何使用 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
翻译 | 杨小爱

© 版权声明

相关文章

暂无评论

暂无评论...