原文: Push into an Array in JavaScript – How to Insert an Element into an Array in JS,作者:Joel Olawanle

译者: Chengjun.L

数组数据类型是处理有序值列表时最常用的数据类型之一。

每个值都被称为具有唯一 id 的元素。它存储可以通过单个变量访问的各种数据类型的元素。

在实践中,一个数组可以包含一个用户列表,我们可能需要在最后一个元素之后、第一个元素之前或数组中的任何指定点添加一个元素到数组中。

本文将向你展示如何使用 JavaScript 将元素插入到数组中。如果你赶时间,以下是我们将在本文中深入讨论的方法:

// 添加到数组的开头
Array.unshift(element);

// 添加到数组的末尾
Array.push(element);

// 添加到指定位置
Array.splice(start_position, 0, new_element...);

// 使用 concat 方法添加而不改变原始数组
let newArray = [].concat(Array, element);
  • 当你想在数组末尾添加一个元素时,请使用 push()
  • 如果你需要在数组的开头添加一个元素,请使用 unshift()
  • 如果要将元素添加到数组的特定位置,请使用 splice()
  • 最后,当你想保持原始数组时,可以使用 concat() 方法。

如何使用 unshift() 方法添加到数组的开头

在 JavaScript 中,你可以使用 unshift() 方法将一个或多个元素添加到数组的开头,并在添加新元素后返回数组的长度。

如果我们有一个国家数组,并且想在当前第一个索引 0 处的 “Nigeria” 之前添加一个国家,我们可以使用 unshift() 方法来完成,如下所示:

const countries = ["Nigeria", "Ghana", "Rwanda"];

countries.unshift("Kenya");

console.log(countries); // ["Kenya","Nigeria","Ghana","Rwanda"]

我们还可以使用 unshift() 方法添加多个元素:

const countries = ["Nigeria", "Ghana", "Rwanda"];

countries.unshift("South Africa", "Mali", "Kenya");

console.log(countries); // ["South Africa","Mali","Kenya","Nigeria","Ghana","Rwanda"]

在我们对 unshift() 方法的解释中,我们还声明它返回新数组的长度,如下所示:

const countries = ["Nigeria", "Ghana", "Rwanda"];

let countriesLength = countries.unshift("South Africa", "Mali", "Kenya");

console.log(countriesLength); // 6

如何使用 push() 方法推送到数组的末尾

push() 方法类似于 unshift() 方法,因为它将元素添加到数组的末尾而不是开头。它返回新数组的长度,并且与 unshift() 方法一样,可用于添加多个元素。

让我们再次尝试相同的示例,但这次使用 push() 方法将它们添加到数组的末尾:

const countries = ["Nigeria", "Ghana", "Rwanda"];

countries.push("Kenya");

console.log(countries); // ["Nigeria","Ghana","Rwanda","Kenya"]

countries.push("South Africa", "Mali");

console.log(countries); // ["Nigeria","Ghana","Rwanda","Kenya","South Africa","Mali"]

我们可以用它来获取新数组的长度:

const countries = ["Nigeria", "Ghana", "Rwanda"];

let countriesLength = countries.push("Kenya");

console.log(countriesLength); // 4

如何使用 splice() 方法将元素添加到数组中的指定位置

到目前为止,我们只看到了如何将元素添加到数组的开头或结尾,但是你可能想知道如何将元素添加到数组中的特定位置。好吧,你可以使用 splice() 方法来做到这一点。

splice() 方法是一种通用方法,用于通过在数组的指定位置删除、替换或添加元素来更改数组的内容。本节将介绍如何使用此方法将元素添加到特定位置。

例如,考虑以下国家数组,其中包含按字母顺序排列的三个元素(国家):

const countries = ["Ghana", "Nigeria", "Rwanda"];

假设我们要添加 “Kenya”,按照字母顺序,它应该放在第二个位置,索引 1(在 Ghana 之后和 Nigeria 之前)。在这种情况下,我们将使用 splice() 方法,语法如下:

Array.splice(start_position, 0, new_element...);
  • start_position 指定了我们希望将新元素插入到数组中的位置的索引。如果有多个元素,它指定插入的元素将从哪里开始。
  • 如果我们想添加元素到数组中,我们将第二个参数设置为零(0),指示 splice() 方法不要删除任何数组元素。
  • 以下参数或元素可能不止一个,因为这些是我们要在指定位置添加到数组中的元素。

例如,让我们在国家数组中将 “Kenya” 放在 “Ghana” 之后:

const countries = ["Ghana", "Nigeria", "Rwanda"];

countries.splice(1, 0, 'Kenya');

console.log(countries); // ["Ghana","Kenya","Nigeria","Rwanda"]
s_8F843EE332F48B356BFA84EB69212DF653EB2859C5739E7748DB9362133DCFB7_1658069550677_illustration

就像我们对其他方法所做的那样,我们也可以添加多个元素:

const countries = ["Ghana", "Nigeria", "Rwanda"];

countries.splice(1, 0, 'Kenya', 'Mali');

console.log(countries); // ["Ghana","Kenya","Mali","Nigeria","Rwanda"]

请注意,前面的方法返回新数组的长度,但 splice() 方法更改了原始数组。它不会删除任何元素,因此它返回一个空数组。

如何使用 concat() 方法将元素添加到数组

我们可以使用 concat() 方法将元素添加到数组中,而无需改变或更改原始数组。如果我们不希望原始数组受到影响,则创建一个新数组是一种更好的方法。

我们可以使用此方法根据放置元素的位置将元素添加到数组的开头和结尾:

const countries = ["Ghana", "Nigeria", "Rwanda"];

let newCountries = [].concat("Mali", countries, "Kenya");

console.log(newCountries); // ["Mali","Ghana","Nigeria","Rwanda","Kenya"]

concat() 方法还允许我们将两个(或更多)数组连接到一个新数组中:

const africanCountries = ["Ghana", "Nigeria", "Rwanda"];
const europeanCountries = ["Germany", "France", "spain"];

let countries = [].concat(africanCountries, europeanCountries);

console.log(countries); // ["Ghana","Nigeria","Rwanda","Germany","France","spain"]

总结

在本文中,我们学习了使用 splice() 方法将元素添加到数组的开始、末尾或任何位置的各种方法。

我们还了解到 concat() 方法允许我们在不改变原始数组的情况下添加元素。

你可以使用任何你需要的方法。

祝你编程快乐!