.unshift() 是 JavaScript 数组（Array）的一个内置方法，用于在数组的开头插入一个或多个元素，并返回修改后数组的新长度。

以下是详细说明：

1. 基本语法

const newLength = array.unshift(element1, element2, ..., elementN);

• 参数：要添加到数组开头的元素（可接受多个参数）
• 返回值：操作后数组的新长度（length）

2. 核心特性

3. 使用示例

示例1：插入单个元素

const fruits = ['apple', 'banana'];
const length = fruits.unshift('orange');

console.log(fruits);  // 输出: ['orange', 'apple', 'banana']
console.log(length);  // 输出: 3

示例2：插入多个元素

const numbers = [3, 4];
numbers.unshift(1, 2); // 可链式传参

console.log(numbers); // 输出: [1, 2, 3, 4]

示例3：与 push() 对比

const arr = [3];
arr.unshift(1, 2); // 头部插入 → [1, 2, 3]
arr.push(4, 5);    // 尾部插入 → [1, 2, 3, 4, 5]

4. 与其他方法的区别

5. 特殊场景处理

场景1：空数组调用

const emptyArr = [];
emptyArr.unshift('a'); // 返回 1，数组变为 ['a']

场景2：非数组对象调用

const obj = { length: 0 };
Array.prototype.unshift.call(obj, 'hello'); // 类数组对象也可使用
console.log(obj); // 输出: { 0: 'hello', length: 1 }

6. 性能注意事项

• 时间复杂度：O(n)（需移动所有现有元素）
• 优化建议：
  • 大型数组优先考虑从尾部操作（push/pop 性能更高）
  • 需要批量插入时，可先用 concat 合并再赋值：

    const arr = [3, 4];
    arr = [1, 2].concat(arr); // 替代 unshift(1, 2)

7. 在Vue/React中的使用

由于 .unshift() 直接修改原数组，在响应式框架中需注意：

Vue 示例

export default {
  data() {
    return { list: ['b', 'c'] };
  },
  methods: {
    addItem() {
      this.list.unshift('a'); // 自动触发视图更新（Vue对数组方法做了劫持）
    }
  }
};

React 示例

function MyComponent() {
  const [list, setList] = useState(['b', 'c']);

  const addItem = () => {
    setList(prev => ['a', ...prev]); // 推荐使用不可变数据
    // 或：
    const newList = ['a', ...list];
    setList(newList);
  };
}

总结

.unshift() 是操作数组头部的高效工具，但需注意：

1. 明确其修改原数组的特性
2. 在响应式框架中遵循数据不可变原则
3. 避免在超大型数组中频繁使用

如需纯函数版本，可用扩展运算符实现：

const newArr = ['newItem', ...originalArr]; // 等效于不修改原数组的 unshift