JavaScript中向数组添加元素的常用方法

在JavaScript开发中，数组是最常用的数据结构之一，动态地向数组中添加元素是日常开发中的高频操作。JavaScript提供了多种原生的数组方法来实现元素添加，不同方法的使用场景和特性有所差异，下面我们逐一介绍。

1. 使用push()方法添加元素到数组末尾

push()是数组最常用的方法之一，它可以将一个或多个元素添加到数组的末尾，并返回添加后数组的新长度。这个方法会直接修改原数组，属于原地修改操作。

// 定义一个初始数组
let fruits = ['苹果', '香蕉', '橙子'];
console.log('初始数组：', fruits); // 输出：['苹果', '香蕉', '橙子']

// 添加一个元素到数组末尾
let newLength1 = fruits.push('葡萄');
console.log('添加一个元素后：', fruits); // 输出：['苹果', '香蕉', '橙子', '葡萄']
console.log('返回的新长度：', newLength1); // 输出：4

// 添加多个元素到数组末尾
let newLength2 = fruits.push('西瓜', '芒果');
console.log('添加多个元素后：', fruits); // 输出：['苹果', '香蕉', '橙子', '葡萄', '西瓜', '芒果']
console.log('返回的新长度：', newLength2); // 输出：6

2. 使用unshift()方法添加元素到数组开头

unshift()方法与push()方法的作用相反，它可以将一个或多个元素添加到数组的开头，同样会直接修改原数组，并返回添加后数组的新长度。

// 定义一个初始数组
let numbers = [2, 3, 4];
console.log('初始数组：', numbers); // 输出：[2, 3, 4]

// 添加一个元素到数组开头
let newLength3 = numbers.unshift(1);
console.log('添加一个元素后：', numbers); // 输出：[1, 2, 3, 4]
console.log('返回的新长度：', newLength3); // 输出：4

// 添加多个元素到数组开头
let newLength4 = numbers.unshift(-1, 0);
console.log('添加多个元素后：', numbers); // 输出：[-1, 0, 1, 2, 3, 4]
console.log('返回的新长度：', newLength4); // 输出：6

3. 使用splice()方法在指定位置插入元素

splice()方法可以实现更灵活的元素添加操作，它可以在数组的任意位置插入元素，同时还可以删除指定位置的元素。splice()的第一个参数是起始索引，第二个参数是要删除的元素个数（如果不需要删除就传0），后面的参数就是要添加的元素。这个方法同样会修改原数组。

// 定义一个初始数组
let colors = ['红', '黄', '蓝'];
console.log('初始数组：', colors); // 输出：['红', '黄', '蓝']

// 在索引1的位置插入一个新元素，不删除任何元素
colors.splice(1, 0, '绿');
console.log('插入一个元素后：', colors); // 输出：['红', '绿', '黄', '蓝']

// 在索引2的位置插入两个新元素，不删除任何元素
colors.splice(2, 0, '紫', '橙');
console.log('插入多个元素后：', colors); // 输出：['红', '绿', '紫', '橙', '黄', '蓝']

4. 使用concat()方法合并数组生成新数组

concat()方法不会修改原数组，它会将传入的数组或者元素与原数组合并，返回一个全新的数组。如果需要添加的元素是另一个数组，或者希望不修改原数组的情况下添加元素，就可以使用这个方法。

// 定义两个初始数组
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
console.log('原数组arr1：', arr1); // 输出：[1, 2, 3]
console.log('原数组arr2：', arr2); // 输出：[4, 5, 6]

// 合并两个数组生成新数组
let newArr1 = arr1.concat(arr2);
console.log('合并后的新数组：', newArr1); // 输出：[1, 2, 3, 4, 5, 6]
console.log('合并后原数组arr1不变：', arr1); // 输出：[1, 2, 3]

// 合并数组和单个元素生成新数组
let newArr2 = arr1.concat(7, 8);
console.log('合并元素后的新数组：', newArr2); // 输出：[1, 2, 3, 7, 8]

5. 通过索引直接赋值添加元素

如果知道要添加的元素的位置，也可以直接通过数组索引赋值的方式添加元素。如果赋值的位置超过了数组当前的长度，数组会自动扩展，中间没有被赋值的索引位置会填充为undefined。

// 定义一个初始数组
let animals = ['猫', '狗'];
console.log('初始数组：', animals); // 输出：['猫', '狗']

// 在索引2的位置添加元素
animals[2] = '兔子';
console.log('添加元素后：', animals); // 输出：['猫', '狗', '兔子']

// 在超过当前长度的索引位置添加元素
animals[5] = '鸟';
console.log('跳过索引添加元素后：', animals); // 输出：['猫', '狗', '兔子', undefined, undefined, '鸟']

方法对比与选择建议

不同的添加元素方法适用场景不同，我们可以根据实际需求选择：

• 如果需要在数组末尾添加元素，优先选择push()，操作简单效率高
• 如果需要在数组开头添加元素，使用unshift()，但需要注意unshift()在大型数组上的性能略低于push()
• 如果需要在数组指定中间位置插入元素，选择splice()，功能最灵活
• 如果不希望修改原数组，需要得到一个新数组，选择concat()
• 如果明确知道要添加的位置，且场景简单，也可以通过索引直接赋值的方式实现

JavaScript数组push方法unshift方法splice方法concat方法 本作品最后修改时间：2026-05-23 23:27:04