jQuery 中的 map() 与 each() 函数
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 DELFTSTACK </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 DELFSTACK
</h1>
<h3>JQuery map() Function Demo</h3>
<b>String = "delftstack.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 = "delftstack.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="Delftstack1"></div>
<div id="Delftstack2"></div>
<div id="Delftstack3"></div>
<div id="Delftstack4"></div>
<div id="Delftstack5"></div>
<script>
var Demo_Array = [ "Delftstack1", "Delftstack2", "Delftstack3", "Delftstack4", "Delftstack5" ];
var Demo_Object = { Delftstack1: 10, Delftstack2: 20, Delftstack3: 30, Delftstack4: 40, Delftstack5: 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 Delftstack1. : 10
The value is Delftstack2. : 20
The value is Delftstack3. : 30
The value is Delftstack4. : 40
The value is Delftstack5. : 50
jQuery 中 map() 和 each() 方法的区别
map() 和 each() 方法之间有几个区别：
map()方法可以用作迭代器，但它的真正用途是操作数组并返回新的数组。另一方面，each()方法是一个不可变的迭代器。- 两个函数都将回调函数作为参数。回调函数的参数位置不同。
- 在
map()中，回调函数是function(element, index){}，在each()中，回调函数是function(index, element){}。如果我们改变回调函数中参数的顺序，方法将无法正常工作。 map()方法将对数组执行一些操作并返回一个新数组。虽然each()方法可用于执行特定操作，但仍将返回原始数组。map()方法中的this关键字表示当前窗口对象，而each()方法中的this关键字表示当前元素。- 在
map()方法中无法终止迭代，而在each方法中，我们可以终止迭代。
根据用户的用例，这两种方法在 jQuery 中都很有用。如果我们想为其他方法如 filter() 和 reduce() 创建一个新数组，我们可以使用 map() 方法。
而如果我们只想对元素执行一些操作，则可以使用 each() 方法。
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook