介绍
JavaScript 中的 array 是用于存储数据的全球对象类型. 数组由包含零或更多数据类型的排序集或列表组成,并使用从 `0 开始的编号索引访问特定项目。
数组非常有用,因为它们在单个变量中存储多个值,可以凝聚和组织我们的代码,使其更易于阅读和维护。
要展示数组如何有用,请考虑将世界的五大洋分配给自己的变量。
1[label oceans.js]
2// Assign the five oceans to five variables
3const ocean1 = "Pacific";
4const ocean2 = "Atlantic";
5const ocean3 = "Indian";
6const ocean4 = "Arctic";
7const ocean5 = "Antarctic";
这种方法非常语,并且可以很快变得难以维护和跟踪。
通过使用数组,我们可以简化我们的数据。
1[label oceans.js]
2// Assign the five oceans
3let oceans = [
4 "Pacific",
5 "Atlantic",
6 "Indian",
7 "Arctic",
8 "Antarctic",
9];
而不是创建五个单独的变量,我们现在有一个变量,其中包含所有五个元素。
若要访问特定项目,请将其索引附加到变量中。
1// Print out the first item of the oceans array
2oceans[0];
1[secondary_label Output]
2Pacific
在本教程中,我们将学习如何创建数组;它们是如何索引的;如何在数组中添加,修改,删除或访问项目;以及如何通过数组循环。
创建一个 Array
在 JavaScript 中创建一个数组有两种方法:
- 字面数组,它使用了方块
- 使用
新关键字的数组构造器
让我们演示如何使用字母数组来创建鲨鱼物种的数组,该数组是用[]初始化的。
1// Initialize array of shark species with array literal
2[label sharks.js]
3let sharks = [
4 "Hammerhead",
5 "Great White",
6 "Tiger",
7];
现在,这里是使用数组构建器创建的相同数据,该数据是用新数组()初始化的。
1[label sharks.js]
2// Initialize array of shark species with array constructor
3let sharks = new Array(
4 "Hammerhead",
5 "Great White",
6 "Tiger",
7);
两种方法都将创建一个数组. 然而,数组字母(方块)方法更常见和更受欢迎,因为新数组()构建方法可能有不一致和意想不到的结果。
我们可以打印一个完整的数组,它将显示与我们的输入相同。
1// Print out the entire sharks array
2sharks;
1[secondary_label Output]
2[ 'Hammerhead', 'Great White', 'Tiger' ]
数组通常用于组合类似数据类型的列表,但它们在技术上可以包含任何值或值组合,包括其他数组。
1// Initialize array of mixed datatypes
2let mixedData = [
3 "String",
4 null,
5 7,
6 [
7 "another",
8 "array",
9 ],
10];
创建一个数组后,我们可以以多种方式操纵它们,但首先我们必须了解数组是如何索引的。
<$>[note] **注:**您可能会看到一个数组中的最后一个项目,有或没有最后一个字节。这被称为 trailing comma。通常会看到它们被忽略,但通常会更喜欢将它们包含在您的代码中,因为这使得版本控制更清晰,并且更容易在没有错误的情况下添加和删除项目。
指数列表
如果您已经了解了 JavaScript 中的 索引和操纵字符串,您可能已经熟悉索引数组的概念,因为一个字符串类似于一个数组。
数组没有名称/值对,相反,它们被索引为从0开始的整数值。
1[label seacreatures.js]
2let seaCreatures = [
3 "octopus",
4 "squid",
5 "shark",
6 "seahorse",
7 "starfish",
8];
以下是如何在海洋生物阵列中的每个项目的索引。
| octopus | squid | shark | seahorse | starfish |
|---|---|---|---|---|
| 0 | 1 | 2 | 3 | 4 |
数组中的第一个元素是octopus,该元素被索引为0。最后一个元素是starfish,该元素被索引为4。
我们可以找出一个数组中有多少个项目具有长度属性。
1seaCreatures.length;
1[secondary_label Output]
25
虽然海生物的索引由0到4组成,但长度属性将输出数组中的实际数量,从1开始。
如果我们想找出一个数组中的特定项目的索引号码,例如‘seahorse’,我们可以使用‘indexOf()’方法。
1seaCreatures.indexOf("seahorse");
1[secondary_label Output]
23
如果找不到索引号,例如对于不存在的值,控制台将返回-1。
1seaCreatures.indexOf("cuttlefish");
1[secondary_label Output]
2-1
使用对应于数组中的项目的索引号码,我们可以密切访问每个项目,以便与这些项目一起工作。
在一个 Array 中访问项目
JavaScript 数组中的一个项目是通过引用该项目的索引号码来访问的。
1seaCreatures[1];
1[secondary_label Output]
2squid
我们知道0将总是输出数组中的第一个项目,我们也可以通过在长度属性上执行操作来找到数组中的最后一个项目,并将其应用为新索引号。
1const lastIndex = seaCreatures.length - 1;
2
3seaCreatures[lastIndex];
1[secondary_label Output]
2starfish
尝试访问不存在的项目将返回未定义。
1seaCreatures[10];
1[secondary_label Output]
2undefined
为了访问嵌入式数组中的项目,您将添加另一个索引号码来匹配内部数组。
1let nestedArray = [
2 [
3 "salmon",
4 "halibut",
5 ],
6 [
7 "coral",
8 "reef",
9 ]
10];
11
12nestedArray[1][0];
1[secondary_label Output]
2coral
在上面的示例中,我们访问了nestedArray变量的位置1,然后进入了内部数组中的位置0。
将一个元素添加到一个 Array
在我们的海生物变量中,我们有五个项目,其中包括从0到4的索引。
1seaCreatures[5] = "whale";
2
3seaCreatures;
1[secondary_label Output]
2[ 'octopus',
3 'squid',
4 'shark',
5 'seahorse',
6 'starfish',
7 'whale' ]
如果我们添加一个项目,并意外跳过一个索引,它会在数组中创建一个未定义的项目。
1seaCreatures[7] = "pufferfish";
2
3seaCreatures;
1[secondary_label Output]
2[ 'octopus',
3 'squid',
4 'shark',
5 'seahorse',
6 'starfish',
7 'whale',
8 ,
9 'pufferfish' ]
尝试访问额外的数组项目将返回未定义。
1seaCreatures[6]
1[secondary_label Output]
2undefined
可以通过使用推( )方法来避免此类问题,该方法将一个项目添加到数组的末尾。
1// Append lobster to the end of the seaCreatures array
2seaCreatures.push("lobster");
3
4seaCreatures;
1[secondary_label Output]
2[ 'octopus',
3 'squid',
4 'shark',
5 'seahorse',
6 'starfish',
7 ,
8 'whale',
9 'pufferfish',
10 'lobster' ]
在光谱的另一端,unshift()方法将添加一个项目到一个数组的开始。
1// Append dragonfish to the beginning of the seaCreatures array
2seaCreatures.unshift("dragonfish");
3
4seaCreatures;
1[secondary_label Output]
2[ 'dragonfish',
3 'octopus',
4 'squid',
5 'shark',
6 'seahorse',
7 'starfish',
8 'whale',
9 ,
10 'pufferfish',
11 'lobster' ]
在 push()和unshift()之间,您将能够将项目附加到数组的开始和结束。
从一个 Array 删除一个项目
当我们想从数组中删除特定项目时,我们使用splice()方法. 在seaCreatures数组中,我们之前意外地创建了一个未定义的数组项目,所以让我们现在删除它。
1seaCreatures.splice(7, 1);
2
3seaCreatures;
1[secondary_label Output]
2[ 'dragonfish',
3 'octopus',
4 'squid',
5 'shark',
6 'seahorse',
7 'starfish',
8 'whale',
9 'pufferfish',
10 'lobster' ]
在splice()方法中,第一个参数代表要删除的索引号码(在这种情况下,7)和第二个参数是应该删除多少个项目。
如果您希望原始变量保持不变,请使用 slice() 并将结果分配给一个新的变量. 在这里,我们将分配两个变量,其中一个使用 slice() 来存储海生物群从第一个元素到鲸鱼,另一个用于存储元素pufferfish和lobster。
1let firstArray = seaCreatures.slice(0, 7);
2let secondArray = seaCreatures.slice(8, 10);
3
4firstArray.concat(secondArray);
1[secondary_label Output]
2[ 'dragonfish',
3 'octopus',
4 'squid',
5 'shark',
6 'seahorse',
7 'starfish',
8 'whale',
9 'pufferfish',
10 'lobster' ]
请注意,在调用seaCreatures变量时,数组中的项目保持不变。
1seaCreatures;
1[secondary_label Output]
2[ 'dragonfish',
3 'octopus',
4 'squid',
5 'shark',
6 'seahorse',
7 'starfish',
8 'whale',
9 ,
10 'pufferfish',
11 'lobster' ]
pop()方法会删除数组中的最后一个项目。
1// Remove the last item from the seaCreatures array
2seaCreatures.pop();
3
4seaCreatures;
1[secondary_label Output]
2[ 'dragonfish',
3 'octopus',
4 'squid',
5 'shark',
6 'seahorse',
7 'starfish',
8 'whale',
9 'pufferfish' ]
lobster已被删除为数组的最后一个项目. 为了删除数组的第一个项目,我们将使用shift()方法。
1// Remove the first item from the seaCreatures array
2seaCreatures.shift();
3
4seaCreatures;
1[secondary_label Output]
2[ 'octopus',
3 'squid',
4 'shark',
5 'seahorse',
6 'starfish',
7 'whale',
8 'pufferfish' ]
通过使用pop()和shift(),我们可以从序列的开始和结束中删除项目,最好在可能的情况下使用pop(),因为序列中的其他项目保留了原始索引号码。
在 Arrays 中更改项目
我们可以通过使用分配运算器分配一个新值来重写数组中的任何值,就像我们使用常规变量一样。
1// Assign manatee to the first item in the seaCreatures array
2seaCreatures[0] = "manatee";
3
4seaCreatures;
1[secondary_label Output]
2[ 'manatee',
3 'squid',
4 'shark',
5 'seahorse',
6 'starfish',
7 'whale',
8 'pufferfish' ]
另一种修改值的方法是使用splice()方法使用一个新的参数. 如果我们想要更改seahorse的值,这是指数3中的项目,我们可以删除它并添加一个新的项目。
1// Replace seahorse with sea lion using splice method
2seaCreatures.splice(3, 1, "sea lion");
3
4seaCreatures();
1[secondary_label Output]
2[ 'manatee',
3 'squid',
4 'shark',
5 'sea lion',
6 'starfish',
7 'whale',
8 'pufferfish' ]
在上面的示例中,我们从数组中删除了海豹,并将一个新的值推入索引3。
穿过一个 Array
我们可以用for的关键字环绕整个数组,利用长度属性,在这个例子中,我们可以创建一个shellfish的数组,并将每个索引号和每个值打印到控制台。
1// Create an array of shellfish species
2let shellfish = [
3 "oyster",
4 "shrimp",
5 "clam",
6 "mussel",
7];
8
9// Loop through the length of the array
10for (let i = 0; i < shellfish.length; i++) {
11 console.log(i, shellfish[i]);
12}
1[secondary_label Output]
20 'oyster'
31 'shrimp'
42 'clam'
53 'mussel'
我们还可以使用for...of循环,这是JavaScript的新功能。
1// Create an array of aquatic mammals
2let mammals = [
3 "dolphin",
4 "whale",
5 "manatee",
6];
7
8// Loop through each mammal
9for (let mammal of mammals) {
10 console.log(mammal);
11}
1[secondary_label Output]
2dolphin
3whale
4manatee
for...of循环不会检索数组中的元素的索引数,但它通常是一个更简单、更简洁的方式来循环一个数组。
使用循环对于打印数组的整个值非常有用,例如在网站上显示数据库中的项目时。
结论
在本教程中,我们学会了如何创建一个数组,如何索引数组,以及一些在数组中工作的最常见任务,如创建,删除和修改项目。
您可以通过阅读我们的教程阅读有关 JavaScript 中的其他数据类型的更多信息`理解 JavaScript 中的数据类型。