深入了解 JavaScript 数组

简介

JavaScript中的数组是一种用于存储数据的全局对象。数组由包含0个或多个数据类型的有序集合或列表组成，并使用从0开始的编号索引以访问特定项目。

数组非常有用，因为它们将多个值存储在一个变量中，从而压缩和组织代码，使其更具可读性和可维护性。数组可以包含任何数据类型，包括数字、字符串和对象。

为了演示数组，我们将五大洋分配给5个变量。

// 将5大洋的名称分别赋给5个变量
const ocean1 = "Pacific";
const ocean2 = "Atlantic";
const ocean3 = "Indian";
const ocean4 = "Arctic";
const ocean5 = "Antarctic";

这样做不但方法冗长，而且很容易变得难以维护和跟踪。

使用数组就可以简化数据。

// 用一个数组来表示5大洋
let oceans = [
 "Pacific",
 "Atlantic",
 "Indian",
 "Arctic",
 "Antarctic",
];

现在我们不是创建五个单独的变量，而是有了一个包含所有五个元素的变量。我们使用方括号[]来创建数组。

要访问特定项目，将其索引附加到变量即可。

// 打印数组中的第一个元素值
oceans[0];

//Output
Pacific

本教程将介绍如何创建数组；如何索引；如何添加、修改、删除或访问数组中的项目；以及如何遍历数组。

创建数组

在JavaScript中创建数组有两种方法：

• 使用方括号的数组字面量。
• 使用new关键字的数组构造函数。

先演示如何通过数组字面量来创建鲨鱼物种的数组，使用[]初始化。

// 使用数组字面量初始化鲨鱼物种数组
[label sharks.js]
let sharks = [
 "Hammerhead",
 "Great White",
 "Tiger",
];

下面是通过数组构造函数创建的相同数据，使用new Array()进行初始化。

// 使用数组构造函数创建鲨鱼物种数组
let sharks = new Array(
 "Hammerhead",
 "Great White",
 "Tiger",
);

两种方法都可以创建数组。但是，数组字面量方法更为常见和更普遍，因为new Array()构造函数方法可能会出现不一致和意外结果。但是了解数组构造函数还是有用的，万一你遇到了呢。

打印整个数组，显示结果与输入相同。

// 打印整个数组
sharks;

//Output
[ 'Hammerhead', 'Great White', 'Tiger' ]

数组常用于组合相似的数据类型，但从技术上讲，数组可以包含任何值或混合类型的值，包括其他数组。

// 创建一个混合类型的数组
let mixedData = [
 "String",
 null,
 7,
 [
  "another",
  "array",
 ],
];

创建数组后就可以通过多种方式进行操作，但首先我们需要了解数组是如何索引的。

注意：你可能会注意到数组的最后一项或带有或不带最后的逗号。这称为尾随逗号。常被省略，但最好还是包含在代码中，因为可以使得版本控制的差异更加清晰，且可以更轻松地添加和删除项目而不会出错。请注意，JSON文件中不允许使用尾随逗号。

索引数组

如果你了解JavaScript中的索引和字符串操作，那么你可能已经熟悉索引数组的概念，因为字符串类似于数组。

数组没有名称/值对。它们使用从0开始的整数值进行索引。下面是一个分配给seaCreatures的示例数组。

let seaCreatures = [
 "octopus",
 "squid",
 "shark",
 "seahorse",
 "starfish",
];

以下显示如何索引seaCreatures数组中的每个项目。

octopus	squid	shark	seahorse	starfish
0	1	2	3	4

数组中的第一项是octopus，用0索引。最后一项是starfish，用4索引。索引从0开始计数，违背了我们从1开始计数的自然直觉，因此必须特别注意这一点。

我们可以通过length属性知道数组有多少项。

seaCreatures.length;

//Output
5

虽然seaCreatures的索引由0到4组成，但length属性将输出数组项目的实际数量。

如果我们想找出数组中特定项，例如seahorse的索引号，可以使用indexOf()方法。

seaCreatures.indexOf("seahorse");

//Output
3

如果未找到索引号，例如对于不存在的值，控制台将返回-1。

seaCreatures.indexOf("cuttlefish");

//Output
-1

通过与数组中的项目相对应的索引号，我们能够离散地访问每个项目并使用这些项目。

访问数组中的项目

通过引用方括号中项目的索引号，我们可以访问JavaScript数组中的项目。

seaCreatures[1];

//Output
squid

我们知道0将始终输出数组中的第一项。通过对length属性执行操作并应用为新的索引号来查找数组的最后一项。

const lastIndex = seaCreatures.length - 1;

seaCreatures[lastIndex];

//Output
starfish

尝试访问不存在的项目则返回undefined。

seaCreatures[10];

//Output
undefined

要访问嵌套数组中的项目，需要再添加一个索引号以对应内部数组。

let nestedArray = [
 [
  "salmon",
  "halibut",
 ],
 [
  "coral",
  "reef",
 ]
];

nestedArray[1][0];

//Output
coral

在上面的示例中，我们访问了nestedArray变量位置1的数组，然后访问了内部数组中位置0的项目。

将项目添加到数组中

seaCreatures变量有五个项目，由从0到4的索引组成。如果我们想向数组中添加新的项目，可以为后续的索引分配一个值。

seaCreatures[5] = "whale";

seaCreatures;

//Output
[ 'octopus',
 'squid',
 'shark',
 'seahorse',
 'starfish',
 'whale' ]

如果我们添加的项目不小心跳过了一个索引，那么同时会在数组中创建一个未定义的项目。

seaCreatures[7] = "pufferfish";

seaCreatures;

Output
[ 'octopus',
 'squid',
 'shark',
 'seahorse',
 'starfish',
 'whale',
 ,
 'pufferfish' ]

访问这个额外的数组项目将返回undefined。

seaCreatures[6]

//Output
undefined

使用push()方法可以避免此类问题，因为这个方法会将项目添加到数组的末尾。

// Append lobster to the end of the seaCreatures array
seaCreatures.push("lobster");

seaCreatures;

//Output
[ 'octopus',
 'squid',
 'shark',
 'seahorse',
 'starfish',
 ,
 'whale',
 'pufferfish',
 'lobster' ]

与此相反，unshift()方法会将项目添加到数组的开头。

// Append dragonfish to the beginning of the seaCreatures array
seaCreatures.unshift("dragonfish");

seaCreatures;

//Output
[ 'dragonfish',
 'octopus',
 'squid',
 'shark',
 'seahorse',
 'starfish',
 'whale',
 ,
 'pufferfish',
 'lobster' ]

删除数组中的项目

当我们想从数组中删除特定项时，可以使用splice()方法。在seaCreatures数组中，因为我们之前不小心创建了一个未定义的数组项，所以现在我们要删除它。

seaCreatures.splice(7, 1);

seaCreatures;

//Output
[ 'dragonfish',
 'octopus',
 'squid',
 'shark',
 'seahorse',
 'starfish',
 'whale',
 'pufferfish',
 'lobster' ]

在splice()方法中，第一个参数代表要删除的索引号（在本例中为7），第二个参数是删除的项目数量。输入1，表示只删除一项。

splice()方法将更改原始变量。如果你希望原始变量保持不变，可以使用slice()并将结果分配给新的变量。上面的例子分配了两个变量，第一个变量使用slice()存储从第一个元素到whale的seaCreatures数组，第二个变量用于存储元素pufferfish和lobster。要连接这两个数组，我们使用concat()方法返回新数组。

let firstArray = seaCreatures.slice(0, 7);
let secondArray = seaCreatures.slice(8, 10); 

firstArray.concat(secondArray);

//Output
[ 'dragonfish',
 'octopus',
 'squid',
 'shark',
 'seahorse',
 'starfish',
 'whale',
 'pufferfish',
 'lobster' ]

注意，当调用seaCreatures变量时，数组中的项目保持不变。

seaCreatures;

//Output
[ 'dragonfish',
 'octopus',
 'squid',
 'shark',
 'seahorse',
 'starfish',
 'whale',
 ,
 'pufferfish',
 'lobster' ]

pop()方法将删除数组中的最后一项。

// 移除数组seaCreatures中的最后一个元素
seaCreatures.pop();

seaCreatures;

Output
[ 'dragonfish',
 'octopus',
 'squid',
 'shark',
 'seahorse',
 'starfish',
 'whale',
 'pufferfish' ]

lobster作为数组的最后一项已被删除。删除数组的第一项使用shift()方法。

// 移除数组seaCreatures中的第一个元素
seaCreatures.shift();

seaCreatures;

//Output
[ 'octopus',
 'squid',
 'shark',
 'seahorse',
 'starfish',
 'whale',
 'pufferfish' ]

通过pop()和shift()，我们可以从数组的开头和结尾删除项目。尽可能首选pop()，以便数组中的其余项目可以保留其原始索引号。

修改数组中的项目

我们可以通过赋值运算符分配新值来覆盖数组中的任何值，就像使用常规变量一样。

// 将值“manatee”赋给数组seaCreatures的第一个元素
seaCreatures[0] = "manatee";

seaCreatures;

//Output
[ 'manatee',
 'squid',
 'shark',
 'seahorse',
 'starfish',
 'whale',
 'pufferfish' ]

修改值的另一种方法是使用带有新参数的splice()方法。如果我们想更改seahorse的值，即索引3的项目，可以删除它并在这个位置添加一个新项目。

// Replace seahorse with sea lion using splice method
seaCreatures.splice(3, 1, "sea lion");

seaCreatures();

//Output
[ 'manatee',
 'squid',
 'shark',
 'sea lion',
 'starfish',
 'whale',
 'pufferfish' ]

在上面的示例中，我们从数组中删除了seahorse，并引入了一个新值到索引3。

循环遍历数组

我们可以使用for关键字，利用length属性循环遍历整个数组。在下面的例子中，我们创建了一个shellfish数组，并将每个索引号和每个值打印到控制台。

// Create an array of shellfish species
let shellfish = [
 "oyster",
 "shrimp",
 "clam",
 "mussel",
];

// Loop through the length of the array
for (let i = 0; i < shellfish.length; i++) {
  console.log(i, shellfish[i]);
}

//Output
0 'oyster'
1 'shrimp'
2 'clam'
3 'mussel'

我们还可以使用for...of循环，这是JavaScript的一个新特性。

// Create an array of aquatic mammals
let mammals = [
 "dolphin",
 "whale",
 "manatee",
];

// Loop through each mammal
for (let mammal of mammals) {
 console.log(mammal);
}

//Output
dolphin
whale
manatee

for...of循环不会检索数组中元素的索引号，但这是一种遍历数组更简洁的方式。

循环遍历非常适用于打印数组的所有值，比如可以在网站上显示数据库中的指定数据集合。

总结

数组是JavaScript编程中极为通用和基础的部分。在本教程中，我们学习了如何创建数组、如何索引以及如何处理数组的一些最常见任务，例如创建、删除和修改项目。我们还学习了两种循环遍历数组的方法，这是显示数据的常用方法。

感谢大家的阅读。