JavaScript - 数组

JavaScript Array 数组 对象允许您在单个变量中存储多个值。数组用于存储相同或不同数据类型的多个元素的顺序集合。在 JavaScript 中，数组是动态的，因此您无需在定义数组时指定其长度。 JavaScript 数组的大小在创建后可能会减小或增大。

语法

使用以下语法在 JavaScript 中创建数组对象 -

const arr = new Array(val1, val2, val3, ..., valN)

参数

• val1, val2, val3, ..., valN - 它接受多个值作为参数，并用它们初始化数组。

返回值

返回一个数组对象。

注意 - 当您将单个数字参数传递给 Array() 构造函数时，它会定义一个包含未定义值的、参数长度相同的数组。数组的最大长度为 4,294,967,295。

您可以使用数组字面量在方括号内添加多个逗号分隔的元素来创建数组 -

const fruit = [ "apple", "orange", "mango" ];

您将使用序数来访问和设置数组中的值，如下所示。

fruits[0] 是第一个元素
fruits[1] 是第二个元素
fruits[2] 是第三个元素

JavaScript 数组参考

在 JavaScript 中，Array 对象允许使用单个变量名存储多个元素的集合。它提供了各种方法和属性来对数组执行操作。这里，我们列出了 Array 类的属性和方法。

JavaScript 数组属性

这里列出了 Array 对象的属性及其说明 -

JavaScript 数组方法

以下是 Array 对象的方法列表及其说明 -

数组静态方法

这些方法由 Array 类本身调用 -

数组实例方法

这些方法使用 Array 类的实例调用 -

JavaScript 数组对象的基本示例

在以下示例中，我们演示了 JavaScript 数组对象的基本方法和属性的用法 -

示例(创建 JavaScript 数组对象)

在下面的示例中，数组 strs 使用作为 Array() 构造函数参数传递的字符串值进行初始化。

cars 数组包含 20 个未定义元素。如果传递多个数值，它将定义包含这些元素的数组，但需要注意将单个数值参数传递给 array() 构造函数。

<html>
<head>
   <title> JavaScript - Array() constructor </title>
</head>
<body>
   <p id = "demo"> </p>
   <script>
      const output = document.getElementById("demo");

      let strs = new Array("Hello", "World!", "Tutorials Point");
      output.innerHTML += "strs ==> " + strs + "<br>";

      let cars = new Array(20);
      output.innerHTML += "cars ==> " + cars + "<br>";
   </script>
</body>
</html>

输出

执行上述程序以查看所需的输出。

strs ==> Hello,World!,Tutorials Point
cars ==> ,,,,,,,,,,,,,,,,,,,

示例(使用数组字面量创建数组)

在下面的示例中，我们创建了不同的数组。arr1 数组包含数字，arr2 数组包含字符串，arr3 数组包含布尔值。

<html>
<head>
   <title> JavaScript - Array literals </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");

      const arr1 = [10, 40, 50, 60, 80, 90];  // Array of numbers
      const arr2 = ["Hello", "Hi", "How", "are", "you?"]; // Array of strings
      const arr3 = [true, false, true, true]; // Array of booleans

      output.innerHTML += "arr1 ==>  " + arr1 + "<br>";
      output.innerHTML += "arr2 ==>  " + arr2 + "<br>";
      output.innerHTML += "arr3 ==>  " + arr3 + "<br>";
   </script>
</body>
</html>

输出

执行上述程序，查看所需输出。

arr1 ==> 10,40,50,60,80,90
arr2 ==> Hello,Hi,How,are,you?
arr3 ==> true,false,true,true

访问 JavaScript 数组元素

数组索引从 0 开始。因此，您可以使用索引访问数组元素。

let number = arr[index]

在上述语法中，arr 是一个数组，index 是一个数字，我们需要从该数字位置访问数组元素。

示例

在下面的示例中，我们创建了一个数字数组，并从数组的第 0 个和第 2 个索引处访问元素。第 0 个索引处的元素为 1，第 2 个索引处的元素为 6。

<html>
<head>
   <title> JavaScript - Accessing array elements </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const nums = [1, 5, 6, 8, 90];
      document.getElementById("output").innerHTML =
      "Element at 0th index is : " + nums[0] + "<br>" +
      "Element at 2nd index is : " + nums[2];
   </script>
</body>
</html>

输出

Element at 0th index is : 1
Element at 2nd index is : 6

JavaScript 数组长度

数组的 length 属性用于获取数组的长度。

let len = arr.length;

示例

在下面的示例中，length 属性返回 5，因为数组包含 5 个元素。

<html>
<head>
   <title> JavaScript - Array length </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const nums = [1, 5, 6, 8, 90];
      document.getElementById("output").innerHTML = 
      "数组长度为 : " + nums.length;
   </script>
</body>
</html>

输出

数组长度为:5

向数组添加新元素

您可以使用 push() 方法将元素插入到数组末尾。另一种解决方案是将数组插入到等于数组长度的索引处。

arr.push(ele)
或
arr[arr.length] = ele;

在上述语法中，ele 是要插入到数组中的新元素。此处，如果数组长度为 N，则数组包含从 0 到 N1 索引的元素。因此，我们可以将新元素插入到第 N 个索引处。

示例

在下面的示例中，我们使用 push() 方法将 6 插入到数组中。此外，我们使用了长度属性将元素插入到末尾。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      const nums = [1, 2, 3, 4, 5];
      nums.push(6); // Inserting 6 at the end
      output.innerHTML += "更新后的数组为: " + nums + "<br>";
      nums[nums.length] = 7; // Inserting 7
      output.innerHTML += "更新后的数组为: " + nums + "<br>"
   </script>
</body>
</html>

输出

正如我们在输出中看到的，提供的元素已添加。

更新后的数组为:1,2,3,4,5,6
更新后的数组为:1,2,3,4,5,6,7

更新 JavaScript 数组元素

要更新任何数组元素，您可以访问数组索引并更改其值。

arr[index] = ele;

在上述语法中，index 是一个索引，我们需要使用 ele 值来更新某个值。

示例

在下面的示例中，我们更新数组中第一个索引处的元素。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const nums = [1, 2, 3, 4, 5];
      nums[0] = 100; // Updating first element
      document.getElementById("output").innerHTML = 
      "更新后的数组为: " + nums;
   </script>
</body>
</html>

输出

更新后的数组为: 100,2,3,4,5

遍历 JavaScript 数组

您可以使用循环遍历每个数组元素。但是，也有一些内置方法可以遍历数组，我们将在后续章节中介绍。

for (let p = 0; p < nums.length; p++) {
    // 使用 nums[p] 访问数组
}

示例

在下面的代码中，数组包含 5 个数字。我们使用 for 循环遍历数组并打印每个元素。

但是，while 循环和 do-while 循环也可以用来遍历数组。

<html>
<body>
   <p id = "demo"> </p>
   <script>
      const output = document.getElementById("demo");
      const nums = [1, 2, 3, 4, 5];
      for (let p = 0; p < nums.length; p++) {
         output.innerHTML += "nums[" + p + "] ==> " + nums[p] + "<br>";
      }
   </script>
</body>
</html>

输出

nums[0] ==> 1
nums[1] ==> 2
nums[2] ==> 3
nums[3] ==> 4
nums[4] ==> 5