JavaScript 数组：像我五岁一样解释

本文最初发表于Dasha。

如果您感兴趣的话，Dasha 是一个对话式 AI 即服务平台，可让您将逼真的语音和文本对话功能嵌入到您的应用或产品中。立即免费开始构建！

数组是学习 JavaScript 时遇到的基本且关键的概念之一。此外，它也是许多其他复杂数据结构的基础。因此，对数组有扎实的基础知识和知识对你的编程之旅至关重要。

让我问你一下，

您以前使用过简单的待办事项应用程序吗？
您是否使用过存储播放列表的音乐应用程序？
您见过任何排行榜应用程序吗？

如果您以前使用过这些应用程序中的任何一个，那么这些应用程序中的大多数很可能都使用数组来存储这些数据列表。

数组是强大的数据结构，了解如何使用它们至关重要。本文将介绍什么是数组、如何创建数组以及一些常用的数组方法。

什么是数组？

在 JavaScript 中，数组用于存储多个值。你可以将数组视为值的有序列表。数组按逻辑顺序或顺序排列其元素。此外，数组具有内置方法，可以轻松地根据元素的位置查找、添加或删除元素。

假设我们有一艘千年隼号飞船。船上载着一些《星球大战》角色。现在我们要把这些数据存储在数组中。

以下是我们的数组的直观表示：

你可以看到汉斯、卢克、莱娅和丘巴卡彼此相邻。这就是我们所说的数组按逻辑顺序或序列组织元素的含义。

这在访问项时非常有用，因为计算机已经知道值的位置。这是因为有一个数字指向值存储的位置。我们称之为index。

数组索引从 0 开始，越向右，索引越加 1。这种编号方法称为“从零开始的编号”。

例如，在上面的数组中，汉斯 (Hans) 位于index 0，卢克 (Luke) 位于index 1，莱娅 (Leia) 位于index 2，依此类推。请查看下图。

JavaScript 中一个有趣的特性是数组是动态的，这意味着数组的大小可以根据需要增大或缩小。它不像静态数组那样需要专门设置固定的长度。

您可以在数组中存储任何类型的数据。例如，您可以存储布尔值、字符串、数字、字符、对象，甚至其他类型的数组。此外，您还可以创建包含多种数据类型元素的数组。例如，创建一个数组，第一个位置是数字，第二个位置是字符串，第三个位置是对象，等等。

这是一个包含不同类型元素的数组：

在进入数组方法以及使用数组方法添加和删除元素之前，让我们先看一下length属性。

该`length`物业

该length属性返回数组的大小。访问长度时，它仅返回最大索引的值 + 1。

如果您想知道为什么它要添加1到索引中，如果您还记得，索引从 0 开始，因此要获取元素的实际数量，它不会计算元素；它会获取最大的数字索引加一。

length您可以使用以下属性找出数组的长度：

let milleniumFalconShip = ["Hans", "Luke", "Leia", "Chewbacca"];

console.log(milleniumFalconShip.length); // 4

数组方法

JavaScript 的标准库包含许多数组方法，可帮助您轻松操作数组。例如，有一些方法可以添加和删除数组中的元素，还有一些方法可以查找和筛选元素。在本文中，我们将学习一些基本的数组方法，用于在数组中添加和删除元素。

现在让我们看看如何创建数组并使用数组。

如何创建数组

在 JavaScript 中，创建数组的方法有很多种。本文将介绍如何使用和创建array literal数组array constructor。

使用数组文字创建数组

数组字面量使用方括号[]包裹以逗号分隔的元素列表。这是创建数组的最常用方法。

让我们使用数组文字符号来声明一个包含星球大战角色的数组。

let milleniumFalconShip = ["Hans", "Luke", "Leia", "Chewbacca"];

项目或值在左括号和右括号之间定义，每个值之间用逗号分隔。我们必须像添加变量一样将值添加到数组中，这意味着如果添加字符串，则必须使用引号。

您可以使用空括号声明一个空数组，如下所示：

let milleniumFalconShip = [];

使用数组构造函数创建数组

我们可以使用数组构造函数创建相同的数组。但是，使用关键字的语法略有不同new。请查看以下示例。

let milleniumFalconShip = new Array("Hans", "Luke", "Leia", "Chewbacca")

当我们使用数组构造函数创建包含数字的数组时，它的行为会略有不同，尤其是在只添加一个数字时。例如，如果我们创建一个包含一个数值的数组，let myArray = new Array(4)它将创建一个没有元素但长度为 4 的列表。因此，['Han']它与相同，new Array('Han')但[4]与不同new Array(4)。查看以下示例以了解此行为。

// Array with one string
let arr = new Array("Hans");
console.log(arr.length); // 1
console.log(arr[0]);    // "Hans"

// Array with one numerical value
let myArray = new Array(4);

console.log(myArray.length);  // 4

console.log(myArray[0]);  // undefined
console.log(myArray[1]);  // undefined
console.log(myArray[2]);  // undefined
console.log(myArray[3]);  // undefined

在上面的例子中，数组myArray长度被设置为 4，因为我们添加了一个设置长度的数值。并且它创建了一个没有元素的列表，所以每个位置的值都是undefined。

要创建一个空数组，您可以简单地声明一个没有参数的空数组：

let myArray = new Array();

