理解JavaScript中的数组

介绍

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

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

为了演示数组如何有用，请考虑将世界的五个海洋分配给它们自己的变量。

海洋.js

// Assign the five oceans to five variables
const ocean1 = "Pacific";
const ocean2 = "Atlantic";
const ocean3 = "Indian";
const ocean4 = "Arctic";
const ocean5 = "Antarctic";

这种方法非常冗长，并且很快就会变得难以维护和跟踪。

使用数组，我们可以简化我们的数据。

海洋.js

// Assign the five oceans
let oceans = [
    "Pacific",
    "Atlantic",
    "Indian",
    "Arctic",
    "Antarctic",
];

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

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

// Print out the first item of the oceans array
oceans[0];

OutputPacific

在本教程中，我们将学习如何创建数组； 它们是如何编入索引的； 如何添加、修改、删除或访问数组中的项目； 以及如何遍历数组。

创建一个数组

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

• 数组文字，它使用方括号。
• 数组构造函数，它使用 new 关键字。

让我们演示如何使用数组字面量创建一个鲨鱼物种数组，该数组字面量由 [] 初始化。

// Initialize array of shark species with array literal
[label sharks.js]
let sharks = [
    "Hammerhead",
    "Great White",
    "Tiger",
];

现在这里是用数组构造函数创建的相同数据，它用 new Array() 初始化。

鲨鱼.js

// Initialize array of shark species with array constructor
let sharks = new Array(
    "Hammerhead",
    "Great White",
    "Tiger",
);

两种方法都将创建一个数组。 但是，数组字面量（方括号）方法更为常见和首选，因为 new Array() 构造函数方法可能存在不一致和意外结果。 了解数组构造函数很有用，以防万一您遇到它。

我们可以打印出整个数组，它的显示与我们的输入相同。

// Print out the entire sharks array
sharks;

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

数组通常用于将相似数据类型的列表组合在一起，但从技术上讲，它们可以包含任何值或值的混合，包括其他数组。

// Initialize array of mixed datatypes
let mixedData = [
    "String",
    null,
    7,
    [
        "another",
        "array",
    ],
];

创建数组后，我们可以通过多种方式操作它们，但首先我们必须了解数组是如何索引的。

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

索引数组

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

数组没有名称/值对。 相反，它们使用以 0 开头的整数值进行索引。 这是一个示例数组，分配给 seaCreatures。

海洋生物.js

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

以下是 seaCreatures 数组中的每个项目如何被索引的细分。

章鱼	乌贼	鲨鱼	海马	海星
0	1	2	3	4

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

我们可以使用 length 属性找出数组中有多少项。

seaCreatures.length;

Output5

虽然 seaCreatures 的索引由 0 到 4 组成，但 length 属性将输出数组中的实际项数，从 1 开始。

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

seaCreatures.indexOf("seahorse");

Output3

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

seaCreatures.indexOf("cuttlefish");

Output-1

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

访问数组中的项目

通过引用方括号中项目的索引号来访问 JavaScript 数组中的项目。

seaCreatures[1];

Outputsquid

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

const lastIndex = seaCreatures.length - 1;

seaCreatures[lastIndex];

Outputstarfish

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

seaCreatures[10];

Outputundefined

为了访问嵌套数组中的项目，您将添加另一个索引号以对应于内部数组。

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

nestedArray[1][0];

Outputcoral

在上面的示例中，我们访问了 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]

Outputundefined

使用 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' ]

在 push() 和 unshift() 之间，您将能够将项目附加到数组的开头和结尾。

从数组中删除一个项目

当我们想从数组中删除特定项时，我们使用 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 数组，第二个变量用于存储元素 [ X176X] 和 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() 方法将删除数组中的最后一项。

// Remove the last item from the seaCreatures array
seaCreatures.pop();

seaCreatures;

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

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

// Remove the first item from the seaCreatures array
seaCreatures.shift();

seaCreatures;

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

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

修改数组中的项

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

// Assign manatee to the first item in the seaCreatures array
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]);
}

Output0 'oyster'
1 'shrimp'
2 'clam'
3 'mussel'

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

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

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

Outputdolphin
whale
manatee

for...of 循环不检索数组中元素的索引号，但它通常是一种更简单、更简洁的遍历数组的方法。

使用循环对于打印出数组的整个值非常有用，例如在网站上显示数据库中的项目时。

结论

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

您可以通过阅读我们的教程“Understanding Data Types in JavaScript”了解更多关于 JavaScript 中其他数据类型的信息。