Para cada uno sobre una matriz en JavaScript

Si ha estado escribiendo JavaScript incluso durante un corto período de tiempo, es probable que aún esté al tanto de lo rápido que cambia el idioma. Teniendo en cuenta todos estos cambios, eso significa que también hay varias formas de realizar la misma función. En este caso me refiero a hacer un bucle sobre matrices utilizando una for-eachconstrucción.
Entonces, ¿cuál es la mejor manera de hacerlo? Esa pregunta depende de algunas cosas, como la versión de JS que está utilizando, si puede usar métodos de instancia, etc. En este artículo, exploraré varias formas de realizar un bucle entre arreglos en JS.

Método de Array para cada método

Un método ampliamente soportado (excepto en IE 8, como era de esperar) es el Array.prototype.forEachmétodo. Funciona mediante la aceptación de una función de devolución de llamada con los parámetros currentValueindexarrayEn muchos casos, solo se utilizan los parámetros currentValueindex.
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 algunos inconvenientes. En particular, es difícil salir de este bucle, a diferencia del forbucle incorporado donde se puede usar la breakpalabra clave. Con forEachusted debe lanzar una excepción para salir temprano del bucle.
Como señala la documentación de la MDN , si necesita salir de un forEachbucle, entonces este método es la herramienta incorrecta. En este caso, algunas mejores opciones serían:
  • forBucle incorporado (detallado abajo)
  • for-ofBucle incorporado (detallado abajo)
  • Array.prototype.every()
  • Array.prototype.some()
  • Array.prototype.find()
  • Array.prototype.findIndex()
Los Array.prototype.*métodos anteriores pueden salir de sus bucles devolviendo un valor de verdad que indica al bucle si debe continuar.
El forEachmétodo es bueno para cuando tiene requisitos de bucle muy simples y no necesita mucho control sobre el comportamiento del bucle real. Sin embargo, esta simplicidad tiene un costo. Es aproximadamente un 95% más lento que el forbucle incorporado , pero para la mayoría de las personas, esta desaceleración será insignificante.

Incorporado para bucle

El forbucle integrado (también conocido como forbucle simple ) es probablemente la opción más conocida, ya que funciona de la misma manera en JavaScript que en muchos otros idiomas. 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 forbucle tiene una serie de ventajas:
  • Es familiar para la mayoría de los programadores
  • Continuación del bucle de control breakcontinuepalabras clave.
  • Control de la dirección del contador (vía ++i--i) y velocidad (es decir i+2)
  • Bucle parcial (es decir for (let i = 0; i < items.length/2; ++i))
Con tanto control sobre su bucle, también tiene que lidiar con su sintaxis verbosa, 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á utilizando ES6 JavaScript, de lo contrario deberá declarar la ivariable utilizando vary fuera del propio bucle.

Loop for-in incorporado

Probablemente, las formas más a menudo mal entendidas de bucle en JavaScript es el for-inbucle. 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 propiedades enumerables de un objeto, y no necesariamente solo índices.
Por ejemplo, aquí es cómo se utiliza 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 aquí está cómo debe utilizarse 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 realmente desaconsejarán explícitamente el uso de esto para iterar sobre arreglos, 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-ofse recomienda, que es el enfoque de la siguiente sección.

Construido en for-of Loop

Los for-ofbucles tienen una sintaxis muy similar a la for-inque acabamos de ver. Sin embargo, la principal diferencia es que itera sobre objetos iterables (como Strings, Arrays, Maps, Sets, etc.), mientras que for-initera sobre todas las propiedades enumerables de un objeto que no son símbolos.
En la práctica, esto es lo que parece:
let items = ['one', 'two', 'three', 'four'];  
for (let i of items) {  
    break;
    console.log(i);
}

// Output:
//
// one
// two
// three
// four
Observe que la ivariable ya no es el índice, sino que es el valor de la matriz real. Y como 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 cuanto a la sintaxis y la funcionalidad, esto es un poco de un compromiso entre la Array.forEachfunción y una función de forbucle ya que la sintaxis es más limpio que el de la simple forbucle, y todavía permite el uso de palabras clave de bucle de "control" como breakcontinue, a diferencia forEach.
Otra buena característica 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 varias formas de realizar un bucle for-each a través de una matriz en JavaScript, y la construcción que elija depende en gran medida de lo que quiera lograr y de su caso de uso específico.
En este artículo vimos cómo iterar sobre matrices utilizando Array.forEachforloops, for-inloops y for-ofloops integrados Siéntase libre de dejar un comentario a continuación con cualquier crítica o mejora que vea.

Acerca de: Programator

Somos Instinto Programador

0 comentarios:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Con tecnología de Blogger.