Funciones de flecha de orden superior en JavaScript

Requisito previo: funciones de flecha

Una función de orden superior es una función que recibe una función como argumento ; de lo contrario, devuelve la función como salida . La función de flecha de orden superior implica el uso de funciones de flecha (en ES6 ) junto con funciones de orden superior.

Necesidades de la función de flecha de orden superior:

• En general, el programador instruye sobre cómo realizar la función en lugar de lo que se necesita, lo que aumenta la longitud del código y lo hace propenso a errores.
• Mientras que en la implementación de funciones de flecha de orden superior, el código es mucho más corto , conciso , sucinto , fácil de depurar y se enfoca en lo que se requiere en lugar de cómo lograrlo .
• Podemos trabajar directamente con el valor actual en lugar de acceder a él individualmente usando su índice (es decir, arr[0]).
• No es necesario crear una array predefinida y hacer retroceder los cambios.
• Se puede evitar la mutación de objetos y no se requiere el mantenimiento del bucle for .

¿Por qué evitar forEach() ?
La función forEach() no devuelve ningún valor, por lo que los resultados deben insertarse en una array predefinida, mientras que este no es el caso de la función map().

<script>
// Data set of students
var Students = [
    { rollNo: 21, name: 'Alpha' },
    { rollNo: 22, name: 'Beta' },
    { rollNo: 23, name: 'Gamma' },
    { rollNo: 24, name: 'Delta' },
    { rollNo: 25, name: 'Omega'}
];
  
// Use forEach() function
var StudentRollNo = [];
  
Students.forEach(function (Student) {
    StudentRollNo.push(Student.rollNo);
});
  
// Display rollNo data
console.log(StudentRollNo);
</script>

Producción:

Las funciones de orden superior son:

1. Función map(): funciona en una array dada como cambiar/transformar toda la array y luego simplemente devolverla. No interrumpe el flujo por pocas condiciones. La función map() toma dos argumentos. La primera es la devolución de llamada que proporciona el valor actual de la iteración, el índice de la iteración, la array original desde la que se llamó al mapa. El otro argumento no es obligatorio , que es el valor a usar como este en la devolución de llamada. Una desventaja de usar la función map() es que su rendimiento es bueno solo con pequeños conjuntos de datos .

   <script> // Data set of students var Students = [     { rollNo: 21, name: 'Alpha' },     { rollNo: 22, name: 'Beta' },     { rollNo: 23, name: 'Gamma' },     { rollNo: 24, name: 'Delta' },     { rollNo: 25, name: 'Omega'} ];    // Use map() function var StudentRollNo = Students.map(function (Student) {     return Student.rollNo });    // Display rollNo data console.log(StudentRollNo); </script>

   Producción:
   

   La implementación del código anterior usando funciones de flecha .

   <script> // Data set of students var Students = [     { rollNo: 21, name: 'Alpha' },     { rollNo: 22, name: 'Beta' },     { rollNo: 23, name: 'Gamma' },     { rollNo: 24, name: 'Delta' },     { rollNo: 25, name: 'Omega'} ];    // Use map() function with arrow functions const StudentRollNo =      Students.map(Student => Student.rollNo);     // Display Roll no data console.log(StudentRollNo); </script>

   Producción:
   

   Nota: Para obtener más información, consulte: Mapas en JavaScript

