Javascript 简明教程

JavaScript - Array

JavaScript Array 对象让你可以将多个值存储在一个变量中。数组用于存储同种类型或不同类型多个元素的顺序集合。在 JavaScript 中，数组是动态的，因此你无需在定义数组时指定数组长度。创建 JavaScript 数组后，数组的大小可能会减小或增加。

Syntax

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

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

Parameters

val1, val2, val3, …, valN − 它将多个值作为参数来初始化并创建数组。

Return value

它返回一个数组对象。

Note − 当你将单个数字参数传递给 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 Array Reference

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

JavaScript Array Properties

以下是 Array 对象的属性及其描述 −

Sr.No.

Name & Description

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

length 反映了数组中的元素个数。

JavaScript Array Methods

以下是 Array 对象的方法及其描述 −

这些方法是使用 Array 类本身调用的 −

Sr.No.

Name & Description

from() 创建一个该数组的浅拷贝。

isArray() 根据该参数是否为一个数组返回布尔值。

Of() 用多个参数创建一个数组。

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

Sr.No.	Name & Description
1	at() 获取特定索引处的元素。
2	concat() 返回一个由该数组连接另一个数组 (s) 和/或值 (s) 组成的新数组。
3	copyWithin() 将数组部分复制到同一数组的不同位置。
4	entries() 获取数组中的每个条目。
5	every() 如果该数组中的每个元素都满足提供的测试函数，则返回 true。
6	fill() 使用静态值填充数组。
7	filter() 创建一个新数组，其中包含该数组中所有对提供的过滤函数返回 true 的元素。
8	find() 查找满足条件的元素。
9	findIndex() 查找满足条件的元素的索引。
10	findLast() 从最后查找满足条件的元素。
11	findLastIndex() 从最后查找满足条件的元素的索引。
12	flat() To flatten the array.
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() 如果该数组中至少一个元素满足提供的测试函数，则返回真。
29	toSorted() 按照特定顺序对数组元素进行排序。
30	sort() 对数组元素进行排序。
31	splice() 在数组中添加和/或移除元素。
32	toLocaleString() 将数组元素转换为字符串。
33	toReversed() 返回数组的逆。
34	toSpliced() 此方法使用提供给它的函数，返回新数组，其中一些元素在给定索引处被移除和/或替换。
35	toString() 返回一个表示数组及其元素的字符串。
36	unshift() 在数组前增加一个或多个元素，并返回数组的新长度。
37	values() 获取一个包含每个数组索引值的迭代器。
38	with() 该方法返回一个新数组，其中给定索引处的元素被给定值替换。

Basic Examples of JavaScript Array Object

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

Example (Creating JavaScript Array Object)

在下面的示例中，数组 “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 ==> ,,,,,,,,,,,,,,,,,,,

Example (Creating Arrays Using Array Literal)

在下面的示例中，我们创建了不同的数组。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

Accessing JavaScript Array Elements

数组索引从 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 Array length

数组的 “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

Adding a new element to the array

您可以使用 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

Updating JavaScript Array Elements

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

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

Traversing a JavaScript Array

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

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