Si ha estado escribiendo JavaScript incluso durante un período breve de tiempo, probablemente aún esté consciente de la rapidez con la que cambia el idioma. Dados todos estos cambios, eso significa que también hay varias formas de realizar la misma función. En este caso, me refiero a recorrer matrices usando un for-each construir.
Entonces, ¿cuál es la mejor manera de hacerlo? Esa pregunta depende de algunas cosas, como la versión de JS que estás usando, si puedes usar métodos de instancia, etc. En este artículo exploraré varias formas de recorrer matrices en JS.
Array’s forEach método
Contenido
Un método ampliamente soportado (excepto en IE 8, como era de esperar) es el Array.prototype.forEach método. Funciona aceptando una función de devolución de llamada con los parámetros currentValue, indexy array. En muchos casos, solo el currentValue y index se utilizan parámetros.
Aquí hay un ejemplo:
let items = ['one', 'two', 'three', 'four'];
items.forEach(function(val, idx) {
console.log(`${idx}: ${val}`);
});
// Output:
//
// 0: one
// 1: two
// 2: three
// 3: four
Este es un gran método debido a su simplicidad y sintaxis limpia, aunque tiene algunas desventajas. En particular, es difícil salir de este bucle, a diferencia del for bucle donde puede usar el break palabra clave. Con forEach debe lanzar una excepción para salir temprano del ciclo.
Como el MDN señala la documentación, si necesita salir de un forEach loop, entonces este método es la herramienta incorrecta. En este caso, algunas mejores opciones serían:
- Incorporado
forbucle (detallado a continuación) - Incorporado
for-ofbucle (detallado a continuación) Array.prototype.every()Array.prototype.some()Array.prototype.find()Array.prototype.findIndex()
los Array.prototype.* Los métodos anteriores pueden salir de sus bucles devolviendo un valor verdadero que le dice al bucle si debe continuar.
los forEach El método es bueno para cuando tiene requisitos de bucle muy simples y no necesita mucho control sobre el comportamiento de bucle real. Sin embargo, esta simplicidad tiene un costo. Es aproximadamente un 95% más lento que el incorporado for bucle, pero para la mayoría de la gente esta ralentización será insignificante.
Integrado para bucle
El incorporado for bucle (también conocido como simple for loop) es probablemente la opción más conocida, ya que funciona de la misma manera en JavaScript que en muchos otros lenguajes. La sintaxis es la siguiente:
let items = ['one', 'two', 'three', 'four'];
for (let i = 0; i < items.length; ++i) {
console.log(`${i}: ${items[i]}`);
}
// Output:
//
// 0: one
// 1: two
// 2: three
// 3: four
Este tipo de for loop tiene una serie de ventajas:
- Es familiar para la mayoría de los programadores
- Continuación del lazo de control
breakycontinuepalabras clave - Dirección del contador de control (vía
++io--i) y tasa (es deciri+2) - Bucle parcial (es decir
for (let i = 0; i < items.length/2; ++i))
Con tanto control sobre su ciclo, también debe lidiar con su sintaxis detallada, por lo que a menudo se evita para casos de uso más simples.
Tenga en cuenta que el ejemplo que se muestra arriba asume que está usando ES6 JavaScript; de lo contrario, deberá declarar el i variable usando var y fuera del bucle en sí.
Bucle for-in incorporado
Probablemente, las formas de bucle en JavaScript más mal entendidas es la for-in lazo. A primera vista, parece que puede usar esto para recorrer cada índice en una matriz, pero en realidad está destinado a recorrer los nombres de propiedad enumerables de un objeto, y no necesariamente solo los índices.
Por ejemplo, así es como se usa con matrices:
let items = ['one', 'two', 'three', 'four'];
for (let i in items) {
console.log(`${i}: ${items[i]}`);
}
// Output:
//
// 0: one
// 1: two
// 2: three
// 3: four
Y así es como debe usarse con objetos:
let obj = {hi: 'bye', one: 'two', foo: 'bar'};
for (let o in obj) {
console.log(`${o}: ${obj[o]}`);
}
// Output
//
// hi: bye
// one: two
// foo: bar
Muchos desarrolladores desaconsejarán explícitamente el uso de esto para iterar sobre matrices, especialmente si el orden es importante ya que el orden no está garantizado.
Si desea recorrer una matriz con este estilo de sintaxis, entonces for-of se recomienda, que es el tema central de la siguiente sección.
Bucle for-of incorporado
los for-of los bucles tienen una sintaxis muy similar a for-in, que acabamos de ver. Sin embargo, la principal diferencia es que itera sobre objetos iterables (como cadenas, matrices, mapas, conjuntos, etc.), mientras que for-in itera sobre todas las propiedades enumerables que no son símbolos de un objeto.
En la práctica, esto es lo que parece:
let items = ['one', 'two', 'three', 'four'];
for (let i of items) {
console.log(i);
}
// Output:
//
// one
// two
// three
// four
Note que el i La variable ya no es el índice, sino el valor real de la matriz. Y dado que solo funciona en iterables, ya no podemos usar un objeto:
let obj = {hi: 'bye', one: 'two', foo: 'bar'};
for (let o of obj) {
console.log(o);
}
// Output:
//
// TypeError: obj is not iterable
En términos de sintaxis y funcionalidad, esto es un compromiso entre el Array.forEach función y incorporado for bucle ya que la sintaxis es más limpia que la simple for loop, y aún te permite usar palabras clave de “control” de loop como break y continue, diferente a forEach.
Otra característica interesante es que funciona bien con generadores, por lo que puede aprovechar esto más fácilmente en sus bucles:
function* myWords() {
yield 'foo';
yield 'bar';
yield 'baz';
}
for (let w of myWords()) {
console.log(w);
}
// Output:
//
// foo
// bar
// baz
Conclusión
Como puede ver, hay bastantes formas de realizar un bucle for-each sobre una matriz en JavaScript, y la construcción que elija depende en gran medida de lo que desee lograr y su caso de uso específico.
En este artículo vimos cómo iterar sobre matrices usando Array.forEach, incorporado for bucles for-in bucles y for-of bucles. No dude en dejar un comentario a continuación con cualquier crítica o mejora que vea.
