在 JavaScript 中将元素追加到数组中
-
在 JavaScript 中使用数组的
.length
属性追加数组中的元素 -
在 JavaScript 中使用
push()
方法来添加数组中的元素 -
使用
unshift()
方法将元素添加到数组中 -
使用
splice()
方法在数组中追加元素 -
使用
concat()
方法将元素添加到数组中 -
使用
spread
语法在数组中追加元素
在本文中,我们将学习如何在 JavaScript 中将元素追加到数组中。
有几种方法可以将元素追加到 JavaScript 中的数组。我们可以附加一个元素,多个元素,甚至可以将整个数组附加到给定的数组。我们可以使用一种方法,具体取决于我们是否要进行变异,速度和效率要求,代码的可读性。
在 JavaScript 中使用数组的 .length
属性追加数组中的元素
在经典方法中,我们使用数组的总长度获取数组的最后一个空索引,并在该索引处插入一个元素。该方法最容易使用,并且效率极高。它仅允许我们一次附加一个元素。这是一种变异方法,因为它会更改原始数组。
let arr = [0,1,2];
arr[arr.length]=3;
console.log(arr);
输出:
[0, 1, 2, 3]
在上面的代码中,我们使用 arr.length
获得数组的最后一个索引为 3
,然后在这些索引处添加元素。
在 JavaScript 中使用 push()
方法来添加数组中的元素
push()
方法用于将元素添加到数组的末尾。我们可以添加一个元素,多个元素甚至一个数组。它是最简单也是最快的选项之一,在某些情况下甚至可以在大型数组中使用 Array.length
击败上述方法。.push()
执行的动作可以通过 .pop()
方法反转。当多个元素一起传递时,它们的顺序由 push()
运算符保留。此方法还会更改数组,因此是可变的。
const arr =[1,2,3];
const arr2 = [8,9,10];
arr.push(4);// single item
arr.push(5,6,7);// multiple items
arr.push(...arr2);// spread operator
console.log(arr);
输出:
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
在上面的代码中,我们演示了所有的 3 种情况:使用扩展语法添加单个元素,多个元素甚至整个数组。所有元素都附加在数组的末尾。
使用 unshift()
方法将元素添加到数组中
unshift()
方法可帮助我们在数组的开头添加一个元素。它返回数组的新长度。可以调用它或将其应用于属性类似于数组的对象。当多个元素一起传递时,它们的顺序由 unshift()
运算符保留。此方法还会更改数组,因此是可变的。
const arr = [1,2,3];
const arr2 = [8,9,10];
arr.unshift(4); // single item
arr.unshift(5,6,7); // multiple items
arr.unshift(...arr2) // spread operator
console.log(arr);
输出:
[8, 9, 10, 5, 6, 7, 4, 1, 2, 3]
在上面的代码中,我们演示了所有 3 种情况:使用扩展语法添加单个元素,多个元素甚至整个数组。注意此操作与 push()
有何不同,所有元素都附加到数组的开头。
使用 splice()
方法在数组中追加元素
splice()
方法可以通过添加/删除元素来修改数组的内容。它采用以下 3
参数:
index
:一个整数值,指定要添加/删除元素的位置。我们甚至可以使用负索引从数组的后面指定一个索引。howmany
:这是一个可选参数。它指定要从数组中删除多少个项目。如果将其设置为0
,则不会删除任何项目。item1, item2, ... ,itemx
:要添加到数组中的项目。
此方法还会更改数组,因此是可变的。
const arr = [1,2,3,4,5];
arr.splice(4,3,7,8,9);
console.log(arr);
输出:
[1, 2, 3, 4, 7, 8, 9]
在上面的代码中,我们选择了索引 4
,并在该索引处添加了 3
元素 7,8,9
。
使用 concat()
方法将元素添加到数组中
concat()
方法将数组作为输入并将它们连接在一起,即,它采用一个数组并将其余数组附加到其末尾。但是此运算符不会修改原始数组,而是返回一个包含合并结果的全新数组。它可以采用两个或多个数组并将它们连接在一起。由于此方法不会修改给定的数组,因此它是非可变的。
const arr = [1,2,3];
const arr2 = [8,9,10];
const arr3 = arr.concat(arr2);
console.log(arr3);
输出:
[1, 2, 3, 8, 9, 10]
在上面的代码中,我们采用两个数组 arr
和 arr2
,并调用 concat()
函数将它们连接起来以形成新数组-arr3
。
使用 spread
语法在数组中追加元素
我们可以使用传播语法将完整的数组追加到给定的数组中。这是一种非变异方法,因为我们只是将数组元素散布到一个新数组中。它与 concat()
操作非常相似。它可以帮助我们创建副本或合并两个分开的数组。仔细使用传播语法很重要。如果我们使用语法 const arr = [arr1, arr2];
我们得到一个包含两个子数组的嵌套数组,而如果使用 const arr=[...arr1 , ...arr2];
我们将两个数组的元素连接在一起。
const arr = [1,2,3];
const arr2 = [8,9,10];
const arr3 = [...arr, ...arr2];
输出:
[1, 2, 3, 8, 9, 10]
在上面的代码中,我们使用传播操作符将两个数组 arr
和 arr2
附加到一个新数组 arr3
中。
除 spread
语法外,所有主要浏览器均支持上述所有方法。Internet Explorer 不支持 spread
语法。
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn