Funciones de array de JavaScript más útiles – Parte 2

En Funciones de array de JavaScript más útiles – Parte 1 , discutimos dos funciones de array, a saber, Array.Prototype.Every() y 
Array.prototype.some() . Es importante tener en cuenta que ambas funciones de array accedieron a los elementos de la array pero no modificaron/cambiaron la array en sí. Hoy vamos a ver 2 métodos de array que modifican la array y devuelven la array modificada.

• Array.Prototipo.filtro()
• Array.Prototipo.mapa()

Array.Prototype.filter(): se usa para obtener una nueva array que tiene solo aquellos elementos de la array que pasan la prueba implementada por la función de devolución de llamada. Acepta una función de devolución de llamada como argumento. Esta función de devolución de llamada tiene que devolver un verdadero o falso. Los elementos para los que la función de devolución de llamada devolvió verdadero se agregan a la array recién devuelta.

Sintaxis: 

array.filter(callback(element, index, arr), thisValue)

Parámetros: Esta función 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.
• array: 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.

Ejemplos: Filtre a los estudiantes que obtuvieron más del 80 por ciento de calificaciones. 

• Programa 1: Función para filtrar los estudiantes que obtuvieron más del 80 por ciento de calificaciones. Es un método ingenuo que usa bucle.

<script>
    function fnFilterStudents_loop(aStudent){
        var tempArr = [];
        for(var i = 0 ; i< aStudent.length; i ++){
            if(aStudent[i].fPercentage > 80.0)
            {
              tempArr.push(aStudent[i]);}
            }
        return tempArr;
    }
    aStudent = [
        {sStudentId : "001" , fPercentage : 91.2},
        {sStudentId : "002" , fPercentage : 78.7},
        {sStudentId : "003" , fPercentage : 62.9},
        {sStudentId : "004" , fPercentage : 81.4}];
         
    console.log(fnFilterStudents_loop(aStudent));
</script>

Producción: 

[{sStudentId : "001" , fPercentage : 91.2},
{sStudentId : "004" , fPercentage : 81.4}];

• Programa 2: Aquí usaremos Array.prototype.filter()

<script>
    function fnFilterStudents_filter(aStudent){
        return aStudent.filter(function(oStudent){
            return oStudent.fPercentage > 80.0;
        });
    }
    aStudent = [
        {sStudentId : "001" , fPercentage : 91.2},
        {sStudentId : "002" , fPercentage : 78.7},
        {sStudentId : "003" , fPercentage : 62.9},
        {sStudentId : "004" , fPercentage : 81.4}];
         
    console.log(fnFilterStudents_filter(aStudent));
</script>

Producción: 

[{sStudentId : "001" , fPercentage : 91.2},
{sStudentId : "004" , fPercentage : 81.4}];

Ejemplo: para eliminar elementos indefinidos de una array 

• Programa: Función para eliminar elementos indefinidos de una array. En la función de devolución de llamada del siguiente ejemplo, estamos devolviendo elementos directamente. Entonces, si el elemento tiene valor, se tratará como verdadero y si el elemento no está definido, se tratará automáticamente como falso.

<script>
    function removeUndefined(myArray){
        return myArray.filter(
function(element, index, array)
        {
            return element;
        });
    }
     
    var arr = [1,undefined,3,undefined,5];
     
    console.log(arr);
     
    console.log( removeUndefined(arr));
</script>

Producción: 

[1,undefined,3,undefined,5];
[1,3,5];

Array.Prototype.map(): Se utiliza para modificar cada elemento de la array de acuerdo con la función de devolución de llamada. Array.prototype.map() llama a la función de devolución de llamada una vez para cada elemento de la array en orden. El punto a tener en cuenta es que la función de devolución de llamada se invoca en los índices de los elementos que tienen un valor asignado, incluido el indefinido.

Sintaxis: 

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

Parámetros: Esta función 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.
• array: 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.

Ejemplos: un escenario en el que el usuario tiene que reducir cada monto en una array por un valor de impuesto específico 

• Programa 1: Función para agregar la propiedad bIsDistinction a cada objeto en el arreglo, usando Loop.

<script>
    function fnAddDistinction_loop(aStudent){
        for(var i = 0 ; i< aStudent.length; i ++){
            aStudent[i].bIsDistinction =
              (aStudent[i].fPercentage >= 75.0) ? true : false;
            }
        return aStudent;
    }
    aStudent = [
        {sStudentId : "001" , fPercentage : 91.2},
        {sStudentId : "002" , fPercentage : 78.7},
        {sStudentId : "003" , fPercentage : 62.9},
        {sStudentId : "004" , fPercentage : 81.4}];
          
    console.log(fnAddDistinction_loop(aStudent));
