Estos métodos de JavaScript aumentarán tus habilidades en solo unos minutos

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?

• Es una forma simple y rápida de mostrar los elementos de una matriz
• Funciona para matrices y literales de objetos
• Es una manera rápida e intuitiva de pasar argumentos
• Solo requiere tres puntos …

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?

• Es una manera simple de agregar o actualizar un artículo
• Para realizar cálculos (suma, multiplicación, etc.)
• Al usar declaraciones condicionales (if, while, switch, etc.)
• Conduce a un código limpio y legible

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 **true o 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?

• Para construir una funcionalidad de búsqueda simple
• Es un enfoque intuitivo para determinar si existe una cadena
• Utiliza instrucciones condicionales para modificar, filtrar, etc.
• Conduce a un código legible
  Ejemplo:
  Digamos por alguna razón que usted no está al tanto de qué automóviles tiene en su garaje, y necesita un sistema para verificar si el automóvil que desea existe o no. includes() ¡al rescate!

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?

• Se asegura de que algún elemento pase la prueba
• Realiza declaraciones condicionales usando funciones
• Haga su código declarativo
• Algunos son lo suficientemente buenos

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: true

ES6

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?

• Se asegura de que cada artículo pase la prueba
• Puede realizar declaraciones condicionales usando funciones
• Haga su código declarativo

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: false

ES6

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?

• Entonces puedes evitar cambiar la matriz principal
• Le permite filtrar elementos que no necesita
• Te da un código más legible

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?

• Te permite evitar hacer cambios en la matriz principal
• Puedes modificar los elementos que quieras
• Te da un código más legible
  Ejemplo:
  Supongamos que tiene una lista de productos con precios. Su gerente necesita una lista para mostrar los nuevos precios después de que hayan sido gravados en un 25%. El map() método puede ayudarte.

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
})
//8530

ES6

const weeklyExpenses = [200, 350, 1500, 5000, 450, 680, 350]

weeklyExpenses.reduce((first, last) => first + last)
//8530

Esto lo saque de https://medium.com/, donde se publican muchos artículos de programación.
Espero les ayude en algo.