For-each sobre una matriz en JavaScript

    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

    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 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 y continue palabras clave
    • Direcci贸n del contador de control (v铆a ++i o --i) y tasa (es decir i+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.

    Etiquetas:

    Deja una respuesta

    Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *