map() vs each() Funktionen in jQuery

Sheeraz Gul 15 Februar 2024

jQuery jQuery Function

jQuery-Funktion map()
jQuery each() Funktion
Unterschiede zwischen den Methoden map() und each() in jQuery

Die Methode map() in jQuery kann alle Elemente eines Array-Objekts in ein anderes Array von Elementen übersetzen. Andererseits gibt die each()-Methode eine Funktion an, die für jedes übereinstimmende Element ausgeführt werden soll.

Dieses Tutorial demonstriert die Verwendung der Methoden map() und each() in jQuery.

jQuery-Funktion `map()`

Die Methode map() kann Elemente eines Arrays oder Objekts in ein neues Array übersetzen. Die Syntax für die Methode map() lautet:

map( array/object, callback )

Wo:

Das array/object wird übersetzt.
Der callback ist die Funktion, auf deren Basis ein Array übersetzt wird.

Die Syntax für die Callback-Funktion kann sein:

Function( Object elementOfArray, Integer indexInArray ) => object

Hier ist das erste Argument das Element des Arrays und das zweite Argument der Index des Arrays. Diese Callback-Funktion kann einen beliebigen Wert zurückgeben.

Es wird ein abgeflachtes Array zurückgegeben. => bezieht sich auf this und => object ist das globale Objekt.

Versuchen wir ein Beispiel, das jedem Mitglied eines Integer-Arrays 10 hinzufügt, indem die Methode map() verwendet wird:

<!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>

Der obige Code fügt jedem Mitglied des angegebenen Arrays 10 hinzu. Siehe Ausgabe:

jQuery Map()-Methode

Die Methode map() funktioniert nicht nur mit dem Integer-Array, sondern mit jeder Art von Array. Versuchen wir es mit einem anderen Beispiel:

<!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>

Der obige Code teilt die angegebene Zeichenfolge auf und konvertiert sie in ein Array aus jedem Zeichen, das mit einem Zeichen D verkettet ist. Siehe Ausgabe:

jQuery Map()-Methodenstring

jQuery `each()` Funktion

Die each()-Methode ist eine generische Iteratorfunktion, die verwendet wird, um über Arrays und Objekte zu iterieren. Diese Arrays und ähnliche Objekte werden durch den numerischen Index und die anderen mit den benannten Eigenschaften iteriert.

Die Syntax für each() lautet:

each( array/object, callback )

Wo:

Das Array/Objekt ist das Array oder Objekt, über das iteriert werden soll.
Die callback-Funktion ist die Funktion, die für jeden Wert ausgeführt wird.

Die Funktionen $(selector).each() und $.each() sind nicht ähnlich. Die Funktion $(selector).each() wird verwendet, um nur über ein jQuery-Objekt zu iterieren.

Andererseits wird die Funktion $.each() verwendet, um über eine beliebige Sammlung zu iterieren, egal ob es sich um ein Array oder ein Objekt handelt. Versuchen wir ein Beispiel für die Methode 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>

Der obige Code druckt gleichzeitig Werte aus einem Array und einem Objekt zusammen. Siehe Ausgabe:

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

Unterschiede zwischen den Methoden `map()` und `each()` in jQuery

Es gibt mehrere Unterschiede zwischen den Methoden map() und each():

Die Methode map() kann als Iterator verwendet werden, aber ihre eigentliche Verwendung besteht darin, das Array zu manipulieren und das neue zurückzugeben. Andererseits ist die each()-Methode ein unveränderlicher Iterator.
Beide Funktionen nehmen die Callback-Funktion als Parameter. Die Parameter der Callback-Funktionen haben unterschiedliche Positionen.
In map() ist die Callback-Funktion function(element, index){} und in each() ist die Callback-Funktion function(index, element){}. Wenn wir die Reihenfolge der Parameter in der Callback-Funktion ändern, funktionieren die Methoden nicht richtig.
Die Methode map() führt einige Operationen an einem Array aus und gibt ein neues Array zurück. Während die Methode each() verwendet werden kann, um eine bestimmte Aktion auszuführen, gibt sie immer noch das ursprüngliche Array zurück.
Das Schlüsselwort this in der Methode map() bezeichnet das aktuelle Fensterobjekt, während das Schlüsselwort this in der Methode each() das aktuelle Element bezeichnet.
Es gibt keine Möglichkeit, eine Iteration in der map()-Methode zu beenden, während wir in der each-Methode eine Iteration beenden können.

Beide Methoden sind je nach Anwendungsfall des Benutzers in jQuery nützlich. Wenn wir für die anderen Methoden wie filter() und reduce() ein neues Array erstellen wollen, können wir die Methode map() verwenden.

Wenn wir nur einige Aktionen an den Elementen ausführen möchten, kann die Methode each() verwendet werden.

Autor: Sheeraz Gul

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

jQuery-Funktion map()

jQuery each() Funktion

Unterschiede zwischen den Methoden map() und each() in jQuery

Verwandter Artikel - jQuery Function

jQuery-Funktion `map()`

jQuery `each()` Funktion

Unterschiede zwischen den Methoden `map()` und `each()` in jQuery