JavaScript中列表(数组)添加数据的常用方法
作者：detayun
JavaScript数组添加元素的5种常用方法,并详细对比了JavaScript中push()、unshift()、splice()等常用方法用于数组不同位置添加数据的特点,希望对大家有所帮助
1. push() - 末尾添加（最常用）
let arr = [1, 2, 3]; arr.push(4); // [1, 2, 3, 4] arr.push(5, 6); // [1, 2, 3, 4, 5, 6] - 可添加多个
2. unshift() - 开头添加
let arr = [1, 2, 3]; arr.unshift(0); // [0, 1, 2, 3]
3. splice() - 指定位置添加
let arr = [1, 2, 3]; arr.splice(1, 0, 'a'); // 在索引1处添加'a' // [1, 'a', 2, 3] // 语法: splice(起始索引, 删除数量, 要添加的元素)
4. 展开运算符 … - 创建新数组（不修改原数组）
let arr = [1, 2, 3]; let newArr = [...arr, 4]; // 末尾添加 let newArr2 = [0, ...arr]; // 开头添加
5. concat() - 合并数组（不修改原数组）
let arr = [1, 2, 3]; let newArr = arr.concat(4, 5); // [1, 2, 3, 4, 5]
6.对比表格
| 方法 | 位置 | 是否修改原数组 | 性能 |
|---|---|---|---|
push() | 末尾 ✅ | 是 | ⭐⭐⭐⭐⭐ |
unshift() | 开头 | 是 | ⭐⭐⭐ |
splice() | 任意 | 是 | ⭐⭐⭐ |
... 展开符 | 任意 | 否 | ⭐⭐⭐⭐ |
7.推荐
- 末尾添加 → 用
push() - 开头添加 → 用
unshift()或[...arr, item] - 指定位置 → 用
splice()
8.知识扩展
在 JavaScript 中，数组（Array） 是一种非常灵活的数据结构，添加元素的方式也多种多样。根据你希望添加的位置（末尾、开头、中间）以及是否需要创建新数组，可以选择不同的方法。
下面详细列出常用方法，并附上代码示例和注意事项。
1. push() – 在数组末尾添加一个或多个元素
- 特点：直接修改原数组，返回新数组的长度。
- 适用场景：最常用、性能最好的追加方式。
let arr = [1, 2, 3]; let newLength = arr.push(4, 5); // 添加 4 和 5 console.log(arr); // [1, 2, 3, 4, 5] console.log(newLength); // 5
2. unshift() – 在数组开头添加一个或多个元素
- 特点：修改原数组，返回新长度。因为要移动所有后续元素，性能低于
push()。 - 适用场景：需要在头部插入数据，且数组长度不大。
let arr = [1, 2, 3]; let newLength = arr.unshift(0, -1); console.log(arr); // [0, -1, 1, 2, 3] console.log(newLength); // 5
3. splice() – 在任意位置插入 / 删除元素
- 语法：
splice(起始索引, 删除个数, 要插入的元素1, 元素2, ...) - 特点：直接在原数组上操作，返回被删除的元素组成的数组（若无删除则返回空数组）。
- 适用场景：需要精确控制在中间或指定位置添加元素，同时也可以做删除操作。
let arr = [1, 2, 3, 4]; // 在索引 2 的位置插入 100 和 200，不删除任何元素 arr.splice(2, 0, 100, 200); console.log(arr); // [1, 2, 100, 200, 3, 4]
4. concat() – 合并数组（返回新数组）
- 特点：不修改原数组，将参数中的数组或元素与原数组合并后返回一个新数组。
- 适用场景：不想改变原数组，需要得到一个新的合并结果。
let arr1 = [1, 2]; let arr2 = [3, 4]; let newArr = arr1.concat(arr2, 5); console.log(arr1); // [1, 2] 原数组未变 console.log(newArr); // [1, 2, 3, 4, 5]
5. 扩展运算符 ...（ES6+） – 创建新数组
- 特点：语法简洁，返回新数组，不修改原数组。
- 适用场景：函数式编程，或需要基于原数组轻松生成新数组。
let arr = [1, 2, 3]; let newArr1 = [...arr, 4, 5]; // 末尾添加 let newArr2 = [0, ...arr]; // 开头添加 let newArr3 = [0, ...arr.slice(0, 2), 99, ...arr.slice(2)]; // 中间插入 console.log(newArr1); // [1, 2, 3, 4, 5] console.log(newArr2); // [0, 1, 2, 3] console.log(newArr3); // [0, 1, 2, 99, 3]
6. 直接通过索引赋值或利用 length 属性
- 特点：最原始的方式，通过索引添加新元素，也可以直接使用
arr[arr.length] = value。 - 注意：如果索引超出当前长度，中间会形成“空位”（empty slots），产生稀疏数组，一般不推荐。
let arr = [1, 2, 3]; arr[arr.length] = 4; // 等价于 push(4) console.log(arr); // [1, 2, 3, 4] arr[10] = 5; // 索引跳跃，中间产生 empty console.log(arr); // [1, 2, 3, 4, empty × 6, 5]
性能对比与建议
push() 速度最快，因为它只在数组尾部添加，无需移动已有元素。
unshift() 最慢，每次添加都会将所有现有元素向后挪一位。
splice() 插入中间 也会移动部分元素，性能介于两者之间。
需要频繁在头部添加元素时，考虑改用链表结构或先 push 最后再 reverse。
总结表
| 方法 | 是否修改原数组 | 返回结果 | 常用场景 |
|---|---|---|---|
push(elem1, elem2) | ✅ 是 | 新长度（number） | 末尾追加，最常用 |
unshift(elem1, elem2) | ✅ 是 | 新长度（number） | 开头插入，慎用 |
splice(index, 0, elem) | ✅ 是 | 被删除的元素数组 | 任意位置精确插入 |
concat(array) | ❌ 否 | 新数组（Array） | 合并数组，不改变原数组 |
[...arr, elem] | ❌ 否 | 新数组（Array） | 函数式风格，创建新数组 |
根据需求选择合适的方法，绝大多数日常编码中 push() + splice() 组合就足够了。
到此这篇关于JavaScript中列表(数组)添加数据的常用方法的文章就介绍到这了,更多相关JavaScript数组添加数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！