JS数组添加元素：push、unshift、splice与concat方法实战

在处理有序数据列表时，数组是最基础且常用的数据结构之一。

数组中的每个值都拥有唯一的 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"]

如同其他方法，此处亦可同时添加多个元素：

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() 方法，该方法可在不修改原始数组的前提下生成包含新元素的新数组。

JavaScript 数组插入元素的四种常用方法详解

使用 unshift() 方法向数组头部添加元素

使用 push() 方法向数组尾部添加元素

使用 splice() 方法向数组指定位置添加元素

使用 concat() 方法合并数组元素

总结

实用工具推荐