解构01—如何将数组的元素分配给变量

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); // 70console.log(y); // 80console.log(z); // 90

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

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

如果 getScores() 函数返回一个包含两个元素的数组，则第三个变量将未定义，如下所示：

function getScores() {   return [70, 80];}
let [x, y, z] = getScores();
console.log(x); // 70console.log(y); // 80console.log(z); // undefined

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

function getScores() {   return [70, 80, 90, 100];}
let [x, y, z] = getScores();
console.log(x); // 70console.log(y); // 80console.log(z); // 90

数组解构赋值和 Rest 语法

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

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

变量 x 和 y 接收返回数组的前两个元素的值。args 变量接收所有剩余的参数，它们是返回数组的最后两个元素。

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

let a, b;[a, b] = [10, 20];console.log(a); // 10console.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); // 10console.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); // 10console.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); // 20console.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