</script>

Producción: 

[{sStudentId : "001" , fPercentage : 91.2 , bIsDistiction : true},
 {sStudentId : "002" , fPercentage : 78.7 , bIsDistiction : true},
 {sStudentId : "003" , fPercentage : 62.9 , bIsDistiction : false},
 {sStudentId : "004" , fPercentage : 81.4 , bIsDistiction : true}];

• Programa 2: Aquí usaremos la función Array.prototype.map().

<script>
    function fnAddDistinction_map(aStudent){
        return aStudent.map(function(student, index, array){
            aStudent.bIsDistinction =
              (aStudent.fPercentage >= 75.0) ? true : false;
            return aStudent;
        });
    }
    aStudent = [
        {sStudentId : "001" , fPercentage : 91.2},
        {sStudentId : "002" , fPercentage : 78.7},
        {sStudentId : "003" , fPercentage : 62.9},
        {sStudentId : "004" , fPercentage : 81.4}];
          
    console.log(fnAddDistinction_map(aStudent));
</script>

• Producción:

[
{sStudentId : "001" , fPercentage : 91.2 , bIsDistiction : true},
{sStudentId : "002" , fPercentage : 78.7 , bIsDistiction : true},
{sStudentId : "003" , fPercentage : 62.9 , bIsDistiction : false},
{sStudentId : "004" , fPercentage : 81.4 , bIsDistiction : true}];

Ejemplo: un escenario en el que el usuario tiene que crear una nueva propiedad de cada objeto en una array de objetos existente.

• Programa: Array.prototype.Map() se usa con funciones estándar de JavaScript. Por ejemplo, con la función Math.sqrt() para calcular la raíz cuadrada de cada elemento en una array o analizar valores de string para flotar.

[1,4,9].map(Math.sqrt); // Output : [1,2,3]
["1.232","9.345","3.2345"].map(parseFloat)
// Output : [1.232, 9.345, 3.2345]

• Uno debe tener cuidado al usar Array.prototype.map() con funciones estándar porque algo como esto puede suceder.

["1","2","3"].map(parseInt);
//Output : [1, NaN, NaN]

¿Por qué el fragmento de código anterior devolvió NaN? Esto sucedió porque la función parseInt acepta dos argumentos, el primero es el elemento que se analizará en Integer y el segundo es la base que actúa como base para la conversión. Cuando lo usamos con Array.prototype.map(), aunque el primer argumento es el elemento, el segundo argumento es el índice del elemento de la array que se está procesando actualmente. Para la primera iteración, el índice 0 se pasa como base a parseInt, que por defecto es 10 y, por lo tanto, verá el primer elemento analizado correctamente. Después de eso se estropea.

• A continuación se muestra la solución para el desorden anterior.

["1","2","3"].map(function(val){return parseInt(val,10)});
// output : [1, 2, 3]

Como se muestra en los ejemplos anteriores, tanto Array.prototype.filter() como Array.prototype.map() se pueden implementar mediante bucles for. Pero en los escenarios anteriores, estamos tratando de trabajar en casos de uso muy específicos. Mantener una variable de contador, luego verificar la longitud de la array y luego incrementar la variable de contador. Tener estas cosas en mente no solo es una molestia, sino que también hace que el código sea propenso a errores. Por ejemplo, un desarrollador podría accidentalmente escribir incorrectamente «array.length» como «array.length». Entonces, como regla general, la mejor manera de evitar errores de programación es reducir la cantidad de cosas que realiza un seguimiento manual. Y estas funciones de array hacen precisamente eso.

El soporte del navegador es realmente bueno para estas funciones, pero aún no son compatibles con IE8 o inferior, ya que estas funciones de array se introdujeron en ECMAScript 5. Si también necesita usarlas para navegadores más antiguos, puede usar es5-shim o cualquier biblioteca como Underscore o Lodash puede venir a su rescate que tiene una función de utilidad equivalente.

Debe usar funciones de array de JavaScript – Parte  3

Además, si desea profundizar más en las funciones anteriores, puede consultar los siguientes enlaces oficiales 
1. http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.20 
2. http: //www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.19

Sobre el Autor:

Si también desea exhibir su blog aquí, consulte GBlog para escribir un blog invitado en GeeksforGeeks.