Diferentes formas de iterar sobre una matriz en JavaScript

Diferentes formas de iterar sobre una matriz en JavaScript
En JavaScript, iterando sobre una matriz es muy crucial y se puede lograr utilizando diferentes métodos incorporados, y bucles. Las estructuras de bucle de JavaScript, así como los métodos de matriz incorporados, iteran sobre cada elemento de matriz. Los bucles tradicionales como el bucle y el bucle mientras el bucle son la forma más simple y fácil de iterar sobre una matriz, mientras que los métodos de matriz como filtro (), map (), etc. se utilizan para atravesar, así como para servir varias funcionalidades en los elementos de la matriz.

Este artículo cubrirá las formas de iterar por debajo de una matriz en JavaScript:

  • Cómo iterar sobre una matriz usando el bucle tradicional
  • Cómo iterar sobre una matriz usando el método JavaScript foreach ()
  • Cómo iterar sobre una matriz usando While Loop
  • Cómo usar para ... de declaraciones para iterar elementos de matriz
  • Cómo iterar elementos de matriz usando la función MAP ()

Entonces empecemos!

Cómo iterar sobre una matriz usando el bucle tradicional?

En cualquier lenguaje de programación, incluido JavaScript, la forma más utilizada de iterar sobre una matriz es for-loop. El siguiente fragmento lo ayudará a comprender la sintaxis del for-bucle:

para (inicialización; condición; incremento/disminución)
//código

Aquí,

  • "Inicialización" especifica dónde iniciar el bucle.
  • "Condición" especifica los criterios de terminación para el bucle.
  • El operador de incremento y disminución aumenta o disminuye el valor de la variable dada.

Ejemplo: iterando sobre una matriz usando For-Loop
En este programa, tenemos una variedad de nombres de estudiantes y lo iteraremos usando For-Loop:

stdnames = ["Seth", "Mike", "Daniel", "John", "Bryn"];
para (i = 0; i < stdNames.length; i++)
consola.log ("en el índice", i, stdnames [i]);

En este programa realizamos las siguientes tareas:

  • En primer lugar, creamos una matriz que consta de cinco elementos.
  • A continuación, utilizamos el bucle for para iterar todos los elementos de la matriz dada.
  • Dentro del bucle, utilizamos la propiedad de longitud para encontrar la longitud de la matriz.
  • Finalmente, utilizamos la consola.Método log () para imprimir cada elemento de la matriz dada.

Así es como podemos utilizar el bucle for para iterar elementos de matriz en JavaScript.

Cómo iterar sobre una matriz usando el método JavaScript foreach ()

El método foreach () en JavaScript invoca una función de devolución de llamada para cada elemento de la matriz dada. El fragmento a continuación lo ayudará a comenzar con el método foreach ():

nombre del nombre.foreach ((item) =>
//código
);

Ejemplo: iterando sobre una matriz usando el método foreach ()
Veamos el siguiente bloque de código dado para comprender cómo usar el método foreach () para iterar sobre una matriz en JavaScript:

var stdage = [15, 18, 20, 16, 17];
var string = "";
de gran parte.foreach (impresión);
function printage (edad)
String = String + Age + "\ n";

consola.log ("Edad del estudiante:");
consola.log (cadena);
  • En primer lugar, cree una matriz y una cadena vacía.
  • A continuación, utilice el método foreach () junto con la matriz dada.
  • El método foreach () invocó la función "printage ()" para cada elemento de matriz solo.
  • La función de "impresión" almacenó la edad del estudiante en la variable de cadena.
  • Finalmente, imprimió la edad del estudiante en la consola.

Así es como funciona el método foreach () en JavaScript.

Cómo iterar sobre una matriz usando While Loop?

En JavaScript, se puede usar un bucle de tiempo para iterar a través de una matriz. Para hacer eso, tenemos que seguir la siguiente sintaxis:

inicialización;
mientras (condición)

//código
incremento/disminución;

Ejemplo: iterando sobre una matriz usando While Loop

En este programa, iteraremos la matriz usando While Loop:

stdnames = ["Seth", "Mike", "Daniel", "John", "Bryn"];
i = 0;
mientras yo < stdNames.length)
consola.log ("en el índice", i, stdnames [i]);
i++

El programa anterior realizó las siguientes tareas:

  • Creó una matriz.
  • Utilizó el bucle while.
  • Inicializó el bucle con 0.
  • Iterado sobre cada elemento de la matriz.
  • Impreso el índice actual y su valor respectivo.
  • Finalmente, incrementó la variable.

La salida verificó el funcionamiento del bucle While en JavaScript.

Cómo usar para ... de declaraciones para iterar elementos de matriz?

El para ... de bucle/declaración es una nueva adición en JavaScript introducida en las últimas versiones del ES6. Nos permite pasar/iterar sobre los objetos iterables, como matrices, cadenas, conjuntos, etc. Considere el siguiente fragmento para comprender la sintaxis de para ... de declaraciones:

para (variable de iterable)
// código

Ejemplo: iterando sobre una matriz usando para ... de declaraciones
Este programa de ejemplo le proporcionará una comprensión profunda de la para ... de las declaraciones:

var stdage = [16, 18, 19, 16, 17];
var string = "";
para (varía var de stdage)
String = String + Age + "\ n";

consola.log ("Edad del estudiante:");
consola.log (cadena);

El programa anterior sirvió las funcionalidades de la lista a continuación:

  • Creó una matriz y una cadena vacía.
  • Utilizado para ... de declaraciones.
  • Iterado sobre cada elemento de matriz.
  • Almacenó la edad del estudiante en la variable de cadena.
  • Finalmente, imprimió la edad del estudiante en la consola.

La salida verificó el funcionamiento de las declaraciones en JavaScript.

Cómo iterar elementos de matriz usando la función MAP ()?

En JavaScript, la función map () se puede usar para obtener una nueva matriz de elementos mapeados. El método map () invoca una función para cada elemento de matriz.

El siguiente será la sintaxis para el método de mapa de matriz ():

nombre del nombre.map (functionAname);

Ejemplo: iterando sobre una matriz usando el método de mapa
En este programa, utilizaremos el método de mapa para iterar sobre la matriz:

var stdage = [15, 20, 17, 16, 19];
var doubleage = stdage.Mapa (TwicEage)
función twiceage (resultado)
Resultado de retorno * 2;

consola.log ("matriz original:", stdage);
consola.log ("Array resultante:", DobleAge);

El fragmento de código anterior realizó las funciones enumeradas a continuación:

  • Creó una matriz.
  • Utilizado la función map () para iterar sobre la matriz dada.
  • El método map () multiplicado cada elemento por 2 y lo devolvió.

La salida aclaró que el método map () iteraba sobre cada elemento de matriz y multiplicaba los elementos de la matriz por 2.

Del mismo modo, podemos utilizar algunos otros métodos de matriz incorporados bien conocidos para iterar sobre una matriz, por ejemplo, "matriz.filtro () "," matriz.algunos () "," Array.cada () ", y así sucesivamente.

Conclusión

JavaScript ofrece múltiples formas, como bucles y algunos métodos de matriz incorporados para iterar sobre una matriz. En JavaScript, las funciones de iteración de la matriz como Foreach (), MAP (), Filter (), etc. operar en cada elemento de matriz. Este artículo explicó cinco formas de uso común para iterar elementos de matriz en JavaScript. Para una comprensión profunda de los conceptos, explicó cada método de iteración utilizando los ejemplos mejor adecuados.