La mayoría de las aplicaciones que creamos hoy requieren algún tipo de modificación en la recopilación de datos. Procesar elementos en una colección es una operación común que probablemente encontrará. Olvídate de la forma convencional de hacer **for-loop ** como _ (const i; i < value.length; i++ )_.
Supongamos que desea mostrar la lista de productos y categorizar, filtrar, buscar, modificar o actualizar una colección. O tal vez desee realizar cálculos rápidos como suma, multiplicación, etc. ¿Cuál es la forma óptima de lograr esto?
Tal vez no te gustan las funciones de flecha , no quieres perder demasiado tiempo aprendiendo algo nuevo, o simplemente no son relevantes para ti. No te preocupes, no estás solo. Te mostraré cómo se hace en ES5 (desaceleración funcional) y ES6 (funciones de flecha).
Tenga en cuenta: las funciones de flecha y las declaraciones / expresiones de función no son equivalentes y no se pueden reemplazar a ciegas . Tenga en cuenta que la **this **palabra clave funciona de manera diferente entre los dos.
Los métodos que veremos:
1 - Spread operator
2 - for…of iterator
3 - includes()
4 - some()
5 - every()
6 - filter()
7 - map()
8 - reduce()
1. Operador de extensión
Spread Operator expande una matriz en sus elementos. También se puede usar para literales de objetos.
¿Por qué debería usarlo?
Ejemplo:
Supongamos que quiere mostrar una lista de comidas favoritas sin crear una función de bucle. Use un operador de propagación como este:
const favoritFood = ['Pizza', 'Fries', 'Swedish-meatballs']
console.log(...favoritFood)
//Pizza Fries Swedish-meatballs////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
2. for…of iterator
La for…of instrucción realiza un ciclo / itera a través de la colección y le proporciona la capacidad de modificar elementos específicos. Reemplaza la forma convencional de hacer a for-loop.
¿Por qué debería usarlo?
Ejemplo:
Supongamos que tiene una caja de herramientas y desea mostrar todas las herramientas que contiene. El for…of iterador lo hace fácil.
const toolBox = ['Hammer', 'Screwdriver', 'Ruler']
for (const item of toolBox) {
console.log(item)
}
//Hammer//Screwdriver//Ruler////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
3. Includes() method
El **includes() ** método se usa para verificar si existe una cadena específica en una colección y devuelve **trueo false. ** Tenga en cuenta que distingue entre mayúsculas y minúsculas: si el elemento que está dentro de la colección es SCHOOL, y lo busca school, volveráfalse.
¿Por qué debería usarlo?
const garage = ['BMW', 'AUDI', 'VOLVO']
const findCar = garage.includes ('BMW')
console.log (findCar)
//true////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
4. Some() method
El some() método verifica si algunos elementos existen en una matriz y devuelve true o false. Esto es algo similar al concepto del **_includes() _ **método, excepto que el argumento es una función y no una cadena.
¿Por qué debería usarlo?
Ejemplo:
digamos que eres dueño de un club y no te importa quién ingrese al club. Pero algunos no están permitidos, porque han estado bebiendo demasiado (mi creatividad es óptima). Vea las diferencias entre ES5 y ES6 a continuación:
ES5
const age = [16, 14, 18]
age.some(function(person){
return person >= 18
})
//Output: trueES6
const age = [16, 14, 18]
age.some((person) => person >= 18)
//true////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
5. Every() method
El every() método recorre el conjunto, comprueba cada elemento y devuelve** true o false.** Mismo concepto que some(). Excepto que cada elemento debe cumplir el enunciado condicional; de lo contrario, volverá false.
¿Por qué debería usarlo?
Ejemplo:
La última vez que permitió que** some() **estudiantes menores de edad ingresaran al club, alguien informó esto y la policía lo atrapó. Esta vez no permitirá que eso ocurra, y se asegurará de que todos pasen el límite de edad con el **every() **operador.
ES5
const age = [15, 20, 19]
age.every(function(person){
return person >= 18
})
//Output: falseES6
const age = [15, 20, 19]
age.every((person) => person >= 18)
//false////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
6. Filter() method
El filter() método crea una nueva matriz con todos los elementos que pasan la prueba.
¿Por qué debería usarlo?
Ejemplo:
supongamos que desea devolver solo precios superiores o iguales a 30. Filtre todos esos otros precios …
ES5
const prices = [25, 30, 15, 55, 40, 10]
prices.filter = (function(price){
return price >= 30
})
ES6
const prices = [25, 30, 15, 55, 40, 10]
prices.filter((price) => price >= 30)
//[30, 55, 40]
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
7. Map() method
El map() método es similar al filter() método en términos de devolver una nueva matriz. Sin embargo, la única diferencia es que se usa para modificar elementos.
¿Por qué debería usarlo?
ES5
const productPriceList = [200, 350, 1500, 5000]
productPriceList.map(function(item){
return item * 0.75
})
//[150, 262.5, 1125, 3750]ES6
const productPriceList = [200, 350, 1500, 5000]
productPriceList.map((item) => item * 0.75)
//[150, 262.5, 1125, 3750]////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
8. Reduce() method
El reduce() método puede usarse para transformar una matriz en otra cosa, que podría ser un número entero, un objeto, una cadena de promesas (ejecución secuencial de promesas), etc. Por razones prácticas, un caso de uso simple sería sumar una lista de enteros . En resumen, “reduce” toda la matriz en un solo valor.
¿Por qué debería usarlo?
Realiza cálculos
Calcule un valor
Contar duplicados
Agrupe objetos por propiedad
Ejecutar promesas secuencialmente
Es una manera rápida de realizar cálculos
Ejemplo:
supongamos que desea conocer sus gastos totales durante una semana. Úselo reduce() para obtener ese valor.
ES5
const weeklyExpenses = [200, 350, 1500, 5000, 450, 680, 350]
weeklyExpenses.reduce(function(first, last){
return first + last
})
//8530ES6
const weeklyExpenses = [200, 350, 1500, 5000, 450, 680, 350]
weeklyExpenses.reduce((first, last) => first + last)
//8530Esto lo saque de https://medium.com/, donde se publican muchos artículos de programación.
Espero les ayude en algo.
