There are various ways to add or append an item to an array. We will make use of push, unshift, splice, concat, spread and index to add items to array. Let's discuss all the 6 different methods one by one in brief.

有多种将项目添加或追加到数组的方法。 我们将利用push ， unshift ， splice ， concat ， spread和index将项目添加到数组中。 让我们简要地讨论所有6种不同的方法。

push()方法 (The push() method)

This method is used to add elements to the end of an array. This method returns the new array length.

此方法用于将元素添加到数组的末尾。 此方法返回新的数组长度。

const movies = ['Avengers', 'Iron-man', 'Thor'];const newLength = movies.push('Hulk'); console.log(movies); // ['Avengers', 'Iron-man', 'Thor', 'Hulk'];console.log(newLength); //4

We can also add multiple values with push method.

我们还可以使用push方法添加多个值。

const movies = ['Iron-man', 'Thor']; movies.push('Avengers', 'Deadpool', 'Hulk');console.log(movies); // ["Iron-man", "Thor", "Avengers", "Deadpool", "Hulk"]

unshift()方法 (The unshift() method)

The unshift() method is used to add elements at the beginning of an array. This method returns the new array length.

unshift()方法用于在数组的开头添加元素。 此方法返回新的数组长度。

const cars = ['Audi', 'BMW', 'Jaguar']; const newLength = cars.unshift('Mercedes'); console.log(newLength ); // 4 console.log(cars); // ['Mercedes', 'Audi', 'BMW', 'Jaguar']

We can also add multiple values with unshift() method.

我们还可以使用unshift()方法添加多个值。

const cars = ['Audi', 'Jaguar']; cars.unshift('Mercedes', 'Tesla'); console.log(cars); // ['Mercedes', 'Tesla', 'Audi', 'Jaguar']

splice()方法 (The splice() method)

This method can both add and remove items at a specified index of array.

此方法可以在指定的数组索引处添加和删除项目。

The first parameter of splice() takes an array index where you want to add or remove item.

splice()的第一个参数采用要在其中添加或删除项的数组索引。

The second parameter takes number of elements to be removed from the specified index. If not removing any item then this can be 0.

第二个参数采用要从指定索引中删除的元素数。 如果不删除任何项目，则可以为0。 The third parameter takes items to be added at the specified index. If we are only removing then this can be left as blank. We can add as many values as we want.

第三个参数接受要在指定索引处添加的项目。 如果我们仅删除，则可以将其留为空白。 我们可以根据需要添加任意多个值。 const language = ['Java', 'PHP']; language.splice(1, 0, 'Android', 'Swift');//['Java', 'Android', 'Swift' , 'PHP']

concat()方法 (The concat() method)

The concat() method is used to merge two or more arrays and returns a new array containing the merged values. This method does not change the existing arrays.

concat()方法用于合并两个或更多数组，并返回包含合并值的新数组。 此方法不会更改现有阵列。

将数组作为参数传递 (Passing array as parameter)

const marvel = ['Avengers', 'Thor']; const DC = ['Batman', 'Joker']; const movies = marvel.concat(DC); console.log(movies); // ["Avengers", "Thor", "Batman", "Joker"]

传递值作为参数 (Passing value as parameter)

const marvel = ['Avengers', 'Thor']; const movies = marvel.concat('Batman', 'Joker');console.log(movies); // ["Avengers", "Thor", "Batman", "Joker"]

点差(...)运算符 (The spread(…) operator)

The spread operator(...) is used to expand and spread array elements. We can spread and merge an array with new values using spread operator.

扩展运算符(...)用于扩展和扩展数组元素。 我们可以使用散布运算符散布并合并具有新值的数组。

const animals = ['Tiger', 'Horse']; const zoo = [...animals, 'Elephant', 'Lion', 'Deer'];console.log(zoo); // ['Tiger', 'Horse', 'Elephant', 'Lion', 'Deer']

用索引添加元素 (Adding element with index)

We can add a new value to the array by accessing the particular index and assign the new element.

我们可以通过访问特定索引并为该新元素分配新值到数组。

const number = [15, 40]; number[2] = 65; number[3] = 80; console.log(number); // [15, 40, 65, 80]

If we leave some of the indexes in the middle and assign values to array, then the left out places in the middle will be filled with undefined values.

如果我们将一些索引留在中间并为数组赋值，那么中间剩下的地方将被未定义的值填充。

const number = [15, 40]; number[3] = 65; number[6] = 80; console.log(number); // [15, 40, undefined, 65, undefined, undefined, 80]

You can use any of the 6 methods to add an item to array.

您可以使用6种方法中的任何一种将项目添加到数组。

Also check: 5 ways to remove items from an array

还要检查 ： 从数组中删除项目的5种方法

Thanks for your time☺️For more Web development blogs, Please visit jscurious.com

感谢您的宝贵时间 ☺️更多Web开发博客，请访问jscurious.com

翻译自: https://medium.com/swlh/6-ways-to-add-items-to-an-array-in-javascript-b9ab95858d5a

相关资源：四史答题软件安装包exe