JavaScript - 数组

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

语法

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

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

参数

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

返回值

它返回一个数组对象。

注意 − 当您向 Array() 构造函数传递单个数字参数时，它将定义一个长度为参数的数组，其中包含未定义的值。数组允许的最大长度为 4,294,967,295。

您可以将多个用逗号分隔的元素放在方括号内，使用数组字面量创建数组：

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

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

fruits[0] is the first element
fruits[1] is the second element
fruits[2] is the third element

JavaScript 数组参考

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

JavaScript 数组属性

以下是 Array 对象的属性列表及其描述：

序号	名称和描述
1	constructor 返回对创建该对象的数组函数的引用。
2	length 反映数组中元素的数量。

序号

名称和描述

constructor

返回对创建该对象的数组函数的引用。

length

反映数组中元素的数量。

JavaScript 数组方法

以下是 Array 对象的方法列表及其描述：

数组静态方法

这些方法使用 Array 类本身调用：

序号	名称和描述
1	from() 创建数组的浅拷贝。
2	isArray() 根据参数是否为数组返回布尔值。
3	of() 从多个参数创建数组。

序号

名称和描述

from()

创建数组的浅拷贝。

isArray()

根据参数是否为数组返回布尔值。

of()

从多个参数创建数组。

数组实例方法

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

序号	名称和描述
1	at() 获取特定索引处的元素。
2	concat() 返回一个新数组，该数组由该数组与另一个数组和/或值连接而成。
3	copyWithin() 将数组的一部分复制到数组中的不同位置。
4	entries() 获取数组的每个条目。
5	every() 如果该数组中的每个元素都满足提供的测试函数，则返回 true。
6	fill() 用静态值填充数组。
7	filter() 创建一个新数组，其中包含该数组的所有元素，对于这些元素，提供的过滤函数返回 true。
8	find() 查找满足条件的元素。
9	findIndex() 查找满足条件的元素的索引。
10	findLast() 从最后查找满足条件的元素。
11	findLastIndex() 从最后查找满足条件的元素的索引。
12	flat() 扁平化数组。
13	flatMap() 在扁平化数组后获取一个新数组。
14	forEach() 为数组中的每个元素调用一个函数。
15	Includes() 如果数组包含特定元素，则返回布尔值。
16	indexOf() 返回数组中等于指定值的第一个（最小）元素的索引，如果未找到则返回 -1。
17	join() 将数组的所有元素连接成一个字符串。
18	keys() 返回一个数组迭代器，其中包含每个数组元素的键。
19	lastIndexOf() 返回数组中等于指定值的最后一个（最大）元素的索引，如果未找到则返回 -1。
20	map() 创建一个新数组，其中包含对该数组中每个元素调用提供的函数的结果。
21	pop() 从数组中删除最后一个元素并返回该元素。
22	push() 将一个或多个元素添加到数组的末尾，并返回数组的新长度。
23	reduce() 对数组的两个值（从左到右）同时应用一个函数，以将其减少为单个值。
24	reduceRight() 对数组的两个值（从右到左）同时应用一个函数，以将其减少为单个值。
25	reverse() 反转数组元素的顺序——第一个元素变成最后一个，最后一个元素变成第一个。
26	shift() 移除数组中的第一个元素并返回该元素。
27	slice() 提取数组的一部分并返回一个新数组。
28	some() 如果此数组中至少有一个元素满足提供的测试函数，则返回 true。
29	toSorted() 按特定顺序对数组的元素进行排序。
30	sort() 对数组的元素进行排序。
31	splice() 添加和/或从数组中移除元素。
32	toLocaleString() 将数组元素转换为字符串。
33	toReversed() 返回数组的反转。
34	toSpliced() 此方法返回一个新数组，其中某些元素已在给定索引处移除和/或替换。
35	toString() 返回表示数组及其元素的字符串。
36	unshift() 将一个或多个元素添加到数组的开头，并返回数组的新长度。
37	values() 获取一个包含每个数组索引值的迭代器。
38	with() 此方法返回一个新数组，其中给定索引处的元素被替换为给定值。

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 = 
      "Array length is : " + nums.length;
   </script>
</body>
</html>

输出

Array length is : 5

向数组添加新元素

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

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

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

示例

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

<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 += "Updated array is : " + nums + "<br>";
      nums[nums.length] = 7; // Inserting 7
      output.innerHTML += "Updated array is : " + nums + "<br>"
   </script>
</body>
</html>

输出

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

Updated array is : 1,2,3,4,5,6
Updated array is : 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 = 
      "Updated array is : " + nums;
   </script>
</body>
</html>

输出

Updated array is : 100,2,3,4,5

遍历 JavaScript 数组

您可以使用循环遍历每个数组元素。但是，存在一些内置方法来遍历数组，我们将在后面的章节中看到。

for (let p = 0; p < nums.length; p++) {
   // Access array using the 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

打印页面