如何访问数组元素

希望你记住，数组元素已经分配了索引位置。我们可以通过方括号引用这个索引号来访问每个元素[]。

让我们看看如何从千年隼号飞船访问每个成员。

let milleniumFalconShip = ["Hans", "Luke", "Leia", "Chewbacca"];

console.log(milleniumFalconShip[0]);  // "Hans"
console.log(milleniumFalconShip[1]);  // "Luke"
console.log(milleniumFalconShip[2]);  // "Leia"
console.log(milleniumFalconShip[3]);  // "Chewbacca"

数组可以包含其他数组，因为它可以包含多维数组。那么，如何在数组内部访问这些数组呢？我们以一个表示“星球大战”家族的多维数组为例。

以下是我们的多维数组的直观表示：

我们可以按如下方式写这个数组：

let milleniumFalconShip = ["Anakin", "Padme", ["Luke", "Leia"]];

现在，如果我们要访问“Leia”，我们可以看到她位于index 1嵌套数组中，而嵌套数组位于index 2主数组的。你感到困惑吗？请查看下图。

现在，要访问 Leia，我们必须参考下面这两个索引号：

let leia = milleniumFalconShip[2][1];

console.log(leia);  //  "Leia"

向数组添加元素

使用索引添加元素

你已经看到，我们可以通过调用索引来访问数组中的每个元素。我们可以通过简单地将值设置为索引号来向数组添加项目，如下所示。

let milleniumFalconShip = ["Hans", "Luke", "Leia", "Chewbacca"];
milleniumFalconShip[4] = "Anakin";

console.log(milleniumFalconShip);  // 'Hans', 'Luke', 'Leia', 'Chewbacca', 'Anakin'

在这里，我在数组中添加了一个元素index 4，该元素以前不存在，但现在的值为“Anakin”。

如果我们向一个已经存在的值添加一个元素会发生什么？例如，如果我们向一个已经存在的值添加一个元素，index 3,会发生什么？

当你将元素添加到已存在的值时，它将替换原始值。因此，它会修改或更改元素。请查看以下示例。

let milleniumFalconShip = ["Hans", "Luke", "Leia", "Chewbacca"];
milleniumFalconShip[1] = "Padme";

console.log(milleniumFalconShip);  // 'Hans', 'Padme', 'Leia', 'Chewbacca'

另外，声明带有索引的元素时也需要注意。如果添加一个具有给定索引的元素，且中间没有其他元素，则数组将创建一个包含所有没有值的元素的列表。请看以下示例：

let milleniumFalconShip = ["Hans", "Luke"];
milleniumFalconShip[6] = "Leia";
console.log(milleniumFalconShip.length); // 7
console.log(milleniumFalconShip); //'Hans', 'Luke', undefined, undefined, undefined, undefined, 'Leia'

让我们看看我们在这里做了什么：

我们创建了一个包含两个元素的数组。
我们在处添加了另一个元素index 6。
这将数组长度修改为 7。
索引 2、3、4、5 的值未定义，因为我们没有向这些索引添加任何元素。

将元素添加到数组末尾

该push()方法允许我们在数组末尾添加一个或多个项目。

让我们为星球大战团队添加更多成员😊

let milleniumFalconShip = ["Hans", "Luke", "Leia", "Chewbacca"];

// Adds "Anakin" and "Padme" at the end of the array
milleniumFalconShip.push("Anakin", "Padme");  

console.log(milleniumFalconShip);  //'Hans', 'Luke', 'Leia', 'Chewbacca', 'Anakin', 'Padme'

如果我们考虑性能，该push()方法运行速度很快，因为它不需要移动任何索引，因为它将元素添加到末尾，而其他元素保留其索引。

将元素添加到数组的开头

该unshift()方法允许我们将一个或多个项目添加到数组的开头。

let milleniumFalconShip = ["Hans", "Luke", "Leia", "Chewbacca"];

// Adds "R2-D2" and "BB-8" at the beginning of the array
milleniumFalconShip.unshift("R2-D2", "BB-8"); 

console.log(milleniumFalconShip); //'R2-D2', 'BB-8', 'Hans', 'Luke', 'Leia', 'Chewbacca'

该unshift ()方法性能较慢。当一个元素添加到数组的开头时，所有其他元素都必须右移，并将它们的索引从 0 重新编号到 1，从 1 重新编号到 2，等等。因此，当数组中的元素越多，移动它们所需的时间就越长，从而消耗更多的内存操作。

从数组中删除元素

从数组末尾删除元素

该pop()方法用于从数组中删除最后一个元素。我们无需传递参数，因为调用此方法时，它就是被删除的最后一个元素。

let milleniumFalconShip = ["Hans", "Luke", "Leia", "Chewbacca"];

// Removes "Chewbacca"
milleniumFalconShip.pop();

console.log(milleniumFalconShip);  // 'Hans', 'Luke', 'Leia'

与方法相同push()，从性能角度考虑，此方法也很快。

从数组开头删除元素

该shift()方法从数组开头删除一个元素。

let milleniumFalconShip = ["Hans", "Luke", "Leia", "Chewbacca"];

// Removes "Hans"
milleniumFalconShip.shift();

console.log(milleniumFalconShip); // 'Luke', 'Leia', 'Chewbacca'