JavaScript 中的解构——如何解构数组和对象

解构 JavaScript 数组和对象是有趣的过程,这有助于你获取存储的数据。

在本文中,你将了解如何在 JavaScript 数组和对象中将解构提升到一个新的水平。

目录:

  • 什么是数组
  • 什么是对象
  • 在 JavaScript 中解构是什么意思
  • 数组中的解构
  • 对象中的解构

JavaScript 中的数组是什么

在 JavaScript 中,数组是一个变量存储多个元素。它是数据的集合。我们可以通过两种不同的方式声明一个数组,它们是:

// Method 1
const firstArray = ["JavaScript", "Python", "Go"];

// Method 2
const secondArray = new Array(3);
secondArray[0] = "JavaScript";
secondArray[1] = "Python";
secondArray[2] = "Go";

在方法 1 中,你可以在声明数组时进行初始化。在方法 2 中,你在初始化之前使用要存储的元素数声明数组。

JavaScript 中的对象是什么

在 JavaScript 中,对象是属性的集合,而属性是名称(或键)与值之间的关联。

用 JavaScript 编写对象在某种程度上类似于数组,但我们使用花括号来创建它们。让我们看看下面的代码,它显示了一个带有属性的汽车对象:

const car = {
  name: "Toyota",
  color: "Black",
  year: 2022,
  engineType: "Automatic",
};

请注意,构成一个对象的是一个键跟着它的值。

现在你已经了解了 JavaScript 数组和对象的基本知识,让我们更多地讨论解构。

JavaScript 中的解构是什么

想象一下,你想从你的收藏中挑选一些鞋子,并且想要你最喜欢的蓝色鞋子。你要做的第一件事是搜索你的收藏并打开里面的任何东西。

现在解构就像你在寻找鞋子时所采用的方法一样。解构是对数组或对象中的元素进行解包的行为。

解构不仅使我们能够解包元素,它还使你能够根据要执行的操作类型来操纵和切换解包的元素。

现在让我们看看解构在数组和对象中是如何运行的。

数组中的解构

为了在 JavaScript 中解构数组,我们使用方括号 [] 来存储变量名,该变量名将分配给存储元素的数组的名称。

const [var1, var2, ...] = arrayName;

上面声明的 var2 后面的省略号仅表示我们可以根据要从数组中删除的项目数量创建更多变量。

如何使用解构分配变量

现在,假设我们有一个包含 6 种颜色的数组,但我们只想获取数组中的前 2 种颜色,我们可以使用解构来实现。

现在让我们来看看它:

const colorArr = ["red", "yellow", "blue", "green", "white", "black"];

const [first, second] = colorArr;
console.log(first, second);

// red, yellow

first

当我们运行上面的代码时,应该将红色和黄色记录到控制台。

如何使用解构交换变量

现在你已经知道如何使用解构来分配变量,让我们看看如何使用解构来快速交换变量值。

假设我们有一个包含两个元素 “food” 和 “fruits” 的数组,我们使用解构将这些值分配给变量 positionOne 和 positionTwo

const edibles = ["food", "fruits"];

let [positionOne, positionTwo] = edibles;
console.log(positionOne, positionTwo);

// food, fruits

如果我们稍后想要在不解构的情况下交换 positionOne 和 positionTwo 的值,我们需要使用另一个变量来临时保存当前变量之一的值,然后执行交换。

例如:

const edibles = ["food", "fruits"];

let [positionOne, positionTwo] = edibles;
const temp = positionOne;

positionOne = positionTwo;
positionTwo = temp;
console.log(positionOne, positionTwo);

// fruits, food

但是通过解构,我们可以很容易地交换 positionOne 和 positionTwo 的值,而不必使用临时变量:

const edibles = ["food", "fruits"];

let [positionOne, positionTwo] = edibles;
[positionOne, positionTwo] = [positionTwo, positionOne];
console.log(positionOne, positionTwo);

// fruits, food

second

请注意,这种交换变量的方法不会改变原始数组。如果你将 edibles 打印到控制台,你会看到它的值仍然是 ["food", "fruits"]

如何使用解构来改变数组

改变(mutating)意味着改变元素的形式或值。如果值可以更改,则称该值是可变的(mutable)。借助数组中的解构,我们可以改变数组本身。

假设我们有相同的 edibles 数组,并且我们想通过交换 "food" 和 "fruits" 的顺序来改变数组。

我们可以通过解构来做到这一点,类似于之前交换两个变量的值的方式:

const edibles = ["food", "fruits"];

[edibles[0], edibles[1]] = [edibles[1], edibles[0]];
console.log(edibles);

// ["fruits", "food"]

对象中的解构

解构对象时,我们使用花括号,其中包含对象中的确切名称。与我们可以在数组中使用任何变量名来解包元素不同,对象只允许使用存储数据的名称。

有趣的是,我们可以操作并为我们想从对象中获取的数据分配一个变量名,代码如下:

const freeCodeCamp = {
  frontend: "React",
  backend: "Node",
  database: "MongoDB",
};

const { frontend, backend } = freeCodeCamp;
console.log(frontend, backend);

// React, Node

3-4

将我们拥有的内容打印到控制台会显示前端和后端的值。现在让我们看看如何为要解包的对象分配一个变量名。

const freeCodeCamp = {
  frontend: "React",
  backend: "Node",
  database: "MongoDB",
};

const { frontend: courseOne, backend: courseTwo } = freeCodeCamp;
console.log(courseOne, courseTwo);

// React, Node

4-2

如你所见,我们有 courseOne 和 courseTwo 作为要解包的数据的名称。

分配变量名将始终帮助我们保持代码整洁,尤其是在处理外部数据时,当我们想要在代码中解包并重用它时。

总结

你现在已经学习了如何在数组和对象中进行解构。你还学习了如何切换数组中元素的位置。

那么接下来呢?尝试练习并将你的解构能力提升到一个新的水平。