map() vs each() Fonctions dans jQuery

Sheeraz Gul 15 février 2024

jQuery jQuery Function

Fonction jQuery map()
jQuery each() Fonction
Différences entre les méthodes map() et each() dans jQuery

La méthode map() de jQuery peut traduire tous les éléments d’un objet tableau en un autre tableau d’éléments. D’autre part, la méthode each() spécifie une fonction à exécuter pour chaque élément correspondant.

Ce tutoriel montre comment utiliser les méthodes map() et each() dans jQuery.

Fonction jQuery `map()`

La méthode map() peut traduire les éléments d’un tableau ou d’un objet en un nouveau tableau. La syntaxe de la méthode map() est :

map( array/object, callback )

Où:

Le array/objet est celui qui sera traduit.
Le callback est la fonction sur la base de laquelle un tableau sera traduit.

La syntaxe de la fonction de rappel peut être :

Function( Object elementOfArray, Integer indexInArray ) => object

Ici, le premier argument est l’élément du tableau et le deuxième argument est l’indice du tableau. Cette fonction de rappel peut renvoyer n’importe quelle valeur.

Elle retournera un tableau aplati. => fait référence à this, et => object est l’objet global.

Essayons un exemple qui ajoutera 10 à chaque membre d’un tableau d’entiers en utilisant la méthode map() :

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

Le code ci-dessus ajoutera 10 à chaque membre du tableau donné. Voir la sortie :

Méthode jQuery Map()

La méthode map() ne fonctionne pas seulement avec le tableau d’entiers mais peut également fonctionner avec n’importe quel type de tableau. Essayons un autre exemple :

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

Le code ci-dessus divisera la chaîne donnée et la convertira en un tableau de chaque caractère concaténé avec un caractère D. Voir la sortie :

Chaîne de méthode jQuery Map()

jQuery `each()` Fonction

La méthode each() est une fonction d’itération générique utilisée pour itérer sur des tableaux et des objets. Ces tableaux et objets similaires sont itérés par index numérique et l’autre avec les propriétés nommées.

La syntaxe de each() est :

each( array/object, callback )

Où:

Le array/object est le tableau ou l’objet sur lequel itérer.
La fonction callback est la fonction qui sera exécutée sur chaque valeur.

Les fonctions $(selector).each() et $.each() ne sont pas similaires. La fonction $(selector).each() est utilisée pour itérer uniquement sur un objet jQuery.

D’autre part, la fonction $.each() est utilisée pour itérer sur n’importe quelle collection, qu’il s’agisse d’un tableau ou d’un objet. Essayons un exemple pour la méthode 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>

Le code ci-dessus imprimera simultanément les valeurs d’un tableau et d’un objet. Voir la sortie :

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

Différences entre les méthodes `map()` et `each()` dans jQuery

Il existe plusieurs différences entre les méthodes map() et each() :

La méthode map() peut être utilisée comme itérateur, mais son utilisation réelle est de manipuler le tableau et de renvoyer le nouveau. En revanche, la méthode each() est un itérateur immuable.
Les deux fonctions prennent la fonction callback en paramètre. Les paramètres des fonctions de rappel ont des positions différentes.
Dans map(), la fonction de rappel est function(element, index){}, et dans each(), la fonction de rappel est function(index, element){}. Si nous modifions l’ordre des paramètres dans la fonction de rappel, les méthodes ne fonctionneront pas correctement.
La méthode map() effectuera certaines opérations sur un tableau et retournera un nouveau tableau. Alors que la méthode each() peut être utilisée pour effectuer une action particulière et renverra toujours le tableau d’origine.
Le mot-clé this dans la méthode map() désigne l’objet de la fenêtre courante, tandis que le mot-clé this dans la méthode each() désigne l’élément courant.
Il n’y a aucun moyen de terminer une itération dans la méthode map(), alors que dans la méthode each, on peut terminer une itération.

Les deux méthodes sont utiles dans jQuery en fonction du cas d’utilisation de l’utilisateur. Si nous voulons créer un nouveau tableau pour les autres méthodes comme filter() et reduce(), nous pouvons utiliser la méthode map().

Alors que si nous voulons seulement effectuer une action sur les éléments, alors la méthode each() peut être utilisée.

Auteur: 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

Fonction jQuery map()

jQuery each() Fonction

Différences entre les méthodes map() et each() dans jQuery

Article connexe - jQuery Function

Fonction jQuery `map()`

jQuery `each()` Fonction

Différences entre les méthodes `map()` et `each()` dans jQuery