简介

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

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

  为了演示数组，我们将五大洋分配给5个变量。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">// 将5大洋的名称分别赋给5个变量 const ocean1 = "Pacific"; const ocean2 = "Atlantic"; const ocean3 = "Indian"; const ocean4 = "Arctic"; const ocean5 = "Antarctic"; </pre>

  这样做不但方法冗长，而且很容易变得难以维护和跟踪。

  使用数组就可以简化数据。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">// 用一个数组来表示5大洋 let oceans = [  "Pacific",  "Atlantic",  "Indian",  "Arctic",  "Antarctic", ]; </pre>

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

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

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">// 打印数组中的第一个元素值 oceans[0]; </pre>

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//Output Pacific </pre>

  本教程将介绍如何创建数组；如何索引；如何添加、修改、删除或访问数组中的项目；以及如何遍历数组。

  创建数组

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

  先演示如何通过数组字面量来创建鲨鱼物种的数组，使用[]初始化。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">// 使用数组字面量初始化鲨鱼物种数组 [label sharks.js] let sharks = [  "Hammerhead",  "Great White",  "Tiger", ]; </pre>

  下面是通过数组构造函数创建的相同数据，使用new Array()进行初始化。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">// 使用数组构造函数创建鲨鱼物种数组 let sharks = new Array(  "Hammerhead",  "Great White",  "Tiger", ); </pre>

  两种方法都可以创建数组。但是js 数组添加对象，数组字面量方法更为常见和更普遍，因为new Array()构造函数方法可能会出现不一致和意外结果。但是了解数组构造函数还是有用的，万一你遇到了呢。

  打印整个数组，显示结果与输入相同。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">// 打印整个数组 sharks; </pre>

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//Output [ 'Hammerhead', 'Great White', 'Tiger' ] </pre>

  数组常用于组合相似的数据类型，但从技术上讲，数组可以包含任何值或混合类型的值，包括其他数组。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">// 创建一个混合类型的数组 let mixedData = [  "String",  null,  7,  [   "another",   "array",  ], ]; </pre>

  创建数组后就可以通过多种方式进行操作，但首先我们需要了解数组是如何索引的。

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

  索引数组

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

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

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">let seaCreatures = [  "octopus",  "squid",  "shark",  "seahorse",  "starfish", ]; </pre>

  以下显示如何索引seaCreatures数组中的每个项目。

  octopussquidsharkseahorsestarfish

  0

  1

  2

  3

  4

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

  我们可以通过length属性知道数组有多少项。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">seaCreatures.length; </pre>

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//Output 5 </pre>

  虽然seaCreatures的索引由0到4组成，但length属性将输出数组项目的实际数量。

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

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">seaCreatures.indexOf("seahorse"); </pre>

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//Output 3 </pre>

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

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">seaCreatures.indexOf("cuttlefish"); </pre>

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//Output -1 </pre>

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

  访问数组中的项目

  通过引用方括号中项目的索引号，我们可以访问JavaScript数组中的项目。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">seaCreatures[1]; </pre>

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//Output squid </pre>

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

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">const lastIndex = seaCreatures.length - 1; seaCreatures[lastIndex]; </pre>

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//Output starfish </pre>

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

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">seaCreatures[10]; </pre>

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//Output undefined </pre>

  要访问嵌套数组中的项目，需要再添加一个索引号以对应内部数组。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">let nestedArray = [  [   "salmon",   "halibut",  ],  [   "coral",   "reef",  ] ]; nestedArray[1][0]; </pre>

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//Output coral </pre>

  在上面的示例中，我们访问了nestedArray变量位置1的数组，然后访问了内部数组中位置0的项目。

  将项目添加到数组中

  seaCreatures变量有五个项目，由从0到4的索引组成。如果我们想向数组中添加新的项目，可以为后续的索引分配一个值。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">seaCreatures[5] = "whale"; seaCreatures; </pre>

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//Output [ 'octopus',  'squid',  'shark',  'seahorse',  'starfish',  'whale' ] </pre>

  如果我们添加的项目不小心跳过了一个索引，那么同时会在数组中创建一个未定义的项目。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">seaCreatures[7] = "pufferfish"; seaCreatures; </pre>

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">Output [ 'octopus',  'squid',  'shark',  'seahorse',  'starfish',  'whale',  ,  'pufferfish' ] </pre>

  访问这个额外的数组项目将返回undefined。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">seaCreatures[6] </pre>

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//Output undefined </pre>

  使用push()方法可以避免此类问题，因为这个方法会将项目添加到数组的末尾。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">// Append lobster to the end of the seaCreatures array seaCreatures.push("lobster"); seaCreatures; </pre>

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//Output [ 'octopus',  'squid',  'shark',  'seahorse',  'starfish',  ,  'whale',  'pufferfish',  'lobster' ] </pre>

  与此相反，unshift()方法会将项目添加到数组的开头。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">// Append dragonfish to the beginning of the seaCreatures array seaCreatures.unshift("dragonfish"); seaCreatures; </pre>

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//Output [ 'dragonfish',  'octopus',  'squid',  'shark',  'seahorse',  'starfish',  'whale',  ,  'pufferfish',  'lobster' ] </pre>

  删除数组中的项目

  当我们想从数组中删除特定项时，可以使用splice()方法。在seaCreatures数组中，因为我们之前不小心创建了一个未定义的数组项，所以现在我们要删除它。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">seaCreatures.splice(7, 1); seaCreatures; </pre>

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//Output [ 'dragonfish',  'octopus',  'squid',  'shark',  'seahorse',  'starfish',  'whale',  'pufferfish',  'lobster' ] </pre>

  在splice()方法中，第一个参数代表要删除的索引号（在本例中为7），第二个参数是删除的项目数量。输入1，表示只删除一项。

  splice()方法将更改原始变量。如果你希望原始变量保持不变，可以使用slice()并将结果分配给新的变量。上面的例子分配了两个变量，第一个变量使用slice()存储从第一个元素到whale的seaCreatures数组，第二个变量用于存储元素pufferfish和lobster。要连接这两个数组，我们使用concat()方法返回新数组。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">let firstArray = seaCreatures.slice(0, 7); let secondArray = seaCreatures.slice(8, 10);  firstArray.concat(secondArray); </pre>

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//Output [ 'dragonfish',  'octopus',  'squid',  'shark',  'seahorse',  'starfish',  'whale',  'pufferfish',  'lobster' ] </pre>

  注意，当调用seaCreatures变量时，数组中的项目保持不变。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">seaCreatures; </pre>

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//Output [ 'dragonfish',  'octopus',  'squid',  'shark',  'seahorse',  'starfish',  'whale',  ,  'pufferfish',  'lobster' ] </pre>

  pop()方法将删除数组中的最后一项。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">// 移除数组seaCreatures中的最后一个元素 seaCreatures.pop(); seaCreatures; </pre>

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">Output [ 'dragonfish',  'octopus',  'squid',  'shark',  'seahorse',  'starfish',  'whale',  'pufferfish' ] </pre>

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

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">// 移除数组seaCreatures中的第一个元素 seaCreatures.shift(); seaCreatures; </pre>

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//Output [ 'octopus',  'squid',  'shark',  'seahorse',  'starfish',  'whale',  'pufferfish' ] </pre>

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

  修改数组中的项目

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

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">// 将值“manatee”赋给数组seaCreatures的第一个元素 seaCreatures[0] = "manatee"; seaCreatures; </pre>

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//Output [ 'manatee',  'squid',  'shark',  'seahorse',  'starfish',  'whale',  'pufferfish' ] </pre>

  修改值的另一种方法是使用带有新参数的splice()方法。如果我们想更改seahorse的值，即索引3的项目，可以删除它并在这个位置添加一个新项目。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">// Replace seahorse with sea lion using splice method seaCreatures.splice(3, 1, "sea lion"); seaCreatures(); </pre>

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//Output [ 'manatee',  'squid',  'shark',  'sea lion',  'starfish',  'whale',  'pufferfish' ] </pre>

  在上面的示例中，我们从数组中删除了seahorse，并引入了一个新值到索引3。

  循环遍历数组

  我们可以使用for关键字，利用length属性循环遍历整个数组。在下面的例子中，我们创建了一个shellfish数组，并将每个索引号和每个值打印到控制台。

<p><pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">// Create an array of shellfish species let shellfish = [  "oyster",  "shrimp",  "clam",  "mussel", ]; // Loop through the length of the array for (let i = 0; i