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
, index
y 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
for
bucle (detallado a continuaci贸n) - Incorporado
for-of
bucle (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
break
ycontinue
palabras clave - Direcci贸n del contador de control (v铆a
++i
o--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.