js 怎么用unshift向数组开头添加新元素-js教程-PHP中文网

js 怎么用unshift向数组开头添加新元素

月夜之吻

发布： 2025-08-21 12:03:01

原创

780人浏览过

unshift 方法用于在数组开头添加一个或多个元素，并返回新数组长度，1. 它直接修改原数组；2. 添加的元素按传入顺序置于最前；3. 每次调用需重新索引所有现有元素，性能为 o(n)，大数组频繁操作时可能造成性能问题；4. 适用于需“最新优先”展示的场景，如最近浏览记录；5. 替代方案包括 splice()（灵活但语法复杂）和展开运算符（...），后者更推荐用于保持数据不可变性，尤其在 react/vue 等框架中。选择方法应基于是否需修改原数组、性能需求及代码可维护性。

js 怎么用unshift向数组开头添加新元素

unshift

登录后复制

是 JavaScript 数组的一个方法，它允许你将一个或多个新元素添加到数组的起始位置，并且会返回新数组的长度。

解决方案

在 JavaScript 中，如果你想把新元素加到数组的最前面，

unshift()

登录后复制

方法就是你的首选。它直接在原数组上操作，不需要你重新赋值。想象一下，你有一列已经排好队的物品，现在来了个新东西，你想让它排在最前面，

unshift

登录后复制

就是那个帮你把所有现有物品往后挪一格，然后把新来的放在第一个位置的“魔法手”。

它的基本用法是这样：

array.unshift(element1, element2, ..., elementN)

登录后复制

element1, element2, ..., elementN

登录后复制

就是你想添加到数组开头的元素。你可以添加一个，也可以同时添加好几个。这些元素会按照你传入的顺序，从左到右依次被添加到数组的最前面。

举个例子：

let fruits = ['apple', 'banana'];
console.log('原始数组:', fruits); // 输出: 原始数组: [ 'apple', 'banana' ]

let newLength = fruits.unshift('orange');
console.log('添加一个元素后:', fruits); // 输出: 添加一个元素后: [ 'orange', 'apple', 'banana' ]
console.log('新数组长度:', newLength); // 输出: 新数组长度: 3

// 也可以一次添加多个
let moreFruits = ['grape', 'kiwi'];
console.log('原始数组:', moreFruits); // 输出: 原始数组: [ 'grape', 'kiwi' ]

let newLengthMulti = moreFruits.unshift('lemon', 'melon');
console.log('添加多个元素后:', moreFruits); // 输出: 添加多个元素后: [ 'lemon', 'melon', 'grape', 'kiwi' ]
console.log('新数组长度:', newLengthMulti); // 输出: 新数组长度: 4

登录后复制

需要注意的是，

unshift()

登录后复制

方法会改变原数组。如果你不希望修改原数组，那么

unshift

登录后复制

可能不是你想要的那个工具。

unshift 方法的工作原理及应用场景

unshift

登录后复制

和

push

登录后复制

都是 JavaScript 数组的修改方法，但它们操作的方向截然不同。

push

登录后复制

是往数组的末尾加元素，就像排队时新来的人站在队尾；而

unshift

登录后复制

则是往数组的开头加元素，这就有点像插队，或者说，为了让新来的人排在最前面，所有后面的人都得往后挪一挪。

这个“往后挪一挪”的过程，在技术上意味着什么呢？每当你调用

unshift

登录后复制

，JavaScript 引擎都需要遍历数组中的所有现有元素，把它们的索引都加一，腾出索引为 0 的位置给新元素。对于小数组来说，这几乎是瞬间完成的，你感受不到任何延迟。但如果你的数组有成千上万个，甚至几十万个元素，并且你频繁地进行

unshift

登录后复制

操作，那么这个“挪动”的开销就会变得相当可观，可能会影响程序的性能。

那么，什么时候我们真的需要用到

unshift

登录后复制

呢？一个常见的场景是，当你需要维护一个“最新优先”的列表时。比如，一个用户最近浏览过的商品列表，你希望新浏览的商品总是显示在最前面。或者在某些日志记录的场景中，新的日志条目需要出现在列表的顶部。再比如，实现一个队列（Queue）数据结构时，虽然

push

登录后复制

和

shift

登录后复制

更常见，但如果你需要一个“先进后出”的队列（实际上更像栈，但操作方向反过来），

unshift

登录后复制

和

pop

登录后复制

就能派上用场。

不过，我个人在实际开发中，如果不是对性能有极致要求，或者确实需要修改原数组，我更倾向于使用非破坏性的方法，比如展开运算符（

...

登录后复制

）来创建一个新数组，这样可以保持数据的不可变性，尤其是在 React/Vue 这样的前端框架中，这是一种更推荐的做法。但

unshift

登录后复制

毕竟是原生方法，在特定场景下，它的直接性和简洁性依然是无可替代的。

使用 unshift 添加多个元素时有哪些注意事项？

unshift

登录后复制

方法确实很方便，可以一次性接受多个参数，将它们按照传入的顺序添加到数组的开头。例如：

