Método JavaScript Array map() – Part 1

A continuación se muestra un ejemplo del método  Array map() .
 

Ejemplo: 
 

<script>
    // JavaScript to illustrate map() method
    function func() {
        // Original array
        var arr = [14, 10, 11, 00];
 
        // new mapped array
        var new_arr = arr.map(Math.sqrt);
        document.write(new_arr);
    }
    func();
</script>

 Producción: 
 

3.7416573867739413,3.1622776601683795,
3.3166247903554,0

El método arr.map() crea una nueva array con los resultados de una función llamada para cada elemento de la array. Esta función llama a la función de argumento una vez para cada elemento de la array dada en orden. 
Sintaxis: 
 

array.map(callback(element, index, arr), thisArg)

Parámetros: este método acepta cinco parámetros, como se mencionó anteriormente y se describe a continuación: 
 

• devolución de llamada: este parámetro contiene la función que se llamará para cada elemento de la array.
• elemento: el parámetro contiene el valor de los elementos que se están procesando actualmente.
• index: este parámetro es opcional, contiene el índice del elemento currentValue en la array a partir de 0.
• arr: este parámetro es opcional, contiene la array completa en la que se llama a Array.every.
• thisArg: este parámetro es opcional, contiene el contexto que se pasará como este para usarse mientras se ejecuta la función de devolución de llamada. Si se pasa el contexto, se usará así para cada invocación de la función de devolución de llamada; de lo contrario, se usa undefined como valor predeterminado.

Valor devuelto: este método devuelve una nueva array creada usando los valores modificados por la función arg usando el valor de la array original. Esta función no modifica la array original en la que se implementa esta función.
Los siguientes ejemplos ilustran el método arr.map() en JavaScript: 
 

Ejemplo 1: En este ejemplo, el método map() produce una array que contiene números obtenidos al dividir los números de la array original por 2.
 

var arr = [2, 56, 78, 34, 65];
var new_arr = arr.map(function(num) {
  return num / 2;
});
print(new_arr);

Producción: 
 

[1, 28, 39, 17, 32.5]

Ejemplo 2: En este ejemplo, el método map() produce una array que contiene raíces cuadradas de los números de la array original. 
 

var arr = [10, 64, 121, 23];
var new_arr = arr.map(Math.sqrt);
print(new_arr);

Producción: 
 

[3.1622776601683795, 8, 11, 4.795831523312719]

Los códigos para la función anterior se proporcionan a continuación:
Programa 1: 
 

<script>
    // JavaScript to illustrate map() method
    function func() {
        // Original array
        var arr = [2, 56, 78, 34, 65];
 
        // new mapped array
        var new_arr = arr.map(function (num) {
            return num / 2;
        });
 
        document.write(new_arr);
    }
    func();
</script>

Producción: 
 

1, 28, 39, 17, 32.5

Programa 2: 
 

<script>
    // JavaScript to illustrate map() method
    function func() {
        // Original array
        var arr = [10, 64, 121, 23];
 
        // new mapped array
        var new_arr = arr.map(Math.sqrt);
        document.write(new_arr);
    }
    func();
</script>

Producción: 
 

3.1622776601683795, 8, 11, 4.795831523312719

Navegadores compatibles: los navegadores compatibles con el método JavaScript Array map() se enumeran a continuación: 
 

• Google Chrome 1 y superior
• Microsoft Edge 12 y superior
• Mozilla Firefox 1.5 y superior
• Safari 3 y superior
• Ópera 9.5 y superior

polirelleno

Polyfills son los códigos que se utilizan en lugar de cualquier función que no admita navegadores antiguos. 

Supongamos que un navegador antiguo no está actualizado con las nuevas funciones de ES, entonces su código se romperá en ese navegador.

Aquí estamos creando un polyfill de la función Array.prototype.map(). Los pasos son los siguientes.

Pasos :

• Compruebe si el navegador es compatible con la función map() o no.
• Ahora cree una expresión de función y asígnela a Array.prototype.map y la función tomará un argumento.
• Crea una array vacía.
• Iterar el valor de this y usar el bucle for-of . (Aquí el valor de esto es la array donde llamó a la función de mapa)
• Ahora use la función de devolución de llamada en cada valor iterado y empújelo a esa array (que creó vacía)
• devolver la array.

Implementación:

// Check if the map function is supported by the browser or not
if(!Array.prototype.map){
    Array.prototype.map = function(callback){
     
        // create an empty array
        let newArr = [];
 
        // Iterate the value of this
        // Here the value of this is the array by
        // which you called the map function
         
        for(let item of this){
         
            // Apply the callback function at every iteration
            // and push it into the newArr array
             
            newArr.push(callback(item));
        }
         
        // return the newArr
        return newArr;
    }
}
 
let a = [ 1, 2, 3, 4, 5, 6]
 
a.map((item)=>{
    console.log(item)
})
 
// This code is contributed by _saurabh_jaiswal

Producción :

1
2
3
4
5
6