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

英文 | https://www.javascripttutorial.net

翻译 | 杨小爱

在今天的教程中，我们将学习如何使用 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 解构赋值将数组中的元素解构为单个变量。

推荐阅读

【ES6 教程】第一章 新的ES6语法10—如何替换字符串中的变量

【ES6 教程】第一章 新的ES6语法09—八进制和二进制字面量

【ES6 教程】第一章 新的ES6语法08— for…of 循环

【ES6 教程】第一章 新的ES6语法07—ES6 提供了一种定义对象字面量的新方法

【ES6 教程】第一章 新的ES6语法06—JavaScript 扩展运算符

学习更多技能

请点击下方公众号