myArray.unshift('itemA', 'itemB', 'itemC');

登录后复制

那么

'itemA'

登录后复制

会是新数组的第一个元素，

'itemB'

登录后复制

第二个，

'itemC'

登录后复制

第三个。这个行为是符合直觉的。

然而，正如前面提到的，性能是使用

unshift

登录后复制

时一个不容忽视的考量。每次

unshift

登录后复制

操作，无论你添加一个元素还是多个元素，数组中所有已存在的元素都需要被重新索引（简单来说就是它们的内存位置可能需要调整，或者至少它们的内部指针需要更新）。这个操作的复杂度是 O(n)，其中 n 是数组的长度。这意味着，数组越长，操作耗时越久。

阿里云-虚拟数字人

阿里云-虚拟数字人是什么？ ...

查看详情

所以，如果你的应用场景涉及：

非常大的数组：比如几十万甚至上百万条数据。
频繁地在数组开头添加元素：比如在一个循环中不断调用
```
unshift
```
登录后复制
。

那么，你可能需要重新评估

unshift

登录后复制

的适用性。在这种情况下，它可能会成为你应用的性能瓶颈。我见过不少新手开发者，不假思索地在循环里对大数组使用

unshift

登录后复制

，结果导致页面卡顿，甚至浏览器崩溃。这不是

unshift

登录后复制

的错，而是没选对工具。

一个常见的误区是，认为

unshift

登录后复制

比

push

登录后复制

更“高级”或更“灵活”。实际上，它们各有侧重。

push

登录后复制

的性能通常是 O(1)（常数时间），因为它只需要在数组末尾追加，不需要移动其他元素。因此，如果你的需求是简单地添加元素而不关心顺序，或者希望在末尾添加，

push

登录后复制

总是更优的选择。

在决定使用

unshift

登录后复制

之前，花几秒钟思考一下：这个数组有多大？我需要多频繁地在开头添加？有没有其他更高效的替代方案？这种思考习惯，能帮你避免很多潜在的性能陷阱。

除了 unshift，还有哪些方法可以在数组开头添加元素？

当然有！JavaScript 提供了多种处理数组的方式，除了

unshift

登录后复制

这种直接修改原数组的方法，我们还有一些更灵活或者说更符合现代编程范式（比如函数式编程、不可变数据）的选择。

```
splice()
```
登录后复制
方法
```
splice()
```
登录后复制
是一个非常强大的数组方法，它可以用来添加、删除或替换数组中的元素。当你想在数组开头添加元素时，它可以这样用：
```
array.splice(0, 0, element1, element2, ...);
```
登录后复制
这里的
```
0
```
登录后复制
表示从索引 0 开始操作，第二个
```
0
```
登录后复制
表示删除 0 个元素（即不删除任何现有元素），后面的
```
element1, element2, ...
```
登录后复制
则是你要插入的新元素。
```
let colors = ['red', 'green'];
colors.splice(0, 0, 'blue', 'yellow');
console.log(colors); // 输出: [ 'blue', 'yellow', 'red', 'green' ]
```
登录后复制
```
splice()
```
登录后复制
的优点是它非常灵活，可以在数组的任何位置进行增删改。但缺点是，对于仅仅在开头添加元素的需求，它显得有些“重型”，语法上也不如
```
unshift
```
登录后复制
直观。而且，它同样会修改原数组。
展开运算符（Spread Syntax
```
...
```
登录后复制
）这是我个人在日常开发中，尤其是在需要保持数据不可变性时，最常推荐的方法。它不会修改原数组，而是创建一个包含新元素和原数组所有元素的新数组。
```
let numbers = [1, 2, 3];
let newNumbers = [0, ...numbers]; // 将 0 添加到 numbers 数组的前面
console.log(newNumbers); // 输出: [ 0, 1, 2, 3 ]
console.log(numbers);    // 输出: [ 1, 2, 3 ] (原数组未被修改)
```
登录后复制
如果你想添加多个元素，也是一样：
```
let letters = ['c', 'd'];
let newLetters = ['a', 'b', ...letters];
console.log(newLetters); // 输出: [ 'a', 'b', 'c', 'd' ]
```
登录后复制
这种方法的优势在于：
- 不可变性：它生成一个新数组，不触碰原数组。这在很多现代前端框架（如 React、Vuex、Redux）中是核心原则，可以避免很多难以追踪的副作用。
- 可读性：语法非常简洁直观，一眼就能看出是在数组开头添加元素。
- 灵活性：你可以轻松地组合多个数组，或者在数组的任何位置插入元素（通过与其他方法结合）。

在选择方法时，关键在于理解你的具体需求：你是需要修改原数组（原地操作），还是更倾向于创建一个新数组（不可变操作）？性能要求如何？数组的规模有多大？没有绝对的“最佳”方法，只有最适合你当前场景的方法。对我来说，如果不是为了性能优化或者特定框架要求，我会优先考虑展开运算符，因为它让代码更健壮，也更容易理解。

以上就是js 怎么用unshift向数组开头添加新元素的详细内容，更多请关注php中文网其它相关文章！