2. Función reduce(): es similar a la función map() en términos de devolución de llamada para cada elemento de la array. Pero la diferencia es que reduce pasa el resultado de esta devolución de llamada de la array original a otra. El resultado se denomina acumulador , que puede ser un número entero , un carácter , una string , un objeto , un mapa , etc. y debe pasarse durante la invocación. La devolución de llamada ahora obtiene el acumulador, el valor actual, el índice de iteración, la array completa .
   En palabras simples, el acumulador acumula todos los valores devueltos. Su valor es la colección de acumulaciones previamente devueltas.

   <script> // Data set of students var Students = [     { rollNo: 21, name: 'Alpha', prizesWon: 1 },     { rollNo: 22, name: 'Beta', prizesWon: 3 },     { rollNo: 23, name: 'Gamma', prizesWon: 0 },     { rollNo: 24, name: 'Delta', prizesWon: 0 },     { rollNo: 25, name: 'Omega', prizesWon: 1} ];    // Using reduce() function var totalPrizes = Students.reduce(function (accumulator, Student) {     return accumulator + Student.prizesWon; }, 0);    // Display total number of prizes won by all console.log(totalPrizes); </script>

   Producción:

   5

   La implementación del código anterior usando funciones de flecha .

   <script> // Data set of students var Students = [     { rollNo: 21, name: 'Alpha', prizesWon: 1 },     { rollNo: 22, name: 'Beta', prizesWon: 3 },     { rollNo: 23, name: 'Gamma', prizesWon: 0 },     { rollNo: 24, name: 'Delta', prizesWon: 0 },     { rollNo: 25, name: 'Omega', prizesWon: 1} ];    // Using reduce() function with arrow functions const totalPrizes = Students.reduce(     (accumulator, Student) => accumulator + Student.prizesWon, 0);    // Display total number of prizes won by all console.log(totalPrizes); </script>

   Producción:

   5

3. Función find(): también funciona en una array y devuelve el primer elemento de la array que satisface la condición dada en la función. Es similar a la función map(). Su rendimiento no es muy eficiente en el caso de grandes conjuntos de datos, aunque funciona bien con conjuntos de datos pequeños.

   <script> // Data set of students var Students = [     { rollNo: 21, name: 'Alpha', prizesWon: 4 },     { rollNo: 22, name: 'Beta', prizesWon: 3 },     { rollNo: 23, name: 'Gamma', prizesWon: 0 },     { rollNo: 24, name: 'Delta', prizesWon: 4 },     { rollNo: 25, name: 'Omega', prizesWon: 1} ];    // Using find() function  var achievers = Students.find(function (Student) {     return Student.prizesWon == 4; });    // Display only first Student who won four prizes console.log(achievers); </script>

   Producción:
   

   La implementación del código anterior usando funciones de flecha .

   <script> // Data set of students var Students = [     { rollNo: 21, name: 'Alpha', prizesWon: 4 },     { rollNo: 22, name: 'Beta', prizesWon: 3 },     { rollNo: 23, name: 'Gamma', prizesWon: 0 },     { rollNo: 24, name: 'Delta', prizesWon: 4 },     { rollNo: 25, name: 'Omega', prizesWon: 1} ];    // Using find() function with arrow functions var achievers = Students.find(     (Student) => Student.prizesWon == 4);    // Display only first Student who won four prizes console.log(achievers); </script>

   Producción:
   

4. Función filter(): la función filter() funciona en una array y devuelve una array para los elementos filtrados, lo que implica que se reduce la longitud de la array . También recibe argumentos similares a los del mapa, pero la diferencia radica en la devolución de llamada, ya que debe devolver verdadero o falso . Si el valor devuelto es verdadero, el elemento permanece en la array; de lo contrario, el elemento se filtra.

   <script> // Data set of students var Students = [     { rollNo: 21, name: 'Alpha', prizesWon: 4 },     { rollNo: 22, name: 'Beta', prizesWon: 3 },     { rollNo: 23, name: 'Gamma', prizesWon: 0 },     { rollNo: 24, name: 'Delta', prizesWon: 4 },     { rollNo: 25, name: 'Omega', prizesWon: 1} ];    // Using filter() function  var achievers = Students.filter(function (Student) {     return Student.prizesWon == 4; });    // Display Students who won four prizes console.log(achievers); </script>

   Producción:
   

   La implementación del código anterior usando funciones de flecha .

   <script> // Data set of students var Students = [     { rollNo: 21, name: 'Alpha', prizesWon: 4 },     { rollNo: 22, name: 'Beta', prizesWon: 3 },     { rollNo: 23, name: 'Gamma', prizesWon: 0 },     { rollNo: 24, name: 'Delta', prizesWon: 4 },     { rollNo: 25, name: 'Omega', prizesWon: 1} ];     // Using filter() function with arrow functions var achievers = Students.filter(     (Student) => Student.prizesWon == 4);     // Display Students who won four prizes console.log(achievers); </script>

   Producción: