jQuery 中的 map() 与 each() 函数

当前位置：主页 > 学无止境 > WEB前端 >

Vue React JavaScript Angular CSS HTML

jQuery 中的 map() 与 each() 函数

作者：迹忆客最近更新：2023/03/13 浏览次数：

jQuery 中的 map() 方法可以将一个数组对象的所有项转换为另一个项数组。另一方面，each() 方法指定为每个匹配元素运行的函数。

本教程演示了如何在 jQuery 中使用 map() 和 each() 方法。

jQuery `map()` 函数

map() 方法可以将一个数组或对象的项转换为新数组。map() 方法的语法是：

map( array/object, callback )

其中，

array/object 是要被翻译的。
callback 是一个数组将被转换的函数。

回调函数的语法可以是：

Function( Object elementOfArray, Integer indexInArray ) => object

这里，第一个参数是数组的元素，第二个参数是数组的索引。这个回调函数可以返回任何值。

它将返回一个扁平数组。 => 指的是 this，=> object 是全局对象。

让我们尝试一个使用 map() 方法将 10 添加到整数数组的每个成员的示例：

<!DOCTYPE html>
<html>
<head>
    <title> jQuery map() Function Demo </title>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>

</head>
<body>

    <h1> Welcome to 迹忆客(jiyik.com) </h1>

    <h3> This is an example to use jQuery map() method </h3>
    <p> <b> The original array before using map method is: </b> [100, 110, 120, 130, 140, 150]  </p>
    <p> Click Button to run the Map() method: </p>
    <button> Click here </button>
    <p id = "para"> </p>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            var Original_Array = [100, 110, 120, 130, 140, 150];
            var New_Array = jQuery.map(Original_Array, function(add_number) {
            return add_number + 10;
            });
        document.getElementById('para').innerHTML = "<b> The new array after using map() is: </b>" + JSON.stringify(New_Array);
        });
    });
</script>
</body>

</html>

上面的代码将为给定数组的每个成员添加 10。

map() 方法不仅适用于整数数组，还适用于任何类型的数组。让我们试试另一个例子：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title> jQuery map() Function Demo </title>
    <script src="https://code.jquery.com/jquery-3.4.1.js">
    </script>

</head>

<body style="text-align:center;">

    <h1 style="color: blue">
        This is JIYIK
    </h1>

    <h3>JQuery map() Function Demo</h3>
    <b>String = "jiyik.com"</b>
    <br> <br>
    <button onclick="delftstack()">Click Here</button>
    <br> <br>
    <b id="b_id"></b>

    <script>
        function delftstack() {
            var Text_Place = document.getElementById('b_id');
            var Demo_String = "jiyik.com";
            Demo_String = Demo_String.split("");

            // Here map method will create a new array my concatenating each character from the string with D
            var New_String = jQuery.map(Demo_String, function(Array_Item) {
                return Array_Item + 'D ';
            })
            Text_Place.innerHTML = New_String;
        }
    </script>
</body>

</html>

上面的代码将拆分给定的字符串并将其转换为每个字符与字符 D 连接的数组。

jQuery `each()` 函数

each() 方法是一个通用的迭代器函数，用于迭代数组和对象。这些数组和类似对象由数字索引迭代，另一个具有命名属性。

each() 的语法是：

each( array/object, callback )

其中，

array/object 是要迭代的数组或对象。
callback 函数是将对每个值执行的函数。

$(selector).each() 和 $.each() 函数并不相似。 $(selector).each() 函数仅用于迭代 jQuery 对象。

另一方面，$.each() 函数用于迭代任何集合，无论它是数组还是对象。让我们尝试 each() 方法的示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery.each demo</title>
    <style>
    div {
        color: green;
    }

    </style>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>

<div id="Jiyik1"></div>
<div id="Jiyik2"></div>
<div id="Jiyik3"></div>
<div id="Jiyik4"></div>
<div id="Jiyik5"></div>

<script>
    var Demo_Array = [ "Jiyik1", "Jiyik2", "Jiyik3", "Jiyik4", "Jiyik5" ];
    var Demo_Object = { Jiyik1: 10, Jiyik2: 20, Jiyik3: 30, Jiyik4: 40, Jiyik5: 50 };

    jQuery.each( Demo_Array, function( x, Delft_Value ) {
        $( "#" + Delft_Value ).text( "The value is " + Delft_Value + "." );

    });

    jQuery.each( Demo_Object, function( x, Delft_Value ) {
        $( "#" + x ).append( document.createTextNode( " : " + Delft_Value ) );
    });
</script>

</body>
</html>

上面的代码将同时打印数组和对象中的值。见输出：

The value is Jiyik1. : 10
The value is Jiyik2. : 20
The value is Jiyik3. : 30
The value is Jiyik4. : 40
The value is Jiyik5. : 50

jQuery 中 `map()` 和 `each()` 方法的区别

map() 和 each() 方法之间有几个区别：

map() 方法可以用作迭代器，但它的真正用途是操作数组并返回新的数组。另一方面，each() 方法是一个不可变的迭代器。
两个函数都将回调函数作为参数。回调函数的参数位置不同。
在 map() 中，回调函数是 function(element, index){}，在 each() 中，回调函数是 function(index, element){}。如果我们改变回调函数中参数的顺序，方法将无法正常工作。
map() 方法将对数组执行一些操作并返回一个新数组。虽然 each() 方法可用于执行特定操作，但仍将返回原始数组。
map() 方法中的 this 关键字表示当前窗口对象，而 each() 方法中的 this 关键字表示当前元素。
在 map() 方法中无法终止迭代，而在 each 方法中，我们可以终止迭代。