Estos métodos de JavaScript mejorarán sus habilidades en solo unos minutos

La mayoría de las aplicaciones que creamos hoy requieren algún tipo de modificación de recopilación de datos. Procesar elementos en una colección es una operación común que probablemente encontrará. Olvídese de la forma convencional de hacer for-looplike (let i=0; i < value.length; i++).

Aviso rápido, usar constin for-loople dará un error. La razón es porque vuelve a declarar el valor durante cada ejecución, por lo que ise modifica por i++. Entonces, cuando piense en usar consto let, pregúntese: ¿se volverá a declarar este valor? Si la respuesta es , adelante let, y si no , adelante const. Más información.

Supongamos que desea mostrar una 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 lograrlo?

Tal vez no le gusten las funciones de flecha , no quiera pasar demasiado tiempo aprendiendo algo nuevo o simplemente no sean relevantes para usted. No se preocupe, no está 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 thispalabra clave funciona de manera diferente entre los dos.

Los métodos que veremos:

  1. Operador de propagación
  2. para ... de iterador
  3. incluye ()
  4. algunos()
  5. cada()
  6. filtrar()
  7. mapa()
  8. reducir()
Si desea convertirse en un mejor desarrollador web, iniciar su propio negocio, enseñar a otros o mejorar sus habilidades de desarrollo, publicaré consejos y trucos semanales sobre los últimos lenguajes de desarrollo web.

1. Operador de propagación

El operador de propagación expande una matriz en sus elementos. También se puede utilizar para objetos literales.

¿Por qué debería usarlo?

  • Es una forma sencilla y rápida de mostrar los elementos de una matriz.
  • Funciona para matrices y objetos literales.
  • Es una forma rápida e intuitiva de transmitir argumentos.
  • Solo requiere tres puntos ...

Ejemplo:

Supongamos que desea mostrar una lista de comidas favoritas sin crear una función de bucle. Utilice un operador de propagación como este:

2. para… de iterador

La for...ofdeclaración recorre la colección en bucle / itera y le brinda la posibilidad de modificar elementos específicos. Reemplaza la forma convencional de hacer un for-loop.

¿Por qué debería usarlo?

  • Es una forma sencilla de agregar o actualizar un elemento.
  • 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...ofiterador lo hace fácil.

3. Incluye método ()

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 dentro de la colección lo 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 declaraciones condicionales para modificar, filtrar, etc.
  • Conduce a un código legible

Ejemplo:

Digamos por alguna razón que no sabes qué coches tienes en tu garaje y necesitas un sistema para comprobar si el coche que quieres existe o no. includes()¡al rescate!

4. Algún método ()

El some()método comprueba si existen algunos elementos en una matriz y devuelve trueo 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
  • Haz tu código declarativo
  • Algo es lo suficientemente bueno

Ejemplo:

Digamos que eres dueño de un club y no te importa quién ingrese al club. Pero a algunos no se les permite entrar, porque han estado bebiendo demasiado (mi creatividad en su mejor momento). Vea las diferencias entre ES5 y ES6 a continuación:

ES5:

ES6:

5. Cada método ()

El every()método recorre la matriz, comprueba cadaartículo y devoluciones trueo false. Mismo concepto que some(). Excepto que cada elemento debe satisfacer la declaración condicional, de lo contrario, volverá false.

¿Por qué debería usarlo?

  • Se asegura de que cada elemento pase la prueba
  • Puede realizar declaraciones condicionales usando funciones
  • Haz tu 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 dejará que eso suceda y se asegurará de que todos superen el límite de edad con el every()operador.

ES5

ES6

6. Método Filter ()

El filter()método crea una nueva matriz con todos los elementos que pasan la prueba.

¿Por qué debería usarlo?

  • Para que pueda evitar cambiar la matriz principal
  • Te permite filtrar los elementos que no necesitas
  • 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

ES6

7. Método Map ()

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?

  • Le permite evitar realizar cambios en la matriz principal
  • Puedes modificar los elementos que quieras
  • Te da un código más legible

Ejemplo:

Digamos 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 con un 25%. El map()método puede ayudarte.

ES5

ES6

8. Método Reducir ()

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 números enteros. . En resumen, "reduce" toda la matriz en un valor.

¿Por qué debería usarlo?

  • Realizar cálculos
  • Calcular un valor
  • Contar duplicados
  • Agrupar objetos por propiedad
  • Ejecutar promesas secuencialmente
  • Es una forma rápida de realizar cálculos

Ejemplo:

Supongamos que desea conocer sus gastos totales durante una semana. Úselo reduce()para obtener ese valor.

ES5

ES6

Puedes encontrarme en Developer News donde publico todas las semanas. O puede seguirme en Twitter, donde publico trucos y consejos de desarrollo web relevantes.