Funciones map() vs each() en jQuery

Sheeraz Gul 15 febrero 2024

jQuery jQuery Function

Función jQuery map()
Función jQuery each()
Diferencias entre los métodos map() y each() en jQuery

El método map() en jQuery puede traducir todos los elementos de un objeto de matriz a otra matriz de elementos. Por otro lado, el método each() especifica una función para ejecutar para cada elemento coincidente.

Este tutorial demuestra cómo usar los métodos map() y each() en jQuery.

Función jQuery `map()`

El método map() puede traducir elementos de un array u objeto a una nueva matriz. La sintaxis del método map() es:

map( array/object, callback )

Dónde:

El array/object es el que se traducirá.
El callback es la función en base a la cual se traducirá un array.

La sintaxis para la función de devolución de llamada puede ser:

Function( Object elementOfArray, Integer indexInArray ) => object

Aquí, el primer argumento es el elemento del array y el segundo argumento es el índice del array. Esta función de devolución de llamada puede devolver cualquier valor.

Devolverá un array aplanada. => se refiere a this, y => object es el objeto global.

Probemos un ejemplo que agregará 10 a cada miembro de un array de enteros usando el método 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>

El código anterior agregará 10 a cada miembro del array dada. Ver salida:

Método jQuery Map()

El método map() no solo funciona con el array de enteros, sino que también puede funcionar con cualquier tipo de array. Probemos con otro ejemplo:

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

El código anterior dividirá la cadena dada y la convertirá en un array de cada carácter concatenado con un carácter D. Ver salida:

Cadena de método jQuery Map()

Función jQuery `each()`

El método each() es una función iteradora genérica utilizada para iterar sobre arrays y objetos. Estos arrays y objetos similares son iterados por índice numérico y el otro con las propiedades nombradas.

La sintaxis de each() es:

each( array/object, callback )

Dónde:

El array/object es la matriz u objeto sobre el que iterar.
La función callback es la función que se ejecutará en cada valor.

Las funciones $(selector).each() y $.each() no son similares. La función $(selector).each() se usa para iterar solo sobre un objeto jQuery.

Por otro lado, la función $.each() se usa para iterar sobre cualquier colección, sin importar si es un array o un objeto. Probemos un ejemplo para el método 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>

El código anterior imprimirá valores de un array y un objeto juntos simultáneamente. Ver salida:

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

Diferencias entre los métodos `map()` y `each()` en jQuery

Hay varias diferencias entre los métodos map() y each():

El método map() se puede usar como un iterador, pero su uso real es manipular la matriz y devolver la nueva. Por otro lado, el método each() es un iterador inmutable.
Ambas funciones toman como parámetro la función callback. Los parámetros de las funciones de devolución de llamada tienen diferentes posiciones.
En map(), la función de devolución de llamada es función(elemento, índice){}, y en each(), la función de devolución de llamada es función(índice, elemento){}. Si cambiamos el orden de los parámetros en la función de devolución de llamada, los métodos no funcionarán correctamente.
El método map() realizará algunas operaciones en un array y devolverá un nuevo array. Mientras que el método each() se puede usar para realizar una acción en particular y seguirá devolviendo el array original.
La palabra clave this en el método map() indica el objeto de la ventana actual, mientras que la palabra clave this en el método each() indica el elemento actual.
No hay forma de terminar una iteración en el método map(), mientras que en el método each podemos terminar una iteración.

Ambos métodos son útiles en jQuery según el caso de uso del usuario. Si queremos crear un nuevo array para los otros métodos como filter() y reduce(), podemos usar el método map().

Mientras que si solo queremos realizar alguna acción sobre los elementos, entonces se puede usar el método each().

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

Función jQuery map()

Función jQuery each()

Diferencias entre los métodos map() y each() en jQuery

Artículo relacionado - jQuery Function

Función jQuery `map()`

Función jQuery `each()`

Diferencias entre los métodos `map()` y `each()` en jQuery