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

Harshit Jindal 2023年10月12日
  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
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