脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript数组添加数据

JavaScript中列表(数组)添加数据的常用方法

 更新时间：2026年05月28日 08:17:46   作者：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数组添加数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 微信小程序实现皮肤功能（夜间模式）

    微信小程序实现皮肤功能（夜间模式）

    这篇文章主要给大家介绍了关于利用微信小程序实现皮肤功能，也就是实现夜间模式的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-06-06
  • 关于JavaScript的面向对象和继承有利新手学习

    关于JavaScript的面向对象和继承有利新手学习

    这是一篇关于JavaScript的面向对象和继承的文章,对想学习JavaScript中面向对象的同学来说是很有帮助,虽然一些Javascript用户可能永远也不需要知道原型或面向对象语言的性质，但是那些来自传统面向对象的语言的开发者使用的时候会发现JavaScript的继承模型非常的奇怪
    2013-01-01
  • 小程序实现订单倒计时功能

    小程序实现订单倒计时功能

    这篇文章主要为大家详细介绍了小程序实现订单倒计时功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-04-04
  • 微信小程序保持session会话的方法

    微信小程序保持session会话的方法

    这篇文章主要介绍了微信小程序保持session会话的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • 3分钟教你用JavaScript实现电子签名效果

    3分钟教你用JavaScript实现电子签名效果

    电子签名已经成为现代商业中不可或缺的一部分，它可以提高业务流程的效率和安全性。本文将介绍如何使用HTML5的canvas元素和JavaScript在前端实现电子签名，需要的可以参考一下
    2023-04-04
  • 探索export导出一个字面量会报错export default不会报错

    探索export导出一个字面量会报错export default不会报错

    这篇文章主要为大家介绍了export导出一个字面量会报错而export default不会报错的问题探索解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2024-01-01
  • Bootstrap框架结合jQuery仿百度换肤功能实例解析

    Bootstrap框架结合jQuery仿百度换肤功能实例解析

    这篇文章主要为大家详细介绍了Bootstrap框架结合jQuery仿百度换肤功能实现代码解析,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • JavaScript实现单例模式实例分享

    JavaScript实现单例模式实例分享

    这篇文章主要介绍了JavaScript实现单例模式实例以及代码讲解，有需要的读者们跟着学习参考下吧。
    2017-12-12
  • JavaScript数组排序功能简单实现

    JavaScript数组排序功能简单实现

    这篇文章主要介绍了JavaScript数组排序功能简单实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • uni-app实现微信小程序长按拍视频功能

    uni-app实现微信小程序长按拍视频功能

    这篇文章主要为大家详细介绍了uni-app实现微信小程序长按拍视频功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08

最新评论