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