在前端的征途中，操作元素是开发者不可避免的任务之一。而在 JQuery 中，each 方法则是处理这个任务的得力助手。本文将深入探讨 each 方法的奇妙之处，以及它与原生的 for...of 循环的关系，带你领略无尽可能性的遍历之旅。
起步：重新认识 each
在 JQuery 中，each 方法是一种遍历集合的强大方式。它允许你对集合中的每个元素执行特定的操作，是一种高度灵活的遍历工具。首先，我们来看一下 each 方法的基本语法：
$.each(collection, function(index, value) {
// 对每个元素执行的操作
});-
collection：要遍历的集合，可以是数组、对象或类数组对象。 -
function(index, value)：在集合中每个元素上执行的函数，其中index是元素的索引，value是元素的值。
each 方法的真正妙处在于它的灵活性。无论是数组、对象还是其他类型的集合，each 都能游刃有余地完成遍历任务。
用代码感受 each 的魔法
首先，我们通过一个简单的例子来感受一下 each 方法的神奇之处。在这个例子中，我们有一个包含数字的数组，我们将使用 each 方法遍历数组，并将每个数字输出到控制台：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery each 方法示例</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
// 定义一个包含数字的数组
var numbers = [1, 2, 3, 4, 5];
// 使用 each 方法遍历数组
$.each(numbers, function(index, value) {
// 输出每个数字到控制台
console.log("第" + (index + 1) + "个数字是：" + value);
});
});
</script>
</body>
</html>在这个例子中，我们通过 each 方法遍历了 numbers 数组，并使用回调函数输出了每个数字到控制台。这展示了 each 方法的简单用法，但实际上它的应用远不止于此。
更进一步：each 的无限可能
1. 遍历数组
each 方法对数组的遍历是最为直观的。在下面的例子中，我们使用 each 方法遍历一个包含颜色名称的数组，并在页面上创建对应颜色的块元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery each 方法示例</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
.color-block {
width: 100px;
height: 100px;
margin: 5px;
display: inline-block;
}
</style>
</head>
<body>
<script>
$(document).ready(function() {
// 定义一个包含颜色名称的数组
var colors = ["red", "green", "blue", "yellow", "purple"];
// 使用 each 方法遍历数组，并创建对应颜色的块元素
$.each(colors, function(index, value) {
// 创建块元素
var block = $("<div></div>").addClass("color-block").css("background-color", value);
// 在 body 中追加块元素
$("body").append(block);
});
});
</script>
</body>
</html>在这个例子中，我们使用 each 方法遍历了 colors 数组，并根据每个颜色创建了一个块元素。通过这样的方式，我们可以动态地生成页面上的元素，而不需要手动编写每个元素的代码。
2. 遍历对象
each 方法不仅可以用于数组，还可以用于遍历对象的属性。在下面的例子中，我们有一个包含学生信息的对象，我们使用 each 方法遍历这个对象，并在页面上显示学生的姓名和年龄：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery each 方法示例</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
// 定义一个包含学生信息的对象
var students = {
student1: { name: "Alice", age: 20 },
student2: { name: "Bob", age: 22 },
student3: { name: "Charlie", age: 21 }
};
// 使用 each 方法遍历对象，并显示学生的姓名和年龄
$.each(students, function(studentId, studentInfo) {
// 创建包含学生信息的字符串
var studentString = "学生ID：" + studentId + "，姓名：" + studentInfo.name + "，年龄：" + studentInfo.age;
// 在 body 中追加包含学生信息的段落
$("body").append("<p>" + studentString + "</p>
}
}
</script>
</body>
</html>3. 修改元素属性
each 方法不仅可以用于遍历集合，还可以在遍历的过程中修改元素的属性。在下面的例子中，我们使用 each 方法遍历包含图片路径的数组，并将这些路径应用到页面上的图片元素的 src 属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery each 方法示例</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<img id="image1" alt="Image 1">
<img id="image2" alt="Image 2">
<img id="image3" alt="Image 3">
<script>
$(document).ready(function() {
// 定义一个包含图片路径的数组
var imagePaths = ["path/to/image1.jpg", "path/to/image2.jpg", "path/to/image3.jpg"];
// 使用 each 方法遍历数组，并修改图片元素的 src 属性
$.each(imagePaths, function(index, path) {
// 构建图片元素的 ID
var imageId = "image" + (index + 1);
// 修改图片元素的 src 属性
$("#" + imageId).attr("src", path);
});
});
</script>
</body>
</html>在这个例子中，我们定义了一个包含图片路径的数组 imagePaths，然后使用 each 方法遍历了这个数组。在遍历的过程中，我们通过拼接字符串构建了每个图片元素的 ID，然后使用 attr 方法修改了图片元素的 src 属性。
更多可能性：全局 each 与原生 for...of
在介绍全局 each 之前，我们先来了解一下原生的 for...of 循环。for...of 是 ECMAScript 6 新增的一种遍历集合的方式，它更加直观和语义化。下面是一个简单的例子：
// 遍历数组
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
console.log(number);
}
// 遍历字符串
const str = "Hello";
for (const char of str) {
console.log(char);
}
// 遍历 Map
const myMap = new Map();
myMap.set("a", 1);
myMap.set("b", 2);
for (const [key, value] of myMap) {
console.log(key, value);
}这里我们通过 for...of 循环遍历了数组、字符串和 Map 对象。它的语法简洁，代码可读性强。
全局 each
JQuery 的 each 方法是基于回调函数的遍历方式，而全局的 each 是一种无需回调函数的遍历方式，它允许你直接在集合上执行操作。全局 each 的语法如下：
$.each(collection, function(index, value) {
// 对每个元素执行的操作
});相比于 for...of，全局 each 语法稍显繁琐。但它仍然是一种灵活、强大的遍历方式。下面通过示例演示全局 each 的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全局 each 示例</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
// 遍历数组
$.each([1, 2, 3, 4, 5], function(index, value) {
console.log("数组元素索引：" + index + "，值：" + value);
});
// 遍历对象
$.each({ a: 1, b: 2, c: 3 }, function(key, value) {
console.log("对象属性名：" + key + "，值：" + value);
});
// 遍历类数组对象
$.each(document.querySelectorAll('p'), function(index, element) {
console.log("段落索引：" + index + "，文本内容：" + element.textContent);
});
});
</script>
</body>
</html>在这个例子中，我们分别使用全局 each 遍历了数组、对象和文档中的段落元素。这展示了全局 each 的灵活性，无论是数组、对象还是类数组对象，都能轻松应对。
比较全局 each 与原生 for...of
- 可读性：
for...of循环更加直观和语义化，尤其适用于数组和可迭代对象的遍历。全局each在遍历数组时需要添加一个回调函数，可能稍显繁琐。 - 适用范围：
for...of循环适用于所有可迭代对象，包括数组、字符串、Map 等。全局each更加灵活，可以遍历数组、对象、类数组对象等，但在语义上更偏向于数组和类数组对象的遍历。 - 语法差异：
for...of循环的语法相对简单，不需要引入 JQuery。全局each需要引入 JQuery，并且语法稍显繁琐。
小结
通过本文的介绍，你应该对 each 方法及全局 each 有了更深入的了解。它们是 JQuery 中非常有用的工具，能够帮助你轻松地遍历集合，并在遍历的过程中执行各种操作。无论是数组、对象还是其他类数组对象，each 方法都能胜任。全局 each 则提供了一种无需回调函数的遍历方式，更加灵活。
在实际开发中，选择使用 each 还是原生的 for...of 取决于具体的需求和个人偏好。在遍历数组时，特别是在 JQuery 已经被使用的项目中，each 无疑是一个强大而方便的选择。而在新项目中，或者需要遍历各种可迭代对象时，原生的 for...of 循环可能更为合适。希望通过本文的学习，你能更加熟练地运用这两种遍历方式，让你的前端代码更加出色。加油，少年！在无尽的遍历之旅中，愿你发现更多的乐趣和技巧。
作者信息 作者 ： 繁依Fanyi
|
