分类
文章

理解javascript中的数组

介绍

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

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

为了说明数组如何有用,请考虑将世界的五大洋分配给自己的变量。

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

此方法非常冗长,并且可能很快变得难以维护和跟踪。

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

oceans.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关键字。

让我们演示如何使用数组文字(由[]初始化)创建鲨鱼物种的数组。

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

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

sharks.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",
    ],
];

创建数组之后,我们可以通过多种方式对其进行操作,但是首先我们必须了解如何对数组建立索引。

Note:您可能会看到数组中的最后一项,带有或不带有最后一个逗号。这称为尾随逗号 。通常会忽略它们,但是通常最好将它们包含在您的代码中,因为这会使版本控制的差异更加清晰,并使添加和删除项目更容易而不会出错。请注意, JSON文件中不允许尾随逗号。

索引数组

如果您已经了解了JavaScript中的索引和操作字符串的知识 ,您可能已经熟悉索引数组的概念,因为字符串类似于数组。

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

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

这是seaCreatures数组中每个项目的索引方式的seaCreatures

octopus squid shark seahorse starfish
0 1 2 3 4

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

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

seaCreatures.length;
Output5

尽管seaCreatures的索引由04 ,但是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处的nestedArray ,然后访问了内部数组中位置0处的项。

将项目添加到数组

在我们的seaCreatures变量中,我们有五个项目,其中包括从04的索引。如果要向数组添加新项,可以为下一个索引分配一个值。

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

遍历数组

我们可以使用length关键字,使用for关键字遍历整个数组。在此示例中,我们可以创建一个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'

我们还可以使用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);
}
Outputdolphin
whale
manatee

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

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

结论

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注