首页 > 网络编程 > JavaScript > javascript技巧 > JS数据添加到列表

JS把数据添加到列表中的几种常见方法

2026-03-21 11:34:28 作者：detayun

在JavaScript中,向列表数组添加数据是一项基础且高频的操作,无论是动态生成内容、处理用户输入还是与后端API交互,掌握数组操作方法都是前端开发者的必备技能,本文将详细介绍几种常用的添加数据到数组的方法,需要的朋友可以参考下

引言

在JavaScript中，向列表（数组）添加数据是一项基础且高频的操作。无论是动态生成内容、处理用户输入还是与后端API交互，掌握数组操作方法都是前端开发者的必备技能。本文将详细介绍几种常用的添加数据到数组的方法，并附上代码示例。

一、基础方法：push()

push() 是最常用的数组方法之一，它在数组末尾添加一个或多个元素，并返回新的数组长度。

const fruits = ['apple', 'banana'];
const newLength = fruits.push('orange');

console.log(fruits); // ['apple', 'banana', 'orange']
console.log(newLength); // 3

特点：

直接修改原数组（非纯函数）
可以一次添加多个元素
返回新长度

二、在开头添加元素：unshift()

如果需要在数组开头添加元素，可以使用 unshift() 方法：

const colors = ['blue', 'green'];
colors.unshift('red');

console.log(colors); // ['red', 'blue', 'green']

注意：unshift() 同样会修改原数组，且在大型数组上性能略低于 push()。

三、非破坏性添加：concat()

如果需要保留原数组不变（不可变数据），可以使用 concat() 方法：

const numbers = [1, 2];
const newNumbers = numbers.concat(3);

console.log(numbers); // [1, 2]
console.log(newNumbers); // [1, 2, 3]

优势：

不会修改原数组
可以合并多个数组
适合React/Vue等需要状态不可变的框架

四、ES6扩展运算符

ES6提供了更灵活的扩展运算符 ... 来合并数组：

const arr1 = [1, 2];
const arr2 = [...arr1, 3]; // 末尾添加
const arr3 = [0, ...arr1]; // 开头添加

console.log(arr2); // [1, 2, 3]
console.log(arr3); // [0, 1, 2]

适用场景：

需要同时合并多个数组时
在函数参数中传递数组元素时

五、使用splice() 指定位置添加

splice() 可以在任意位置添加元素：

const letters = ['a', 'c'];
letters.splice(1, 0, 'b'); // 在索引1处插入

console.log(letters); // ['a', 'b', 'c']

参数说明：

第一个参数：起始索引
第二个参数：要删除的元素数量（0表示不删除）
后续参数：要添加的元素

六、实际应用示例

1. 动态添加用户输入到列表

<input type="text" id="itemInput">
<button onclick="addItem()">添加</button>
<ul id="itemList"></ul>

<script>
  const items = [];
  
  function addItem() {
    const input = document.getElementById('itemInput');
    const text = input.value.trim();
    
    if (text) {
      items.push(text); // 添加到数组
      input.value = ''; // 清空输入框
      renderList(); // 重新渲染列表
    }
  }
  
  function renderList() {
    const list = document.getElementById('itemList');
    list.innerHTML = items.map(item => `<li>${item}</li>`).join('');
  }
</script>

2. 合并多个数据源

const defaultItems = ['加载中...'];
const fetchedData = ['item1', 'item2'];
const userAdded = ['custom'];

// 合并数据（保留默认项在开头）
const finalList = [...defaultItems, ...fetchedData, ...userAdded];

七、性能对比

对于大型数组（>10,000元素）：

push()/pop() 最快
unshift()/shift() 最慢（需要移动所有元素）
concat() 和扩展运算符会创建新数组，适合小数据量

总结

方法	位置	修改原数组	适用场景
push()	末尾	✅	通用添加
unshift()	开头	✅	需要保持顺序时
concat()	末尾	❌	需要不可变性时
…扩展符	任意	❌	ES6+现代开发
splice()	任意	✅	精确控制位置

根据具体需求选择合适的方法：

需要修改原数组 → push()/unshift()/splice()
需要不可变性 → concat()/扩展运算符
需要高性能 → 优先使用 push()

到此这篇关于JS把数据添加到列表中的几种常见方法的文章就介绍到这了,更多相关JS数据添加到列表内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！