如何在JavaScript中将元素添加到数组开头：深入解析底层原理

引言：为什么这个问题在Stack Overflow上获得了数千次浏览

每个写过JavaScript的人，都曾与数组打过交道。它们无处不在：商品列表、任务队列、用户操作历史。迟早都会遇到这个问题：“如何在JavaScript中将元素添加到数组开头？” 在Stack Overflow上，这个问题获得了数十万次浏览，答案也有几十个。为什么？因为看似简单的操作背后，隐藏着从性能到引擎内部机制的一整套知识体系。

在本文中，我们不仅会展示unshift()。我们还将深入“底层”：V8引擎如何处理开头插入，为什么unshift可能比push慢，以及针对不同场景有哪些替代方案。开始吧！

基本方法：unshift()方法

最直观且最常用的方法是使用内置的unshift()方法。它可以将一个或多个元素添加到数组的开头，并返回数组的新长度。

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

也可以一次添加多个元素：

let numbers = [3, 4, 5];numbers.unshift(1, 2);console.log(numbers); // [1, 2, 3, 4, 5]

到此为止似乎就可以结束了。但让我们深入了解一下，当我们调用unshift()时，内部究竟发生了什么。

unshift()的底层工作原理：V8视角

JavaScript中的数组并不仅仅是像C语言那样的连续内存块。在现代引擎中（Chrome/Node.js中的V8，Firefox中的SpiderMonkey），数组可以通过两种方式实现：

• 快速元素（密集数组） — 类似C风格的连续缓冲区。对于按索引读写操作来说是最优的。
• 字典元素（稀疏数组） — 哈希表。当数组变得“稀疏”（存在索引空缺）或过大时使用。

当你在快速数组上调用unshift()时，引擎会执行以下操作：

1. 分配新的内存（或移动现有内存），大小为要添加的元素数量。
2. 将所有现有元素向右移动n个位置。
3. 将新元素写入开头空出的位置。

为什么unshift比push慢？

push()方法将元素添加到末尾——它不需要移动任何元素。而unshift()需要为每个现有元素重新分配索引。如果数组中有1000个元素，unshift必须移动全部1000个。而push只是简单地追加到末尾。

在V8中有一个优化：如果数组为空或几乎为空，移动操作几乎是无成本的。但对于大型数组，性能差异可能达到数十倍。特别是在循环中反复执行unshift时。

// 糟糕：由于持续移动，时间复杂度为O(n²)let arr = [];for (let i = 0; i < 10000; i++) {  arr.unshift(i);}

// 良好：时间复杂度为O(n) — 先添加到末尾，再反转let arr2 = [];for (let i = 0; i < 10000; i++) {  arr2.push(i);}arr2.reverse();

替代方案：扩展运算符（ES6+）

一种现代且优雅的方式是使用扩展运算符...来创建新数组：

let oldArray = [2, 3, 4];let newArray = [1, ...oldArray];console.log(newArray); // [1, 2, 3, 4]

这种方法不会改变原数组，这在函数式编程（React、Redux）中通常很方便。但请记住：会创建一个新数组，并且旧元素会被复制。对于非常大的数组，这可能会占用大量内存。

在开头添加多个元素

let base =