ES6 解构赋值详解 - JavaScript 教程

摘要：在本教程中，您将学习如何使用 ES6 解构赋值，它允许您将数组解构为单个变量。

ES6 提供了一个名为解构赋值的新功能，它允许您解构对象的属性或数组的元素为单个变量。

让我们从数组解构开始。

JavaScript 数组解构简介

假设您有一个返回数字数组的函数，如下所示

function getScores() {
   return [70, 80, 90];
}Code language: JavaScript (javascript)

以下调用 getScores() 函数并将返回值分配给一个变量

let scores = getScores();Code language: JavaScript (javascript)

要获取单个分数，您需要这样做

let x = scores[0], 
    y = scores[1], 
    z = scores[2];Code language: JavaScript (javascript)

在 ES6 之前，没有直接的方法将返回数组的元素分配给多个变量，例如 x、y 和 z。

幸运的是，从 ES6 开始，您可以使用解构赋值，如下所示

let [x, y, z] = getScores();

console.log(x); // 70
console.log(y); // 80
console.log(z); // 90Code language: JavaScript (javascript)

变量 x、y 和 z 将分别取返回数组的第一、第二和第三个元素的值。

请注意，方括号 [] 看起来像数组语法，但它们不是。

如果 getScores() 函数返回一个包含两个元素的数组，第三个变量将是 undefined，如下所示

function getScores() {
   return [70, 80];
}

let [x, y, z] = getScores();

console.log(x); // 70
console.log(y); // 80
console.log(z); // undefinedCode language: JavaScript (javascript)

如果 getScores() 函数返回一个包含三个以上元素的数组，剩余元素将被丢弃。例如

function getScores() {
   return [70, 80, 90, 100];
}

let [x, y, z] = getScores();

console.log(x); // 70
console.log(y); // 80
console.log(z); // 90Code language: JavaScript (javascript)

数组解构赋值和剩余语法

可以使用剩余语法 (...) 将数组的所有剩余元素放入一个新数组中

let [x, y ,...args] = getScores();
console.log(x); // 70
console.log(y); // 80
console.log(args); // [90, 100]Code language: JavaScript (javascript)

变量 x 和 y 分别接收返回数组的前两个元素的值。args 变量接收所有剩余参数，即返回数组的后两个元素。

请注意，可以在与变量声明分开的赋值中解构数组。例如

let a, b;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20Code language: JavaScript (javascript)

设置默认值

请参见以下示例

function getItems() {
    return [10, 20];
}

let items = getItems();
let thirdItem = items[2] != undefined ? items[2] : 0;

console.log(thirdItem); // 0Code language: JavaScript (javascript)

工作原理

首先，声明 getItems() 函数，该函数返回一个包含两个数字的数组。
然后，将 items 变量分配给 getItems() 函数的返回数组。
最后，检查数组中是否存在第三个元素。如果没有，将值 0 分配给 thirdItem 变量。

使用带默认值的解构赋值会更简单

let [, , thirdItem = 0] = getItems();

console.log(thirdItem); // 0Code language: JavaScript (javascript)

如果从数组中获取的值是 undefined，您可以为变量分配一个默认值，如下所示

let a, b;
[a = 1, b = 2] = [10];
console.log(a); // 10
console.log(b); // 2Code language: JavaScript (javascript)

如果 getItems() 函数没有返回数组，而您期望返回数组，解构赋值会导致错误。例如

function getItems() {
    return null;
}

let [x = 1, y = 2] = getItems();Code language: JavaScript (javascript)

错误

Uncaught TypeError: getItems is not a function or its return value is not iterableCode language: JavaScript (javascript)

解决此问题的典型方法是将 getItems() 函数的返回值回退到一个空数组，如下所示

function getItems() {
    return null;
}

let [a = 10, b = 20] = getItems() || [];

console.log(a); // 10
console.log(b); // 20Code language: JavaScript (javascript)

嵌套数组解构

以下函数返回一个包含一个元素的数组，该元素是另一个数组，或嵌套数组

function getProfile() {
    return [
        'John',
        'Doe',
        ['Red', 'Green', 'Blue']
    ];
}Code language: JavaScript (javascript)

由于返回数组的第三个元素是另一个数组，您需要使用嵌套数组解构语法来解构它，如下所示

let [
    firstName,
    lastName,
    [
        color1,
        color2,
        color3
    ]
] = getProfile();

console.log(color1, color2, color3); // Red Green BlueCode language: JavaScript (javascript)

数组解构赋值应用

让我们看看一些使用数组解构赋值语法的实际示例。

1) 交换变量

数组解构使交换变量的值变得很容易，无需使用临时变量

let a = 10, 
    b = 20;

[a, b] = [b, a];

console.log(a); // 20
console.log(b); // 10Code language: JavaScript (javascript)

2) 返回多个值的函数

在 JavaScript 中，函数可以返回值。但是，您可以返回一个包含多个值的数组，例如

function stat(a, b) {
    return [
        a + b,
        (a + b) / 2,
        a - b
    ]
}Code language: JavaScript (javascript)

然后，您可以使用数组解构赋值语法将返回数组的元素解构为变量

let [sum, average, difference] = stat(20, 10);
console.log(sum, average, difference); // 30, 15, 10Code language: JavaScript (javascript)

在本教程中，您已经学习了如何使用 ES6 解构赋值将数组中的元素解构为单个变量。

本教程对您有帮助吗？