迹忆客 专注技术分享

在本文中，我们将学习如何在 JavaScript 中将元素追加到数组中。

有几种方法可以将元素追加到 JavaScript 中的数组。我们可以附加一个元素，多个元素，甚至可以将整个数组附加到给定的数组。我们可以使用一种方法，具体取决于我们是否要进行变异，速度和效率要求，代码的可读性。

在经典方法中，我们使用数组的总长度获取数组的最后一个空索引，并在该索引处插入一个元素。该方法最容易使用，并且效率极高。它仅允许我们一次附加一个元素。这是一种变异方法，因为它会更改原始数组。

let arr = [0,1,2];
arr[arr.length]=3;
console.log(arr);

输出：

[0, 1, 2, 3]

在上面的代码中，我们使用 arr.length 获得数组的最后一个索引为 3，然后在这些索引处添加元素。

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() 运算符保留。此方法还会更改数组，因此是可变的。

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() 方法可以通过添加/删除元素来修改数组的内容。它采用以下 3 参数：

此方法还会更改数组，因此是可变的。

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() 方法将数组作为输入并将它们连接在一起，即，它采用一个数组并将其余数组附加到其末尾。但是此运算符不会修改原始数组，而是返回一个包含合并结果的全新数组。它可以采用两个或多个数组并将它们连接在一起。由于此方法不会修改给定的数组，因此它是非可变的。

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。

我们可以使用传播语法将完整的数组追加到给定的数组中。这是一种非变异方法，因为我们只是将数组元素散布到一个新数组中。它与 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 语法。