HOWTO · jQuery
jQuery 中的 map() 與 each() 函式
本教程演示了 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() 方法。
