Según la nueva característica actualizada ECMAScript 6 (ES6) y ECMAScript 2015, puede usar las siguientes opciones con bucles:

para bucles

 for(var i = 0; i < 5; i++){ console.log(i); } // Output: 0,1,2,3,4

para... en bucles

 let obj = {"a":1, "b":2} for(let k in obj){ console.log(k) } // Output: a,b

Matriz.paraCada()

 let array = [1,2,3,4] array.forEach((x) => { console.log(x); }) // Output: 1,2,3,4

para... de bucles

 let array = [1,2,3,4] for(let x of array){ console.log(x); } // Output: 1,2,3,4

mientras que los bucles

 let x = 0 while(x < 5){ console.log(x) x++ } // Output: 1,2,3,4

hacer... mientras bucles

 let x = 0 do{ console.log(x) x++ }while(x < 5) // Output: 1,2,3,4

Supongamos que tenemos una serie de temas:

 let ddl = new Array(); if (subjects) { subjects.forEach(function (s) {ddl.push({"id": s.id, "label": s.name});}); }

para... de | paraCada | mapa

Usando la sintaxis moderna de JavaScript para iterar a través de matrices

 const fruits = ['🍎', '🍋', '🍌' ]

👉🏽 para... de

 for (const fruit of fruits) { console.log(fruit) // '🍎', '🍋', '🍌' }

👉🏽 paraCada uno

 fruits.forEach(fruit => { console.log(fruit) // '🍎', '🍋', '🍌' })

👉🏽 mapa

*A diferencia de los dos anteriores, map() crea una nueva matriz y espera que devuelva algo después de cada iteración.

 fruits.map(fruit => fruit) // ['🍎', '🍋', '🍌' ]

🛑 Importante : como map() está destinado a devolver un valor en cada iteración, es un método ideal para transformar elementos en matrices:

 fruits.map(fruit => 'cool ' + fruit) // ['cool 🍎', 'cool 🍋', 'cool 🍌' ]

Por otro lado, for...of y forEach() no necesitan devolver nada y es por eso que normalmente los usamos para realizar tareas lógicas que manipulan cosas externas.

Por así decirlo, encontrará instrucciones if (), efectos secundarios y actividades de registro en estos dos.

👌🏾 CONSEJO: también puede tener el índice (así como la matriz completa) en cada iteración en sus funciones .map() o .forEach().

Solo pásales argumentos adicionales:

 fruits.map((fruit, i) => i + ' ' + fruit) // ['0 🍎', '1 🍋', '2 🍌' ] fruits.forEach((f, i, arr) => { console.log( f + ' ' + i + ' ' + arr ) }) // 🍎 0 🍎, 🍋, 🍌, // 🍋 1 🍎, 🍋, 🍌, // 🍌 2 🍎, 🍋, 🍌,

Tratar:

 var data = [1, 2, 3, 4, 5, 6, 7]; var newData = $.map(data, function(element) { if (element % 2 == 0) { return element; } }); // newData = [2, 4, 6];

Vengo de Python, y encontré esta forma mucho más clara.

theArray es la matriz, y la instance son los elementos de la matriz:

 for (let instance of theArray) { console.log("The instance", instance); }

o

 for (instance in theArray) { console.log("The instance", instance); }

comparar con:

 theArray.forEach(function(instance) { console.log(instance); });

Pero al final del día ambos están haciendo lo mismo.

Si desea mantener su código de manera funcional, use map :

 theArray.map(instance => do_something);

De esta manera, generará una nueva matriz para operaciones futuras y omitirá cualquier efecto secundario no deseado.

Si desea recorrer una matriz de objetos con la función de flecha:

 let arr = [{name:'john', age:50}, {name:'clark', age:19}, {name:'mohan', age:26}]; arr.forEach((person)=>{ console.log('I am ' + person.name + ' and I am ' + person.age + ' old'); })

Documentación de Mozilla

 /* Get all forms */ document.querySelectorAll( "form" ).forEach( form => { /* For each form, add the onsubmit event */ form.addEventListener( "submit", event => { event.preventDefault(); // Return false /* Display it */ alert(event.target.action); console.log(event.target); } ); } );

 <form action="form1.php" > <input type="submit" value="Submit" /> </form> <form action="form2.php" > <input type="submit" value="Submit" /> </form> <form action="form3.php" > <input type="submit" value="Submit" /> </form>

Puedes usar:

1. Para cada

    theArray.forEach(function (array, index) { console.log(index); console.log(array); });

2. por

    for(var i=0; i<theArray.length; i++) { console.log(i) }

3. mapa

    theArray.map(x => console.log(x));

4. mapa

    theArray.filter(x => console.log(x));

Y hay muchos otros para la iteración.

Yo diría que for/of es el camino a seguir:

 const arr = ['a', 'b', 'c']; for (const v of arr) { console.log(v); // Prints "a", "b", "c" }

• A diferencia for/in , for/of omite propiedades no numéricas en la matriz. Por ejemplo, si configura arr.foo = 'test' , for (var v in arr) recorrerá la tecla 'foo' .

• A diferencia forEach() , for/of no omite "agujeros" en las matrices. const arr = ['a',, 'c'] es JavaScript válido, solo el segundo elemento es un "agujero". La matriz es funcionalmente equivalente a ['a', undefined, 'c'] .

Puede leer más en esta publicación de blog sobre for/of vs forEach() .

A partir de ECMAScript 6:

 list = [0, 1, 2, 3] for (let obj of list) { console.log(obj) }

Where of evita las rarezas asociadas con in y lo hace funcionar como el ciclo for de cualquier otro idioma, y let une i dentro del ciclo en lugar de dentro de la función.

Las llaves ( {} ) se pueden omitir cuando solo hay un comando (por ejemplo, en el ejemplo anterior).

Una forma más cercana a su idea sería usar Array.forEach() que acepta una función de cierre que se ejecutará para cada elemento de la matriz.

 myArray.forEach( (item) => { // Do something console.log(item); } );

Otra forma viable sería usar Array.map() que funciona de la misma manera, pero también toma todos los valores que devuelve y los devuelve en una nueva matriz (esencialmente asignando cada elemento a uno nuevo), así:

 var myArray = [1, 2, 3]; myArray = myArray.map( (item) => { return item + 1; } ); console.log(myArray); // [2, 3, 4]

La sintaxis lambda no suele funcionar en Internet Explorer 10 o inferior.

Yo suelo usar el

 [].forEach.call(arrayName,function(value,index){ console.log("value of the looped element" + value); console.log("index of the looped element" + index); });

Si es fanático de jQuery y ya tiene un archivo jQuery ejecutándose, debe invertir las posiciones de los parámetros de índice y valor

 $("#ul>li").each(function(**index, value**){ console.log("value of the looped element" + value); console.log("index of the looped element" + index); });

ECMAScript 5 (la versión en JavaScript) para trabajar con matrices:

forEach : itera a través de cada elemento de la matriz y hace lo que necesite con cada elemento.

 ['C', 'D', 'E'].forEach(function(element, index) { console.log(element + " is #" + (index+1) + " in the musical scale"); }); // Output // C is the #1 in musical scale // D is the #2 in musical scale // E is the #3 in musical scale

En caso de que esté más interesado en la operación en una matriz usando alguna característica incorporada.

map - Crea una nueva matriz con el resultado de la función de devolución de llamada. Este método es bueno para usar cuando necesita formatear los elementos de su matriz.

 // Let's upper case the items in the array ['bob', 'joe', 'jen'].map(function(elem) { return elem.toUpperCase(); }); // Output: ['BOB', 'JOE', 'JEN']

reduce : como su nombre lo dice, reduce la matriz a un solo valor llamando a la función dada pasando el elemento actual y el resultado de la ejecución anterior.

 [1,2,3,4].reduce(function(previous, current) { return previous + current; }); // Output: 10 // 1st iteration: previous=1, current=2 => result=3 // 2nd iteration: previous=3, current=3 => result=6 // 3rd iteration: previous=6, current=4 => result=10

cada : devuelve verdadero o falso si todos los elementos de la matriz pasan la prueba en la función de devolución de llamada.

 // Check if everybody has 18 years old of more. var ages = [30, 43, 18, 5]; ages.every(function(elem) { return elem >= 18; }); // Output: false

filtro : muy similar a todos, excepto que el filtro devuelve una matriz con los elementos que devuelven verdadero a la función dada.

 // Finding the even numbers [1,2,3,4,5,6].filter(function(elem){ return (elem % 2 == 0) }); // Output: [2,4,6]

Hay algunas formas de recorrer una matriz en JavaScript, como se muestra a continuación:

para - es el más común . Bloque completo de código para bucle

 var languages = ["Java", "JavaScript", "C#", "Python"]; var i, len, text; for (i = 0, len = languages.length, text = ""; i < len; i++) { text += languages[i] + "<br>"; } document.getElementById("example").innerHTML = text;

 <p id="example"></p>

while - bucle mientras se cumple una condición. Parece ser el bucle más rápido.

 var text = ""; var i = 0; while (i < 10) { text += i + ") something<br>"; i++; } document.getElementById("example").innerHTML = text;

 <p id="example"></p>

do/while - también recorrer un bloque de código mientras la condición es verdadera, se ejecutará al menos una vez

 var text = "" var i = 0; do { text += i + ") something <br>"; i++; } while (i < 10); document.getElementById("example").innerHTML = text;

 <p id="example"></p>

Bucles funcionales : forEach , map , filter , también reduce (recorren la función, pero se usan si necesita hacer algo con su matriz, etc.

 // For example, in this case we loop through the number and double them up using the map function var numbers = [65, 44, 12, 4]; document.getElementById("example").innerHTML = numbers.map(function(num){return num * 2});

 <p id="example"></p>

Para obtener más información y ejemplos sobre programación funcional en matrices, consulte la publicación de blog Programación funcional en JavaScript: mapear, filtrar y reducir .

var a = ["car", "bus", "truck"] a.forEach(function(item, index) { console.log("Index" + index); console.log("Element" + item); })

Si desea usar forEach() , se verá así:

 theArray.forEach ( element => { console.log(element); });

Si desea usar for() , se verá así:

 for(let idx = 0; idx < theArray.length; idx++){ let element = theArray[idx]; console.log(element); }

Puedes llamar a cada uno así:

forEach sobre la matriz que proporcione y para cada iteración tendrá un element que contenga el valor de esa iteración. Si necesita un índice, puede obtener el índice actual pasando i como el segundo parámetro en la función de devolución de llamada para forEach.

Foreach es básicamente una función de orden superior, que toma otra función como parámetro.

 let theArray= [1,3,2]; theArray.forEach((element) => { // Use the element of the array console.log(element) }

Producción:

 1 3 2

También puede iterar sobre una matriz como esta:

 for (let i=0; i<theArray.length; i++) { console.log(i); // i will have the value of each index }

Si no te importa vaciar la matriz:

 var x; while(x = y.pop()){ alert(x); //do something }

x contendrá el último valor de y y se eliminará de la matriz. También puede usar shift() que dará y eliminará el primer elemento de y .

Una implementación forEach ( ver en jsFiddle ):

 function forEach(list,callback) { var length = list.length; for (var n = 0; n < length; n++) { callback.call(list[n]); } } var myArray = ['hello','world']; forEach( myArray, function(){ alert(this); // do something } );

Nota : esta respuesta está irremediablemente desactualizada. Para un enfoque más moderno, observe los métodos disponibles en una matriz . Los métodos de interés pueden ser:

• para cada
• mapa
• filtrar
• Código Postal
• reducir
• cada
• algunos

La forma estándar de iterar una matriz en JavaScript es un bucle for vanilla:

 var length = arr.length, element = null; for (var i = 0; i < length; i++) { element = arr[i]; // Do something with element }

Tenga en cuenta, sin embargo, que este enfoque solo es bueno si tiene una matriz densa y cada índice está ocupado por un elemento. Si la matriz es escasa, puede tener problemas de rendimiento con este enfoque, ya que iterará sobre muchos índices que realmente no existen en la matriz. En este caso, un for .. in -loop podría ser una mejor idea. Sin embargo , debe utilizar las medidas de seguridad adecuadas para garantizar que solo se actúe sobre las propiedades deseadas de la matriz (es decir, los elementos de la matriz), ya que el for..in también se enumerará en los navegadores heredados, o si el adicional Las propiedades se definen como enumerable .

En ECMAScript 5 habrá un método forEach en el prototipo de matriz, pero no es compatible con navegadores heredados. Entonces, para poder usarlo de manera consistente, debe tener un entorno que lo admita (por ejemplo, Node.js para JavaScript del lado del servidor) o usar un "Polyfill". El Polyfill para esta funcionalidad es, sin embargo, trivial y dado que hace que el código sea más fácil de leer, es un buen polyfill para incluir.

Si desea realizar un bucle sobre una matriz, utilice el bucle for estándar de tres partes.

 for (var i = 0; i < myArray.length; i++) { var arrayItem = myArray[i]; }

Puede obtener algunas optimizaciones de rendimiento almacenando en caché myArray.length o iterándolo hacia atrás.

No hay ninguno for each bucle en JavaScript nativo. Puede usar bibliotecas para obtener esta funcionalidad (recomiendo Underscore.js ), use un simple for in loop.

 for (var instance in objects) { ... }

Sin embargo, tenga en cuenta que puede haber razones para usar un bucle for aún más simple (consulte la pregunta de desbordamiento de pila ¿Por qué es una mala idea usar "for...in" con la iteración de matriz? )

 var instance; for (var i=0; i < objects.length; i++) { var instance = objects[i]; ... }

Algunos lenguajes de estilo C usan foreach para recorrer las enumeraciones. En JavaScript, esto se hace con la estructura de bucle for..in :

 var index, value; for (index in obj) { value = obj[index]; }

Hay una trampa. for..in recorrerá cada uno de los miembros enumerables del objeto y los miembros de su prototipo. Para evitar leer valores que se heredan a través del prototipo del objeto, simplemente verifique si la propiedad pertenece al objeto:

 for (i in obj) { if (obj.hasOwnProperty(i)) { //do stuff } }

Además, ECMAScript 5 ha agregado un método forEach a Array.prototype que se puede usar para enumerar una matriz usando una devolución de llamada (el polyfill está en los documentos, por lo que aún puede usarlo para navegadores más antiguos):

 arr.forEach(function (val, index, theArray) { //do stuff });

Es importante tener en cuenta que Array.prototype.forEach no se interrumpe cuando la devolución de llamada devuelve false . jQuery y Underscore.js proporcionan sus propias variaciones en each para proporcionar bucles que se pueden cortocircuitar.

Si está utilizando la biblioteca jQuery , puede usar jQuery.each :

 $.each(yourArray, function(index, value) { // do your stuff here });

EDITAR:

Según la pregunta, el usuario quiere código en javascript en lugar de jquery, por lo que la edición es

 var length = yourArray.length; for (var i = 0; i < length; i++) { // Do something with yourArray[i]. }

También me gustaría agregar esto como una composición de un bucle inverso y una respuesta anterior para alguien a quien también le gustaría esta sintaxis.

 var foo = [object,object,object]; for (var i = foo.length, item; item = foo[--i];) { console.log(item); }

Ventajas:

El beneficio de esto: ya tiene la referencia en la primera, así que no será necesario declararla más tarde con otra línea. Es útil cuando se realiza un bucle a través de la matriz de objetos.

Contras:

Esto se romperá siempre que la referencia sea falsa - falsey (indefinido, etc.). Sin embargo, se puede usar como una ventaja. Sin embargo, sería un poco más difícil de leer. Y también dependiendo del navegador puede estar "no" optimizado para funcionar más rápido que el original.

No hay una capacidad incorporada para interrumpir forEach . Para interrumpir la ejecución, use Array#some como se muestra a continuación:

 [1,2,3].some(function(number) { return number === 1; });

Esto funciona porque some devuelven verdadero tan pronto como cualquiera de las devoluciones de llamada, ejecutadas en orden de matriz, devuelve verdadero, provocando un cortocircuito en la ejecución del resto. Respuesta original ver prototipo de matriz para algunos

Este es un iterador para una lista NO dispersa donde el índice comienza en 0, que es el escenario típico cuando se trata de document.getElementsByTagName o document.querySelectorAll)

 function each( fn, data ) { if(typeof fn == 'string') eval('fn = function(data, i){' + fn + '}'); for(var i=0, L=this.length; i < L; i++) fn.call( this[i], data, i ); return this; } Array.prototype.each = each;

Ejemplos de uso:

Ejemplo 1

 var arr = []; [1, 2, 3].each( function(a){ a.push( this * this}, arr); arr = [1, 4, 9]

Ejemplo #2

 each.call(document.getElementsByTagName('p'), "this.className = data;",'blue');

Cada etiqueta p obtiene class="blue"

Ejemplo #3

 each.call(document.getElementsByTagName('p'), "if( i % 2 == 0) this.className = data;", 'red' );

Cualquier otra etiqueta p obtiene class="red" >

Ejemplo #4

 each.call(document.querySelectorAll('p.blue'), function(newClass, i) { if( i < 20 ) this.className = newClass; }, 'green' );

Y finalmente las primeras 20 etiquetas p azules se cambian a verde

Precaución al usar una cadena como función: la función se crea fuera de contexto y debe usarse solo cuando esté seguro del alcance de la variable. De lo contrario, es mejor pasar funciones donde el alcance es más intuitivo.

Hay tres implementaciones de foreach en jQuery de la siguiente manera.

 var a = [3,2]; $(a).each(function(){console.log(this.valueOf())}); //Method 1 $.each(a, function(){console.log(this.valueOf())}); //Method 2 $.each($(a), function(){console.log(this.valueOf())}); //Method 3

forma jQuery usando $.map :

 var data = [1, 2, 3, 4, 5, 6, 7]; var newData = $.map(data, function(element) { if (element % 2 == 0) { return element; } }); // newData = [2, 4, 6];

Una solución fácil ahora sería usar la biblioteca underscore.js . Proporciona muchas herramientas útiles, como each y delegará automáticamente el trabajo al forEach nativo si está disponible.

Un ejemplo de CodePen de cómo funciona es:

 var arr = ["elemA", "elemB", "elemC"]; _.each(arr, function(elem, index, ar) { ... });

Ver también

• Documentación para Array.prototype.forEach() nativo .
• En for_each...in (MDN) se explica que for each (variable in object) está en desuso como parte del estándar ECMA-357 ( EAX ).
• for...of (MDN) describe la siguiente forma de iterar usando for (variable of object) como parte de la propuesta de Harmony (ECMAScript 6).

Probablemente el ciclo for(i = 0; i < array.length; i++) no sea la mejor opción. ¿Por qué? Si tienes esto:

 var array = new Array(); array[1] = "Hello"; array[7] = "World"; array[11] = "!";

El método llamará desde array[0] a array[2] . Primero, esto primero hará referencia a las variables que ni siquiera tiene, segundo, no tendrá las variables en la matriz, y tercero, hará que el código sea más audaz. Mira aquí, es lo que yo uso:

 for(var i in array){ var el = array[i]; //If you want 'i' to be INT just put parseInt(i) //Do something with el }

Y si quieres que sea una función, puedes hacer esto:

 function foreach(array, call){ for(var i in array){ call(array[i]); } }

Si quieres romper, un poco más de lógica:

 function foreach(array, call){ for(var i in array){ if(call(array[i]) == false){ break; } } }

Ejemplo:

 foreach(array, function(el){ if(el != "!"){ console.log(el); } else { console.log(el+"!!"); } });

Vuelve:

 //Hello //World //!!!