【Java 进阶篇】JQuery 遍历 —— 无尽可能性的 `each` 之旅

在这里插入图片描述

在前端的征途中，操作元素是开发者不可避免的任务之一。而在 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 循环可能更为合适。希望通过本文的学习，你能更加熟练地运用这两种遍历方式，让你的前端代码更加出色。加油，少年！在无尽的遍历之旅中，愿你发现更多的乐趣和技巧。