jQuery.each()方法（长文解析）

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代Web开发中，jQuery.each()方法是开发者最常使用的工具之一。无论是遍历数组、处理DOM元素，还是操作复杂对象，它都能以简洁优雅的方式完成任务。然而，许多开发者在初次接触这一方法时，可能会被其灵活的语法和应用场景所困惑。本文将从基础到进阶，通过实际案例和生动比喻，帮助你彻底掌握jQuery.each()方法的核心逻辑与使用技巧。

一、为什么需要jQuery.each()方法？

1.1 JavaScript原生遍历的局限性

在没有jQuery之前，JavaScript开发者通常使用for循环或Array.forEach()来遍历数据。然而，这些原生方法存在一些痛点：

• 代码冗余：处理复杂对象或嵌套结构时，需要编写大量重复代码。
• 兼容性问题：部分浏览器对原生方法的支持不一致，导致维护成本高。
• 功能单一：无法直接操作DOM元素或处理对象属性。

1.2 jQuery.each()的优势

jQuery.each()方法完美解决了上述问题：

• 统一接口：无论是遍历数组、对象还是DOM集合，均可通过相同语法实现。
• 扩展性强：支持在循环体内直接操作数据或DOM元素。
• 简洁易读：通过函数式编程风格，减少代码量并提升可维护性。

比喻：
想象你是一名快递分拣员，需要将包裹按地址分类。原生方法就像手动逐个检查包裹，而**jQuery.each()**则像一台自动化分拣机器——它自动识别包裹类型（数组/对象/DOM），并帮你高效处理每一个包裹。

二、基础语法与核心概念

2.1 语法结构

jQuery.each()方法有两种主要形式，分别用于遍历对象和数组/集合：

// 遍历对象  
jQuery.each( object, callback(indexOrKey, value) );  

// 遍历数组或集合  
jQuery.each( array, callback(index, value) );  

2.2 关键参数解释

2.3 返回值与终止循环

• 返回值：返回原始传入的集合（对象或数组）。
• 终止循环：在回调函数中返回 false 可立即跳出循环；返回 true则继续下一个迭代。

三、对象遍历：像解谜一样操作键值对

3.1 对象遍历的核心逻辑

当遍历对象时，jQuery.each()会按属性键名逐个访问值。例如：

const person = {  
  name: "Alice",  
  age: 25,  
  skills: ["JavaScript", "jQuery"]  
};  

jQuery.each(person, function(key, value) {  
  console.log(`Key: ${key}, Value: ${value}`);  
});  

// 输出：  
// Key: name, Value: Alice  
// Key: age, Value: 25  
// Key: skills, Value: ["JavaScript", "jQuery"]  

3.2 实际案例：表单数据验证

假设需要遍历表单字段并验证是否为空：

<form id="myForm">  
  <input name="username" required>  
  <input name="email" required>  
  <button>Submit</button>  
</form>  

<script>  
jQuery("#myForm").submit(function(e) {  
  e.preventDefault();  
  jQuery.each(jQuery(this).serializeArray(), function() {  
    if (this.value.trim() === "") {  
      alert(`字段 ${this.name} 不能为空！`);  
      return false; // 终止循环  
    }  
  });  
});  
</script>  

关键点：

• 使用serializeArray()将表单数据转换为对象数组。
• 通过return false快速终止循环，避免冗余检查。

四、数组遍历：从简单到复杂的场景

4.1 基础数组遍历

遍历数字索引的数组：

const numbers = [10, 20, 30];  
jQuery.each(numbers, function(index, value) {  
  console.log(`索引 ${index} 的值为 ${value}`);  
});  
// 输出：索引 0 的值为 10，索引 1 的值为 20，索引 2 的值为 30  

4.2 结合DOM操作：动态生成列表

假设需要根据数据数组动态渲染HTML列表：

const items = ["苹果", "香蕉", "橙子"];  
const $list = jQuery("#fruitList");  

jQuery.each(items, function(index, fruit) {  
  $list.append(`<li>${fruit}</li>`);  
});  

4.3 多维数组与嵌套遍历

处理嵌套数组时，可结合this关键字获取当前上下文：

const matrix = [  
  [1, 2],  
  [3, 4]  
];  

jQuery.each(matrix, function(rowIndex, row) {  
  jQuery.each(row, function(colIndex, value) {  
    console.log(`行 ${rowIndex}, 列 ${colIndex}: ${value}`);  
  });  
});  

五、进阶技巧：让each方法更强大

5.1 处理类似数组的集合

DOM元素集合（如jQuery("div")返回的节点）本质上是类似数组的对象，可用jQuery.each()直接遍历：

jQuery("div").each(function(index, element) {  
  // element 等同于 this  
  console.log(jQuery(this).text());  
});  

5.2 返回值与链式调用

由于jQuery.each()返回原始集合，可以轻松实现链式调用：

jQuery("input")  
  .each(function() {  
    this.value = "已重置";  
  })  
  .css("background", "#ffffcc"); // 继续操作  

5.3 与原生方法的对比

对比Array.forEach()和jQuery.each()：

// 原生方法  
[1,2,3].forEach((value, index) => { ... });  

// jQuery方法  
jQuery.each([1,2,3], function(index, value) { ... });  

区别：

• this指向：在jQuery.each()中，this指向当前元素；而原生forEach中this指向调用上下文。
• 终止循环：jQuery通过return false，原生需抛出异常。

六、常见问题与最佳实践

6.1 如何区分对象和数组遍历？

• 对象遍历：键名是字符串（如"name"）。
• 数组遍历：键名是数字索引（如0, 1）。

6.2 性能优化建议

• 避免在回调中执行耗时操作，否则会影响UI响应。
• 优先使用原生方法处理纯数组，因Array.forEach()通常更快。

6.3 与.map()方法的区别

jQuery.map()用于转换数据并返回新数组，而each()仅用于遍历执行操作：

const doubled = jQuery.map([1,2,3], function(n) { return n*2 }); // [2,4,6]  

结论

通过本文，你已掌握jQuery.each()方法的核心用法、应用场景及进阶技巧。从基础遍历到DOM操作，从对象解析到数组处理，这一方法始终是提升代码效率和可读性的利器。

记住：

• 对象遍历时，键名是你的“导航地图”；
• 数组遍历时，索引是你的“计数器”；
• return false是循环的“紧急刹车键”。

下次当你面对复杂数据结构时，不妨让jQuery.each()方法成为你的得力助手——它或许不会像快递分拣机器那样轰鸣作响，但一定能帮你优雅地完成每一项任务。

（全文约1800字）