JavaScript 如何向数组中添加元素

在本文中，我们将看到如何在JavaScript中向数组中添加元素。有几种方法可以向JavaScript数组添加新元素。

在JavaScript中添加数组的方法：

使用 JavaScript push()方法
使用 JavaScript unshift()方法
使用 JavaScript splice()方法
使用 JavaScript concat()方法
使用 Javascript扩展运算符

方法1：使用JavaScript push()方法

该方法将元素添加到数组末尾，而它的对应函数pop()方法将从数组末尾移除元素。如果您需要向数组末尾添加一个或多个元素，push()方法几乎总是最简单和最快的选择。

语法：

array.push(item1, item2, ..., itemX)

参数：

item1, item2, …, itemX: 这些是必填参数。要添加到数组末尾的项。

示例： 在这个示例中，我们将使用push()方法向数组末尾添加新元素。

// Input array 
let Geeks = ["Geeks1", "Geeks2", "Geeks3", "Geeks4"];
 
// Display input array
console.log("Original Array: " + Geeks);
 
// Pushing arrays
Geeks.push("Geeks5", "Geeks6");
 
// Display updated array
console.log("Updated Array: " + Geeks);

输出

Original Array: Geeks1,Geeks2,Geeks3,Geeks4
Updated Array: Geeks1,Geeks2,Geeks3,Geeks4,Geeks5,Geeks6

方法2：使用JavaScript的unshift()方法

这个方法会将一个元素添加到数组的开头，而它的配对函数shift()会从数组的开头移除一个元素。

语法：

array.unshift(item1, item2, ..., itemX)

参数:

item1，item2，…，itemX： 这些是必需参数。要添加到数组开头的项（们）。

示例: 在这个示例中，我们将使用unshift()方法向数组开头添加新元素。

// Input array
let Geeks = ["Geeks1", "Geeks2", "Geeks3", "Geeks4"];
 
// Display input array
console.log("Original Array: " + Geeks);
 
// Adding element in begining
Geeks.unshift("Geeks5", "Geeks6");
 
// Display updated array
console.log("Updated Array: " + Geeks);

输出

Original Array: Geeks1,Geeks2,Geeks3,Geeks4
Updated Array: Geeks5,Geeks6,Geeks1,Geeks2,Geeks3,Geeks4

方法3：使用JavaScript的splice()方法

此方法通过删除现有元素和/或添加新元素来修改数组的内容。

语法：

array.splice(index, amount, item1, ....., itemX)

参数：

index： 这是一个必需的参数。一个整数，指定添加/删除项目的位置，使用负值来指定从数组末尾的位置。
amount： 这是一个可选的参数。要删除的项目数。如果设置为0，则不会删除任何项目。
item1, item2, …, itemX： 这些是可选参数。新项目将添加到数组中。

示例： 在此示例中，我们将使用splice()方法在数组的第3个索引位置添加新元素。

// Input array
let Geeks = ["Geeks1", "Geeks2", "Geeks3", "Geeks4"];
 
// Display input array
console.log("Original Array: " + Geeks);
 
// Update array using slice
Geeks.splice(2, 1, "Geeks5", "Geeks6");
 
// Display updated array
console.log("Updated Array: " + Geeks);

输出

Original Array: Geeks1,Geeks2,Geeks3,Geeks4
Updated Array: Geeks1,Geeks2,Geeks5,Geeks6,Geeks4

方法4：使用JavaScript concat()方法

此方法返回一个新的合并数组，由调用它的数组与其参数中的一个或多个数组连接而成。此方法用于连接两个或多个数组，但不改变现有的数组，而是返回一个包含连接数组的值的新数组。

语法：

array1.concat(array2, array3, ..., arrayX)

参数：

array2, array3, …, arrayX： 这些参数是必需的。这些数组将被合并。

示例： 在这个示例中，我们将使用JavaScript的concat()方法将三个数组合并在一起。

// Input arrays
let g1 = ["Geeks1", "Geeks2"];
let g2 = ["Geeks3", "Geeks4"];
let g3 = ["GeeksForGeeks"];
 
// Concate g1, g2 and g3 into g4
let g4 = g1.concat(g2, g3);
 
//Display output
console.log(g4);

输出

[ 'Geeks1', 'Geeks2', 'Geeks3', 'Geeks4', 'GeeksForGeeks' ]

方法5：Javascript 扩展运算符

扩展运算符允许在期望有0个或多个参数的位置上展开可迭代对象。它主要用于变量数组中，当需要多个值时。它允许我们从数组中获取参数列表。

语法：

let variablename1 = [...value];

示例:

// Input arrays
let Array1 = [2, 4, 6, 8];
let Array2 = [3, 5, 7]
 
// Combine and create new array 
// using spread operator
newArray = [ ...Array1, ...Array2]
 
// Display output
console.log(newArray);

输出