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

En este artículo, vamos a discutir las siguientes dos funciones de array de JavaScript. Ambas funciones son ampliamente utilizadas en la industria y hacen que el código JavaScript sea limpio, modularizado y fácil de entender.

1. array.prototipo.cada()
2. array.prototipo.algones()

Array.prototype.every(): esta función se usa cuando necesita validar cada elemento de una array determinada. Acepta una función de devolución de llamada como argumento que se llama para cada elemento de la array. La función de devolución de llamada tiene que devolver verdadero o falso. Si todos los elementos de la array satisfacen la función de validación y, por lo tanto, la función de devolución de llamada devuelve verdadero en todos los elementos de la array, entonces devuelve verdadero. De lo contrario, devuelve falso, tan pronto como encuentra el primer elemento que no satisface la función de validación.

Sintaxis:

arr.every(callback(element[, index[, array]])[, thisArg])

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.
• currentValue: 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: Dada una array, escriba una función para verificar si todos los elementos de esa array son menores a 100 o no.

• Programa 1: en este código, verificaremos la array usando una función de bucle. Entonces, el enfoque ingenuo es usar para un ciclo como se muestra a continuación.

  Aunque la siguiente implementación es fácil de entender para cualquier programador novato, hay algunas comprobaciones innecesarias de las que el programador debe encargarse. Por ejemplo, el mecanismo de cortocircuito, es decir, el programador tiene que asegurarse explícitamente de que tan pronto como el bucle encuentre el primer elemento que no cumple la condición dada, el bucle debe interrumpirse y devolver falso. Además, hasta ya menos que el programador profundice en la lógica del código, no podrá entender qué está haciendo este bucle for.

  let numbers = [30,60,190]; let result = true; for (let i = 0; i < numbers.length; i++) {     if (numbers[i] >= 100) {         result = false;         break;     } } document.write(result);

  Producción:

  false

• Programa 2: En este código, verificaremos la array usando una función Array.prototype.every() . Entonces, el enfoque ingenuo es usar para un ciclo como se muestra a continuación.

  con el uso de Array.every() , se puede lograr el mismo comportamiento con mucho más claro, intuitivo y menos código.

  let numbers = [30,60,90]; let result = numbers.every(function(element){    return(element < 100);  });     document.write(result);

  Producción:

  true

Ejemplos: dada una array, escriba una función para verificar si todos los elementos de esa array son de un tipo de datos específico.

• Programa 1: Nuevamente, el enfoque ingenuo sería iterar sobre la array usando for loop. Este fragmento de código tiene las mismas lagunas que el ejemplo anterior. 

  function fnCheckDatatype_Every(arr, sDatatype){     for(var i = 0 ; i < arr.length; i ++)     {       if(typeof(arr[i]) !== sDatatype)       {           return false;       }     } }    fnCheckDatatype_Every(["Geeks",4,"Geeks"],"string"); fnCheckDatatype_Every(["Geeks","for","Geeks"],"string");

  true
  false
  

• Programa 2: al usar arr.Every(), esas lagunas se resuelven nuevamente en el fragmento de código a continuación. Otro punto a tener en cuenta en el fragmento de código a continuación es que estamos pasando dos argumentos a la función array.every(). La primera es la función de devolución de llamada (función anónima en nuestro caso) y la segunda es sDatatype. Debido a que necesitamos una variable externa en cada llamada de una función de devolución de llamada, la pasamos como segundo argumento como variable ‘esta’.

  function fnCheckDatatype_Every(arr, sDatatype){ return arr.every(function(element){             return typeof(element) === sDatatype;         },sDatatype); }    fnCheckDatatype_Every(["Geeks","for","Geeks"],"string"); fnCheckDatatype_Every(["Geeks",4,"Geeks"],"string");

  Producción:

  true
  false
  

Array.prototype.some(): Esto es opuesto a Array.every() . Esta función se usa cuando necesita verificar si al menos un elemento de una array dada pasa la prueba implementada por la función de devolución de llamada. Array.some() acepta una función de devolución de llamada como argumento que tiene que devolver un verdadero o falso. La función de devolución de llamada se llama para cada elemento de la array hasta que devuelve verdadero para al menos un elemento de la array. Si ninguno de los elementos de la array pasa la prueba de la función de devolución de llamada, devuelve falso.

Sintaxis:

arr.some(callback(element[, index[, array]])[, thisArg])

Parámetros: esta función acepta cuatro 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.
• currentValue: 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 va a pasar, ya que se usará 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: Dada una array, escriba una función para verificar si una array contiene algún número mayor que 100.

• Programa 1: Enfoque Ingenuo

  function fnIsGreaterThan100_loop(arr){     for(var i = 0 ; i < arr.length; i ++){       if(arr[i] > 100){           return true;       }    }    return false; }    fnIsGreaterThan100_loop([30,60,90,120]); fnIsGreaterThan100_loop([30,60,90]);

  Producción:

  true
  false
  

• Programa 2: Usando Array.some()

  function fnIsGreaterThan100_some(arr){      return arr.some(function(element){             return(element> 100);      }); }    fnIsGreaterThan100_some([30,60,90,120]); fnIsGreaterThan100_some([30,60,90]);

  Producción:

  true
  false
  

Ejemplos: Dada una array, escriba una función para verificar si una array contiene un número par.

• Programa 1: enfoque ingenuo

  function fnIsEven_loop(arr){     for(var i = 0 ; i < arr.length; i ++){       if(arr[i] % 2 === 0){           return true;       }     }     return false; }    fnIsEven_loop([1,3,5]); fnIsEven_loop([1,3,5,6]);

  Producción:

   false
   true
  

• Programa 2: Usando Array.some()

  function fnIsEven_some(arr){        return arr.some(function(element){             return(element %2 === 0);        }); }    fnIsEven_some([1,3,5]); fnIsEven_some([1,3,5,6]);

  Producción:

   false
   true
  

Uno de los errores comunes que cometen los programadores al usar funciones de array como Array.every() y Array.some() es que olvidan devolver el valor en la función de devolución de llamada. Tenga en cuenta que si no devuelve ningún valor de la función de devolución de llamada, se devuelve nulo, que se interpretará como falso.

Además, es importante saber que estas funciones de array se introdujeron en ECMAScript 5. Por lo tanto, estas funciones son compatibles con IE9 o superior. Si también necesita usarlo para navegadores más antiguos, entonces una biblioteca como underscore.js puede ayudarlo, que tiene una implementación equivalente de tales funciones.

Debe usar funciones de array de JavaScript – Parte 2

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.16
2. http: //www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.17

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