理解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 中其他数据类型的信息。