异常教程

js shift（超详细）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在 JavaScript 开发中，数组操作是日常编程的核心任务之一。无论是数据筛选、元素增删，还是数据结构的动态调整，都离不开数组方法的支持。本文将聚焦一个看似简单却功能强大的方法：shift()。通过深入浅出的讲解和实际案例，帮助读者掌握这一方法的使用场景、潜在陷阱及优化技巧，尤其适合编程初学者和中级开发者夯实基础。

JavaScript 数组与基础操作

在探讨 shift() 之前，我们先回顾 JavaScript 数组的基本特性。数组是有序的、可变的数据结构，用于存储多个值。每个元素通过索引（从 0 开始）进行定位，例如：

const numbers = [10, 20, 30, 40];  
console.log(numbers[0]); // 输出：10

常见的数组操作包括：

  • 增删元素：push()（尾部添加）、pop()（尾部删除）、unshift()（头部添加）、shift()（头部删除）；
  • 遍历与筛选：forEach()、map()、filter()；
  • 重组与合并：concat()、slice()、splice()。

这些方法共同构成了 JavaScript 处理数组的核心工具箱。

shift() 方法详解

语法与参数

shift() 方法用于删除数组的第一个元素，并返回被删除的元素。其语法简洁，无需参数：

array.shift();

关键特性：

  1. 改变原数组：shift() 会直接修改调用它的数组，而非返回新数组；
  2. 返回值：返回被删除的元素。若数组为空，则返回 undefined；
  3. 重新索引：删除后，原数组的其他元素索引会自动递减。

典型用法案例

案例 1：基础使用

let fruits = ["Apple", "Banana", "Orange"];  
const removedItem = fruits.shift();  
console.log(removedItem); // 输出："Apple"  
console.log(fruits); // 输出：["Banana", "Orange"]

解释：

  • fruits.shift() 删除了第一个元素 "Apple"；
  • 数组 fruits 被修改为 ["Banana", "Orange"]；
  • 返回值 "Apple" 被赋值给 removedItem。

案例 2：空数组的边界情况

let emptyArray = [];  
const result = emptyArray.shift();  
console.log(result); // 输出：undefined  
console.log(emptyArray); // 输出：[]

注意：对空数组调用 shift() 不会报错，但返回 undefined，且数组仍为空。

案例 3：结合其他方法处理数据流

假设需要从数组头部逐个取出元素并处理：

let tasks = ["任务1", "任务2", "任务3"];  
while (tasks.length > 0) {  
  const currentTask = tasks.shift();  
  console.log(`正在处理：${currentTask}`);  
}  
// 输出：  
// 正在处理：任务1  
// 正在处理：任务2  
// 正在处理：任务3

此案例展示了 shift() 在队列模拟中的应用，通过循环不断取出数组第一个元素，实现“先进先出”的逻辑。

深入理解 shift() 的行为

1. 原数组的不可逆修改

shift() 会直接修改调用它的数组，这一特性可能带来风险。例如：

let original = [1, 2, 3];  
let copied = original; // 注意：这里只是引用赋值  
copied.shift();  
console.log(original); // 输出：[2, 3]

关键点：

  • JavaScript 中对象（如数组）是引用类型，copied 和 original 指向同一内存地址；
  • 修改 copied 后，original 也会变化。

解决方法：若需保留原数组，可先创建副本：

let copied = [...original]; // 使用展开运算符创建新数组  
copied.shift();  
console.log(original); // 输出：[1, 2, 3]

2. 性能考量

shift() 的时间复杂度为 O(n)，因为删除第一个元素后，后续所有元素的索引需重新调整。例如，一个包含 1000 个元素的数组调用 shift()，需移动 999 个元素。因此，频繁对长数组使用 shift() 可能影响性能。

3. 与 unshift() 的对比

unshift() 是 shift() 的“反向操作”，用于向数组头部添加元素：

let arr = [2, 3];  
arr.unshift(0, 1); // 返回新长度 4  
console.log(arr); // 输出：[0, 1, 2, 3]

两者的共同点是直接修改原数组，但 unshift() 的时间复杂度同样为 O(n)。

扩展知识点：相关方法与最佳实践

1. pop() 与 push()

  • pop()：删除数组最后一个元素，返回被删除的元素；
  • push()：向数组末尾添加元素。

2. slice() 与 splice() 的替代方案

若希望不修改原数组而获取删除后的新数组，可用 slice()：

let original = [1, 2, 3];  
let newArray = original.slice(1); // 从索引1开始截取  
console.log(newArray); // 输出：[2, 3]

而 splice(0,1) 可实现类似 shift() 的功能，但同样会修改原数组：

let arr = [10, 20, 30];  
arr.splice(0, 1); // 删除索引0开始的1个元素

3. 链式调用的陷阱

由于 shift() 返回删除的元素而非数组，无法直接链式调用其他方法：

// 错误示例：  
[1, 2, 3].shift().toString(); // 报错：Cannot read property 'toString' of 1

正确方式需分步操作：

let arr = [1, 2, 3];  
const firstItem = arr.shift();  
console.log(firstItem.toString()); // 输出："1"

实战场景与优化技巧

场景 1：实现队列（FIFO）

队列的核心逻辑是“先进先出”，可通过 shift() 和 push() 实现：

class Queue {  
  constructor() {  
    this.items = [];  
  }  
  enqueue(item) {  
    this.items.push(item);  
  }  
  dequeue() {  
    return this.items.shift();  
  }  
}

场景 2：处理日志的滚动截断

假设需保留最近的 100 条日志：

let logs = [];  
function addLog(message) {  
  logs.push(message);  
  if (logs.length > 100) {  
    logs.shift(); // 移除最早的一条日志  
  }  
}

性能优化建议

  • 避免对长数组频繁 shift()：若需频繁操作头部，可考虑用栈或双向链表结构；
  • 使用 unshift() + shift() 的组合：例如，用 unshift() 添加元素到头部，再 shift() 移除，实现高效队列。

结论

shift() 是 JavaScript 数组操作中不可或缺的方法，尤其在需要修改原数组头部时。通过本文的讲解，读者应能掌握其语法、潜在风险及优化策略。建议在实际开发中：

  1. 谨慎修改原数组，必要时使用副本；
  2. 结合其他方法（如 unshift()、slice()）灵活解决问题；
  3. 关注性能，避免对大数据量操作时引发的性能瓶颈。

掌握 js shift() 仅是开始，持续实践与探索 JavaScript 数组的其他方法，将帮助开发者更高效地处理复杂场景。

最新发布

查看更多文章