JavaScript - Array 对象

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 对象的属性列表及其描述 -

名称	描述
constructor	返回对创建对象的数组函数的引用。
length	反映数组中的元素数。

JavaScript 数组方法

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

数组静态方法

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

名称	描述
from()	创建数组的浅表副本。
isArray()	根据参数 is an array 返回布尔值。
Of()	从多个参数创建数组。

数组实例方法

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

名称	描述
at()	从特定索引中获取 element。
concat()	返回一个新数组，该数组由此数组与另一个数组和/或值联接而成。
copyWithin()	将数组的一部分复制到不同位置的同一数组中。
entries()	获取数组的每个条目。
every()	如果此数组中的每个元素都满足提供的 testing 函数，则返回 true。
fill()	用静态值填充数组。
filter()	创建一个新数组，其中包含此数组的所有元素，提供的筛选函数为其返回 true。
find()	查找满足条件的元素。
findIndex()	查找满足条件的元素的索引。
findLast()	查找满足最后一个条件的元素。
findLastIndex()	查找满足最后一个条件的元素的索引。
flat()	展平数组。
flatMap()	在展平数组后获取新数组。
forEach()	为数组中的每个元素调用一个函数。
Includes()	如果数组包含特定元素，则返回布尔值。
indexOf()	返回数组中元素的第一个（最小）索引等于指定值，如果未找到，则返回 -1。
join()	将数组的所有元素联接到一个字符串中。
Keys()	返回一个数组迭代器，其中包含每个数组元素的键。
lastIndexOf()	返回数组中元素的最后一个（最大）索引等于指定值，如果未找到，则返回 -1。
map()	创建一个新数组，其中包含在此数组中的每个元素上调用提供的函数的结果。
pop()	从数组中删除最后一个元素并返回该元素。
push()	将一个或多个元素添加到数组的末尾，并返回数组的新长度。
reduce()	同时对数组的两个值（从左到右）应用一个函数，以将其减少为单个值。
reduceRight()	同时对数组的两个值（从右到左）应用一个函数，以将其减少为单个值。
reverse()	反转数组元素的顺序 -- 第一个元素变成最后一个元素，最后一个元素变成第一个元素。
shift()	从数组中删除第一个元素并返回该元素。
slice()	提取数组的一部分并返回新数组。
some()	如果此数组中至少有一个元素满足提供的 testing 函数，则返回 true。
toSorted()	按特定顺序对数组的元素进行排序。
sort()	对数组的元素进行排序。
splice()	在数组中添加和/或删除元素。
toLocaleString()	将数组元素转换为字符串。
toReversed()	返回数组的反向函数。
toSpliced()	此方法返回一个新数组，其中删除和/或替换了给定索引处的一些元素。
toString()	返回表示数组及其元素的字符串。
unshift()	将一个或多个元素添加到数组的前面，并返回数组的新长度。
values()	获取包含每个数组索引值的迭代器。
with()	此方法返回一个新数组，其中给定索引处的元素替换为给定值。

JavaScript 数组对象的基本示例

在下面的示例中，我们演示了 JavaScript Array Object 的基本方法和属性的用法 -

示例（创建 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!", "qikepu com");
	 	 	 output.innerHTML += "strs ==> " + strs + "<br>";

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

输出

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

strs ==> Hello,World!,qikepu com
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>

输出

正如我们在输出中看到的那样，provided 元素已被添加。

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

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


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

打印本页