JavaScript 的数组对象让你能够在一个单一的变量中存储多个值。数组用于存储一系列相同或不同数据类型的元素集合。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" ];
你可以使用序数来访问和设置数组中的值,如下所示:
JavaScript 数组参考
在 JavaScript 中,数组对象允许在一个单一的变量名下存储多个元素集合。它提供了各种方法和属性来对数组执行操作。以下是 Array
类的属性和方法列表。
JavaScript 数组属性
以下是一个数组对象的属性列表以及它们的描述:
序号 |
名称 |
描述 |
1 |
constructor |
返回创建对象的数组函数的一个引用。 |
2 |
length |
反映数组中的元素数量。 |
JavaScript 数组方法
以下是一个数组对象的方法列表以及它们的描述:
数组静态方法
这些方法是使用 Array
类本身调用的:
序号 |
名称 |
描述 |
1 |
from() |
创建数组的浅拷贝。 |
2 |
isArray() |
根据参数是否为数组返回布尔值。 |
3 |
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];
const arr2 = ["Hello", "Hi", "How", "are", "you?"];
const arr3 = [true, false, true, true];
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
是我们需要从中访问数组元素的数字。
JavaScript 数组操作示例
在下面的示例中,我们创建了一个数字数组,并从数组的第 0 和第 2 个索引处访问了元素。第 0 个索引处的元素是 1,第 2 个索引处的元素是 6。
<html>
<head>
<title> JavaScript - 访问数组元素 </title>
</head>
<body>
<p id="output"> </p>
<script>
const nums = [1, 5, 6, 8, 90];
document.getElementById("output").innerHTML =
"第 0 个索引处的元素是 : " + nums[0] + "<br>" +
"第 2 个索引处的元素是 : " + nums[2];
</script>
</body>
</html>
输出:
第 0 个索引处的元素是 : 1
第 2 个索引处的元素是 : 6
JavaScript 数组长度
数组的 length
属性用于查找数组的长度。
let len = arr.length;
示例
在下面的示例中,length
属性返回 5,因为数组包含 5 个元素。
<html>
<head>
<title> JavaScript - 数组长度 </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 到 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);
output.innerHTML += "更新后的数组是 : " + nums + "<br>";
nums[nums.length] = 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;
document.getElementById("output").innerHTML =
"更新后的数组是 : " + nums;
</script>
</body>
</html>
输出:
更新后的数组是 : 100,2,3,4,5
遍历 JavaScript 数组
你可以使用循环遍历每个数组元素。然而,存在一些内置的方法来遍历数组,我们将在后面的章节中看到。
for (let p = 0; p < nums.length; 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