了解JavaScript中的数组

介绍

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

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

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

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

这种方法非常冗长，可能很难维持和跟踪。

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

// 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
let sharks = [
    "Hammerhead",
    "Great White",
    "Tiger",
];

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

// 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的示例数组。

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

以下是对seaCreatures数组中每个项目进行索引的seaCreatures 。

数组中的第一个项目是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()并将结果分配给一个新变量。

let newArray = slice(7, 1);

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的更新功能。

// 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中编程非常多才多艺的基础。 在本教程中，我们学习了如何创建数组，数组如何编入索引以及在数组中工作的一些最常见的任务，例如创建，删除和修改项目。 我们还学习了通过数组循环的两种方法，它们被用作显示数据的常用方法。

您可以阅读我们的教程“ 了解JavaScript中的数据类型 ”， 了解有关JavaScript中其他数据类型的更多信息。