Cómo usar la función de reducción de la matriz JavaScript
En esta publicación, comprenderemos el concepto de JavaScript reducir() función. ¿Qué es un reducir() función, y cómo podemos usarlo para ayudar a simplificar el código JavaScript y completar las tareas de manera eficiente y rápida.
¿Cuál es la reducción?() función?
JavaScript's reducir() La función para la matriz se usa para reducir la matriz en un solo valor de salida.
El reducir() La función toma el elemento de una matriz uno por uno, realiza una operación y devuelve un valor de salida único. Exploremos y cavemos más para comprender la sintaxis y su funcionalidad, junto con un par de ejemplos.
Sintaxis:
formación.reducir (function_name, inicialValue);La parte interesante de la función Red () de la matriz es que puede tomar una función de devolución de llamada con cuatro argumentos. La sintaxis de la función de devolución de llamada y la secuencia de argumentos irán así:
función function_name (acumulador, valor, índice, array)…
En la función de devolución de llamada de Reducción () método:
- El primer parámetro es un acumulador que almacena el resultado después de cada iteración.
- El segundo parámetro/argumento contiene el valor del elemento de matriz actual durante la iteración.
- El tercer parámetro es el parámetro opcional que es la corriente índice del elemento de matriz durante la iteración.
- Por último, también podemos pasar el formación a sí misma a la función de devolución de llamada para tener algunas funcionalidades personalizadas dentro de la función de devolución de llamada.
También podemos pasar el valor inicial a la función. El valor inicial será el valor inicial del acumulador.
Intentemos un par de ejemplos para ver sus implementaciones
Nota: Usaremos la consola del navegador para demostrar ejemplos realizados en esta publicación. Para abrir la consola del navegador:
- Utilizar el F12 clave en Chrome y otros navegadores basados en cromo.
- Usar Ctrl + Shift + K teclas de atajo de teclado para Mozilla.
- Usar Opción + ⌘ + C teclas de acceso directo de teclado en Safari (si el menú de desarrollador no aparece, luego abra las preferencias presionando ⌘ +, y en Avanzado comprobación de pestañas "Mostrar el menú Desarrollar en la barra de menú").
Cómo usar la función Reduce () en JavaScript
El mejor ejemplo para comprender el reducir() La función es la adición de números almacenados en los elementos de la matriz.
Ejemplo 1:
Supongamos que tenemos una variedad de números y queremos agregar todos estos números:
números var = [23,76,38,55,10]La primera forma de agregar estos números es usar un para bucle:
var sum = 0;para (leti = 0; i
consola.log (suma);
Aunque tenemos la suma como salida, ¿por qué no usar una forma inteligente y fácil de realizar el mismo cálculo utilizando el reducir() Método de la matriz, donde no tenemos que mutar las variables como "suma."
Uso de la función Reder ():
El reducir() función para calcular la suma irá así:
var suma = números.reducir (addnumbers, 0);function addNumbers (total, num)
Total de retorno + NUM
consola.log (suma);
En el código anterior, puede ver que primero hemos pasado el addnumbers función para el reducir() función, y en el addnumbers Definición de la función, acabamos de agregar cada número a la variable del acumulador total y devolvió su valor.
Una vez el reducir() la función agrega todos los números en el números Array, almacenará el resultado final en el suma variable.
Por último, acabamos de consolar el suma variable para verificar si nuestro reducir() la función funcionó bien o no.
Al buscar en la captura de pantalla proporcionada anteriormente, puede verificar que la función Reduce () ha agregado todos los números y ha mostrado el resultado en la consola, que es 202 y perfectamente calculado.
Otra forma más corta y más fácil de escribir reducir() La función es hacer que la función de devolución de llamada sea una función de flecha:
La sintaxis de escribir la función de devolución de llamada dentro del reducir() Los paréntesis de la función serán así:
var suma = números.reducir ((total, num) =>Total de retorno + NUM
, 0);
consola.log (suma);
Muy bien, este fue el simple ejemplo en el que solo tenemos una variedad de números; ¿Qué pasa con la matriz de objetos?. Intentemos ese también.
Ejemplo 2:
Supongamos que tenemos una lista de estudiantes en una matriz, y queremos calcular las tarifas totales de todos los estudiantes:
estudiantes var = [ID: 1,
Nombre: "John"
Edad: 12,
Tarifa: 8500
,
ID: 2,
Nombre: "Bob",
Edad: 14,
Tarifa: 9000
,
ID: 3,
Nombre: "Steve",
Edad: 10,
Tarifa: 8000
,
]
El reducir() función para calcular las tarifas totales irá así:
var en totalfees = estudiantes.reducir ((total, estudiante) =>Total de retorno + estudiante.tarifa
, 0);
consola.log (TotalFees);
Ahora, la única diferencia en este código es que un solo objeto se pasa como un valor para la función de devolución de llamada, y dentro de la definición de la función de devolución de llamada, hemos accedido a la tarifa y lo agregamos a la variable del acumulador.
Al mirar la captura de pantalla adjunta anteriormente, puede ver que las tarifas de los estudiantes se agregan y se muestran como una salida. Entonces, así es como podemos acceder a los objetos de una matriz en el reducir() función.
Conclusión:
En esta publicación, hemos aprendido qué reducir() La función es y cómo podemos usarlo para ayudar a simplificar el código JavaScript y completar las tareas de manera eficiente y rápida.
Hemos aprendido que el reducir() La función reduce la matriz en un único valor de salida. El reducir() La función toma una función de devolución de llamada aplicada a cada elemento de la matriz y devuelve un valor de salida único.
Esta publicación se trata de JavaScript's reducir() función y su uso. Contiene algunos ejemplos básicos que ayudan a comprender el reducir() función.