unshift 方法用于在数组开头添加一个或多个元素，并返回新数组长度，1. 它直接修改原数组；2. 添加的元素按传入顺序置于最前；3. 每次调用需重新索引所有现有元素，性能为 o(n)，大数组频繁操作时可能造成性能问题；4. 适用于需“最新优先”展示的场景，如最近浏览记录；5. 替代方案包括 splice()（灵活但语法复杂）和展开运算符（…），后者更推荐用于保持数据不可变性，尤其在 react/vue 等框架中。选择方法应基于是否需修改原数组、性能需求及代码可维护性。
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向数组开头添加新元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516775.html
微信扫一扫 
支付宝扫一扫 
