js 如何用push向数组末尾添加新元素

在 JavaScript 中，使用 push() 方法向数组末尾添加新元素是最直接且常用的方式。push() 会直接修改原数组，并返回数组的新长度。其语法为 array.push(element1, element2, ..., elementN)，可添加一个或多个元素。

• 示例：let todos = ['买菜', '写代码'];let newLength = todos.push('健身');console.log(todos); // ['买菜', '写代码', '健身']console.log(newLength); // 3

1. 变异方法特性：

   push() 会直接修改原数组，而非返回新数组。若需保持原数组不变，应避免使用 push()。

   错误示例：误以为 push() 返回新数组，导致链式调用失败或意外修改原数据。let originalArray = [1, 2];let newArr = originalArray.push(3); // newArr 为 3（新长度），而非数组console.log(originalArray); // [1, 2, 3]（原数组被修改）

2. 返回值陷阱：

   push() 返回的是数组新长度，而非修改后的数组。若需获取新数组，应直接引用原数组变量。

1. unshift()：

   功能：向数组开头添加元素，修改原数组并返回新长度。

   性能：时间复杂度为 O(n)（需移动所有现有元素），性能较差，仅在需添加到开头时使用。

   示例：let queue = ['B', 'C'];queue.unshift('A'); // ['A', 'B', 'C']

2. concat()：

   功能：合并数组或元素，生成新数组，不修改原数组。

   适用场景：需保持原数组不可变时（如状态管理）。

   示例：let arr1 = [1, 2];let newArr = arr1.concat([3, 4], 5); // [1, 2, 3, 4, 5]console.log(arr1); // [1, 2]（未修改）

3. 展开运算符（...）：

   功能：通过解构原数组并添加新元素，创建新数组。

   优势：灵活支持在任意位置添加元素，且保持不可变性。

   示例：let original = ['apple', 'banana'];let newItems = [...original, 'orange']; // ['apple', 'banana', 'orange']let evenNewer = ['kiwi', ...original]; // ['kiwi', 'apple', 'banana']

4. splice()：

   功能：在指定位置插入、删除或替换元素，修改原数组。

   适用场景：需精确控制插入位置时（如中间插入）。

   示例：let list = ['a', 'b', 'd'];list.splice(2, 0, 'c'); // ['a', 'b', 'c', 'd']

• 性能表现：

  push() 的均摊时间复杂度为 O(1)，因 JavaScript 引擎会预留数组内存空间，扩容操作（O(n)）极少成为瓶颈。

  对比 unshift()（O(n)），push() 在性能上优势显著，尤其适合频繁添加元素的场景。

• 数据可变性影响：

  在大型应用中，频繁使用 push() 可能因直接修改原数组导致状态管理复杂化（如意外副作用）。

  现代开发实践：倾向于使用不可变操作（如展开运算符或 concat()），以提升代码可维护性和状态追踪能力。例如，在 React/Vue 中，不可变数据可优化组件渲染性能。

• 优先使用 push()：当需直接修改原数组且无需关注不可变性时（如简单数据操作）。
• 选择替代方法：若需保持原数组不变（如状态管理），或需在开头/中间插入元素，可选用 concat()、展开运算符或 splice()。
• 性能与可维护性平衡：在性能要求极高的场景下，push() 通常足够高效；但在大型应用中，数据不可变性对长期维护更为关键。