HOWTO · jQuery
jQuery の map()関数と each()関数の比較
このチュートリアルでは、jQuery の map()関数と each()関数の使用法と違いを示します。
このページの内容
jQuery の map() メソッドは、配列オブジェクトのすべての項目を別の項目の配列に変換できます。一方、each() メソッドは、一致した要素ごとに実行する関数を指定します。
このチュートリアルでは、jQuery で map() および each() メソッドを使用する方法を示します。
jQuery map() 関数
map() メソッドは、1つの配列またはオブジェクトのアイテムを新しい配列に変換できます。map() メソッドの構文は次のとおりです。
map( array/object, callback )
ここで
array/objectは翻訳されるものです。callbackは、配列が変換される基準となる関数です。
コールバック関数の構文は次のとおりです。
Function( Object elementOfArray, Integer indexInArray ) => object
ここで、最初の引数は配列の要素であり、2 番目の引数は配列のインデックスです。このコールバック関数は任意の値を返すことができます。
フラット化された配列を返します。 => は 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() メソッドを使用できます。
