Al igual que muchos lenguajes, JavaScript ofrece varias formas de recorrer, o iterar, las colecciones de datos. Iterar sobre arreglos es una tarea que a menudo tendrá que completar en su viaje de desarrollo.
En esta publicación, aprenderá cómo funciona forEach () y lo que eso podría significar para usted y su software. También verá algunos fragmentos de código que muestran la sintaxis, los casos de uso y un lápiz óptico con ejemplos en vivo de cómo usarlo. Los enlaces a continuación pueden ayudarlo a navegar por la publicación.
Empecemos.
¿Qué es JavaScript para todos?
El método JavaScript forEach () es un método poderoso que se utiliza para modificar e interactuar con las colecciones de datos. El método está vinculado a una variable, los objetos de la colección, e itera sobre cada elemento de la matriz hasta que se completa.
El método forEach le permite modificar colecciones de datos como matrices, ensamblajes y colecciones de objetos. Sin embargo, se puede usar para varios otros propósitos, como mostrar información, crear nuevos conjuntos de datos e incluso confirmar información. Estas no son las únicas formas de usar el método forEach, pero hablaremos de eso más adelante.
ForEach loop tiene una sintaxis bastante estándar. Sin embargo, puede parecer un poco confuso al principio debido a su naturaleza. Así que ahora echemos un vistazo a la sintaxis del bucle forEach y ampliémosla mirando algunos ejemplos.
Sintaxis para todos
La sintaxis del método JavaScript forEach es relativamente sencilla. Toma una función y un valor generalmente denominado parámetro. este valor. Sin embargo, antes de profundizar en lo que eso significa, veamos cómo se ve en su forma más básica.
array.forEach(function(currVal, index, arr), thisValue)
Tenemos una matriz con un nombre genérico en este fragmento formación y encadenado a él está el método forEach.
Acepta el método forEach:
- función (requerido): Esta función le permite realizar una acción para todo el mundo un elemento en la colección de destino.
- este valor (opcional): Este parámetro es para identificación este un valor al que se puede acceder en un bucle con este palabra clave
Dentro del método forEach hay un genérico función que acepta sus propios tres parámetros. Analicemos esta característica para entender cómo funciona.
La sintaxis para cada parámetro.
Parámetro para la función forEach:
El parámetro de función parece muy familiar porque es la sintaxis estándar para declarar o llamar a una función. Los desarrolladores pueden hacer esto de dos maneras; el primero es escribir la función directamente en el método forEach como se muestra a continuación.
firstNames.forEach(
function(currVal, id, arr) {
/*do neat stuff here*/
},
thisVal);
Otra opción es escribir una función fuera del alcance del método forEach y luego llamar a esa función como el parámetro forEach, como se ve a continuación.
/*Declaring the function, and calling it as the forEach param*/
array.forEach(coolFunct);
function coolFunct (item) {
/*do neat stuff here*/
}
Ahora pasemos a parte de la función en sí para comprender mejor lo que necesita para funcionar correctamente.
función (currVal, id, arr)
- CurVal (obligatorio): este valor contiene el elemento de iteración actual en el ciclo.
- índice (opcional): este valor es la ubicación del índice del elemento en la iteración actual.
- Arr (opcional): este valor contiene la matriz a la que pertenece el elemento actual.
Ahora que hemos cubierto el primer parámetro del método forEach, echemos un vistazo al siguiente parámetro opcional, thisValue.
Para cada este valor:
TaVal
- TaVal (opcional): le permite acceder al objeto JavaScript fuera del bucle forEach.
Ahora que sabe qué parámetros acepta el método forEach y cómo funcionan, analicemos cómo usarlo.
Cómo usar For-each en JavaScript
El uso del método forEach para ver conjuntos de información simplifica la tarea crucial de administrar datos en cualquier software. Pero, ¿cómo te afecta esto a ti y a tu trabajo como desarrollador?
Algunos ejemplos del uso del método forEach para iterar información incluyen mostrar información del usuario y comparar datos. Con eso en mente, puede ser difícil determinar cuándo usar el método forEach en lugar de otros enfoques de bucle.
Los bucles tradicionales enviados con JavaScript le permiten terminarlos o terminarlos condicionalmente. Dos grandes ejemplos son el uso descanso y devolver palabras clave que señalan el final del bucle.
El bucle forEach, por otro lado, no permite que termine prematuramente. En cambio, cuando comienza el ciclo, el ciclo se ejecuta hasta que termina en cualquier caso, excluyendo la ocurrencia de un error de interrupción.
Ejemplos de JavaScript para todos
El codepen a continuación es un excelente ejemplo de cómo aprovechar al máximo el método forEach. Este ejemplo contiene los parámetros opcionales para el método forEach y la función requerida que acepta.
Estos codificadores proporcionan el código HTML, CSS y JavaScript utilizado para crear la vista previa que verá. Puede ignorar HTML y CSS y centrarse principalmente en JavaScript. Si está interesado en alguno de estos temas, puede encontrar publicaciones sobre HTML y CSS aquí.
ver la pluma Inculto por HubSpot (@hubspot) en CódigoPen.
Comience a usar el bucle For-each de JavaScript
Esta publicación cubre los conceptos básicos del ciclo forEach y cómo se pueden usar en el desarrollo de software. Aprendió qué es un for cada ciclo, comenzando con la estructura de sintaxis básica y sus parámetros opcionales y obligatorios. Además, sabe cómo usar una función y un parámetro de manera significativa.
