ECMAScript 2020 中解构赋值的嵌套数组的使用方法

前言

JavaScript 吸纳了降噪语言的有用特性后，成为了一门非常受欢迎的语言。语言的发展也使得我们有了更加优雅、直观的语言习惯和实践。在 ECMAScript 2020 中，有一个很有用的新特性：解构赋值的嵌套数组使用方法。本文将介绍如何使用解构赋值的嵌套数组外加一些实际应用来解释该怎样使用这个新特性。

解构赋值

假设你现在有一个数组或者对象，而你需要该数组或对象中的某些值。在之前的 JavaScript 版本中，从数组或对象中提取需要的属性会非常麻烦。然而，自 ECMAScript 2015，也被称为 ES6 开始，我们可以使用解构赋值语法从数组或者对象中提取需求的属性。如果你没用过解构赋值，你可以先看一看 MDN 上的 解构赋值。

我们将使用一个包含嵌套数组的简单例子来解释如何使用解构赋值，最终实现将数组结构展平并提取所需的值。

const dataset = [1, [2, 3], [4, [5, 6]]];

const [first, [second, third], [fourth, [fifth, sixth]]] = dataset;

在这个例子中，我们声明了一个名为 dataset 的数组，该数组包含嵌套数组。我们使用解构赋值将变量分别分配给第一层、第二层和第三层嵌套的数组元素。这种方式能够非常容易地取到我们想要的值：

console.log(first); // 1
console.log(second); // 2
console.log(third); // 3
console.log(fourth); // 4
console.log(fifth); // 5
console.log(sixth); // 6

如果你去掉第一、二、三行的 const 语句，那么变量名就不能使用了，我们将会得到错误 TypeError: invalid assignment left-hand side。

经过上述示例的解释，下面来看一下 ECMAScript 2020 中解构赋值的嵌套数组的使用方法。

嵌套数组的解构

ECMAScript 2020 引入了一个新的解构赋值语法，允许在数组里面嵌套解构。与之前的例子类似，解构嵌套数组变得非常简单。为了理解这个语法，下面举一些例子。

普通情况嵌套

让我们从一个简单的例子开始：

const nested_array = [3, [4, 5, "six"], 7];

const [first, [second, third, fourth], fifth] = nested_array;

console.log(first); // 3
console.log(second); // 4
console.log(third); // 5
console.log(fourth); // "six"
console.log(fifth); // 7

从数组中解构第一、第二层嵌套的元素，这与之前的例子相同。

可选的嵌套解构

为了演示如何使用可选的嵌套解构，请看下面的例子：

const nested_array = [3, [4, 5, "six"], 7];
const [, [, , variable]] = nested_array;

console.log(variable); // "six"

我们在第一个元素前面留了一个冒号，因此我们不会声明任何变量，我们直接从第二个数组中解构出第三个元素。

数组展开运算符

你可以使用数组展开运算符将剩余的数组元素展开到单独的数组或者展开到对象中。这种语法对于对 API 响应或包含许多嵌套结构的数据结构非常有用。

使用数组展开运算符展开剩余的元素，如下所示：

const nested_array = [3, [4, 5, "six"], 7, 8, 9];

const [first, rest_first, ...rest_nested_array] = nested_array;

console.log(first); // 3
console.log(rest_first); // [4, 5, "six"]
console.log(rest_nested_array); // [7, 8, 9]

在这个例子中，我们使用剩余的 ... 运算符将剩余元素展开到 rest_nested_array 中，类似于 spread 运算符。 rest_first 变量的结果显然是一个数组。

扩展运算符

扩展运算符 ...rest 结合解构赋值嵌套的数组可以使你从 API 响应中提取嵌套在对象中的数据。例如：

const api_data = [
    {
      id: 1,
      first_name: "Leonhard",
      last_name: "Edeford",
      address: {
        street: "93517 Eliot Avenue",
        apt: null,
        city: "Whitetail",
        state: "MT",
        zip: "59546",
        country: "United States"
      },
      age: 25,
      phone: "(406) 636-1063",
      email: "ledeford0@last.fm"
    },
    // more records
]
    
const [{first_name, last_name, address: {street}, ...rest},] = api_data;

console.log(first_name); // "Leonhard"
console.log(last_name); // "Edeford"
console.log(street); // "93517 Eliot Avenue"
console.log(rest); // // { age: 25, phone: "(406) 636-1063", email: "ledeford0@last.fm" }

在上述的例子中，我们使用嵌套的解构并从对象中提取了一些属性（first_name 和 last_name）以及地址（street）。rest 变量中包含剩余的 API 响应，此时你已经成功地分离了嵌套在 API 响应中的数据。

总结

在 ECMAScript 2020 中，我们有了一种非常方便的解构嵌套数组的语法，能够允许我们快速地从嵌套数组中提取所需属性。我们在本文中介绍了如何在 JavaScript 中使用嵌套数组解构，包括普通嵌套、可选嵌套、数组展开、扩展运算符等用法。这些用法都是非常有用的，在实践中可以大大提高你的编程效率。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6592785deb4cecbf2d74181f