在 JavaScript 中将元素追加到数组中

Harshit Jindal 2023年1月30日 2021年4月29日
  1. 在 JavaScript 中使用数组的 .length 属性追加数组中的元素
  2. 在 JavaScript 中使用 push() 方法来添加数组中的元素
  3. 使用 unshift() 方法将元素添加到数组中
  4. 使用 splice() 方法在数组中追加元素
  5. 使用 concat() 方法将元素添加到数组中
  6. 使用 spread 语法在数组中追加元素
在 JavaScript 中将元素追加到数组中

在本文中,我们将学习如何在 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 参数:

  1. index:一个整数值,指定要添加/删除元素的位置。我们甚至可以使用负索引从数组的后面指定一个索引。
  2. howmany:这是一个可选参数。它指定要从数组中删除多少个项目。如果将其设置为 0,则不会删除任何项目。
  3. 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]

在上面的代码中,我们采用两个数组 arrarr2,并调用 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]

在上面的代码中,我们使用传播操作符将两个数组 arrarr2 附加到一个新数组 arr3 中。

spread 语法外,所有主要浏览器均支持上述所有方法。Internet Explorer 不支持 spread 语法。

Harshit Jindal avatar Harshit Jindal avatar

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

相关文章 - JavaScript Array