JavaScript 数组操作中，有一个看似简单却非常强大的方法——unshift() 。它能帮助我们将元素添加到数组的开头，简单高效，让数组操作更灵活。然而，这个小小的函数背后，却隐藏着许多值得探索的秘密。
今天，我们不仅要讲解 unshift() 的基本用法，更要带你手撕实现这个方法，探索它的工作原理。
什么是 unshift()？
在 JavaScript 中，unshift() 方法是数组的一个重要成员，它将一个或多个元素添加到数组的最前面，并返回新的数组长度。简单来说，unshift() 就是把元素塞到数组的头部，然后更新数组的结构。
最基础的用法
const arr = [2, 3, 4];
const newLength = arr.unshift(1); // 在开头添加元素 1
console.log(arr); // 输出：[1, 2, 3, 4]
console.log(newLength); // 输出：4，表示新数组的长度
一次添加多个元素
const arr = [3, 4];
arr.unshift(1, 2); // 在开头添加多个元素
console.log(arr); // 输出：[1, 2, 3, 4]
unshift() 真的如此简单吗？
当然不！
虽然 unshift() 方法看起来简单，但它背后其实涉及到数组的重新排列。每次向开头添加元素时，数组中其他元素都要向后移动，这就像是一场“小型的移位大作战”。这个操作不仅会影响数组本身的结构，甚至可能导致性能瓶颈，尤其在数组很大时。
手撕 unshift()：从零实现！
接下来，让我们动手实现一个简化版的 unshift() 方法。不依赖现成的工具，自己动手实现它的核心逻辑，让我们更深入地理解它的工作原理。
核心实现
function customUnshift(array, ...elements) {
// 创建一个新数组，首先加入新的元素
const newArray = [...elements];
// 将原数组的元素依次添加到新数组后面
for (let i = 0; i < array.length; i++) {
newArray.push(array[i]);
}
// 清空原数组
array.length = 0;
// 将新数组的元素赋值给原数组
for (let i = 0; i < newArray.length; i++) {
array[i] = newArray[i];
}
// 返回新数组的长度
return array.length;
}
测试我们的 customUnshift()
const arr = [3, 4];
const length = customUnshift(arr, 1, 2); // 添加 1 和 2 到数组开头
console.log(arr); // 输出：[1, 2, 3, 4]
console.log(length); // 输出：4，表示新数组的长度
与原生 unshift() 的比较
我们的 customUnshift() 方法实现了和原生 unshift() 相同的功能。但效率上，原生 unshift() 由于是 JavaScript 内置的优化函数，其性能更好，尤其在处理大数组时，原生方法会更快。
为什么这么做？
因为每次向数组开头添加元素，实际上都会导致数组中其余元素的重新排列。这背后的代价，就是每次插入都会导致“数组移动” ，而这种操作的复杂度是 O(n)，数组越大，移动的成本越高。
总结：小小 unshift()，大大智慧！
通过今天的学习，我们不仅掌握了 unshift() 的用法，还手动实现了它的核心逻辑。在实现的过程中，我们更加清晰地理解了数组的原理，并深刻意识到每个看似简单的操作背后都蕴藏着复杂的运算和性能考量。
从零实现 unshift()，不仅是对方法的理解，更是对 JavaScript 数组操作本质的深度挖掘。
希望你也能像小小的 unshift() 一样，在编程的世界中，始终保持对细节的关注和对效率的追求！
