Introducción
Desde mi tiempo en la universidad, he programado en Java, JavaScript, Pascal, ABAP , PHP, Progress 4GL, C / C ++ y posiblemente en algunos otros idiomas que no puedo pensar en este momento.
Si bien todos tienen sus propias idiosincrasias lingüísticas, cada uno de estos idiomas comparte muchos de los mismos conceptos básicos. Dichos conceptos incluyen procedimientos / funciones, IF-declaraciones, FOR-loops y WHILE-loops.
Un forbucle tradicional
Un forbucle tradicional tiene tres componentes:
- La inicialización: ejecutada antes de que el bloque de búsqueda se ejecute por primera vez
- La condición: comprueba una condición cada vez antes de que se ejecute el bloque de bucle y abandona el bucle si es falso
- La idea de último momento: se realiza cada vez que se ejecuta el bloque de bucle
Estos tres componentes están separados entre sí por un ;símbolo. El contenido de cada uno de estos tres componentes es opcional, lo que significa que el siguiente es el forbucle más mínimo posible:
for (;;) {
// Do stuff
}
Por supuesto, deberá incluir un if(condition === true) { break; } o un if(condition === true) { return; }lugar dentro de ese forbucle para que deje de funcionar.
Por lo general, sin embargo, la inicialización se usa para declarar un índice, la condición se usa para comparar ese índice con un valor mínimo o máximo, y la idea de último momento se usa para incrementar el índice:
for (var i = 0, length = 10; i < length; i++) {
console.log(i);
}
Usar un forbucle tradicional para recorrer una matriz
La forma tradicional de recorrer una matriz es esta:
for (var i = 0, length = myArray.length; i < length; i++) {
console.log(myArray[i]);
}
O, si prefiere hacer un bucle hacia atrás, haga esto:
for (var i = myArray.length - 1; i > -1; i--) {
console.log(myArray[i]);
}
Sin embargo, hay muchas variaciones posibles, como por ejemplo esta:
for (var key = 0, value = myArray[key], length = myArray.length; key < length; value = myArray[++key]) {
console.log(value);
}
...o este...
var i = 0, length = myArray.length;
for (; i < length;) {
console.log(myArray[i]);
i++;
}
...o este:
var key = 0, value;
for (; value = myArray[key++];){
console.log(value);
}
Lo que funcione mejor depende en gran medida del gusto personal y del caso de uso específico que está implementando.
Tenga en cuenta que cada una de estas variaciones es compatible con todos los navegadores, incluidos los muy antiguos.
Un whilebucle
Una alternativa a un forbucle es un whilebucle. Para recorrer una matriz, puede hacer esto:
var key = 0;
while(value = myArray[key++]){
console.log(value);
}
Al igual que los forbucles tradicionales , los whilebucles son compatibles incluso con los navegadores más antiguos.
Además, tenga en cuenta que cada ciclo while se puede reescribir como un forciclo. Por ejemplo, el whilebucle anterior se comporta exactamente de la misma manera que este forbucle:
for(var key = 0; value = myArray[key++];){
console.log(value);
}
For...in y for...of
En JavaScript, también puedes hacer esto:
for (i in myArray) {
console.log(myArray[i]);
}
Sin embargo, esto debe usarse con cuidado, ya que no se comporta de la misma manera que un forciclo tradicional en todos los casos, y hay posibles efectos secundarios que deben considerarse. Consulte ¿Por qué usar "for ... in" con iteración de matriz es una mala idea? para más detalles.
Como alternativa a for...in, ahora también hay para for...of. El siguiente ejemplo muestra la diferencia entre un for...ofbucle y un for...inbucle:
var myArray = [3, 5, 7];
myArray.foo = "hello";
for (var i in myArray) {
console.log(i); // logs 0, 1, 2, "foo"
}
for (var i of myArray) {
console.log(i); // logs 3, 5, 7
}
Además, debe tener en cuenta que ninguna versión de Internet Explorer es compatible for...of( Edge 12+ lo hace) y que for...inrequiere al menos Internet Explorer 10.
Array.prototype.forEach()
Una alternativa a for-loops es Array.prototype.forEach(), que usa la siguiente sintaxis:
myArray.forEach(function(value, key, myArray) {
console.log(value);
});
Array.prototype.forEach() es compatible con todos los navegadores modernos, así como con Internet Explorer 9 y versiones posteriores.
Bibliotecas
Finalmente, muchas bibliotecas de utilidad también tienen su propia foreachvariación. AFAIK, los tres más populares son estos:
jQuery.each(), en jQuery :
$.each(myArray, function(key, value) {
console.log(value);
});
_.each(), en Underscore.js :
_.each(myArray, function(value, key, myArray) {
console.log(value);
});
_.forEach(), en Lodash.js :
_.forEach(myArray, function(value, key) {
console.log(value);
});
for-ininyofeso puede usarse y hacer cosas diferentes. Entonces también tienesforEachy el bucle basado en índices feo y molesto. Todos los demás idiomas modernos hacen que recorrer una colección sea fácil y directo, sin sorpresas ni confusión. JS también podría, pero no lo hace.