objetos ¿Para cada uno sobre una matriz en JavaScript?




for array javascript (23)

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 .

¿Cómo puedo recorrer todas las entradas de una matriz utilizando JavaScript?

Pensé que era algo como esto:

forEach(instance in theArray)

Donde theArray es mi matriz, pero esto parece ser incorrecto.


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

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

Pros:

El beneficio para esto: Ya tiene la referencia en el primero, así que no será necesario declararlo más adelante con otra línea. Es útil cuando se realiza un bucle a través de la matriz de objetos.

Contras:

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


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 bucles

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 - loop mientras que una condición es completa. 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 recorre 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(que bucle a través de la función, sino que se utiliza si usted tiene que 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 la programación funcional en arreglos, consulte la publicación del blog Programación funcional en JavaScript: mapear, filtrar y reducir .


Edición : Esta respuesta está totalmente fuera de fecha. Para un enfoque más moderno, mira los métodos disponibles en una matriz . Los métodos de interés pueden ser:

  • para cada
  • mapa
  • filtrar
  • cremallera
  • reducir
  • cada
  • algunos

La forma estándar de iterar una matriz en JavaScript es una vainilla for -loop:

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

Sin embargo, tenga en cuenta que este enfoque solo es bueno si tiene una matriz densa y cada índice está ocupado por un elemento. Si la matriz es escasa, entonces puede tener problemas de rendimiento con este enfoque, ya que recorrerá una gran cantidad de índices que realmente no existen en la matriz. En este caso, un for .. in -loop podría ser una mejor idea. Sin embargo , debe usar los resguardos apropiados para asegurarse de que solo se actúen las propiedades deseadas de la matriz (es decir, los elementos de la matriz), ya que el for..in -loop 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 los navegadores heredados. Por lo tanto, 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 como hace que el código sea más fácil de leer, es un buen polyfill para incluir.


Hay tres implementaciones de foreachen jQuery como sigue.

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

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

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

Puede obtener algunas optimizaciones de rendimiento si almacena en caché myArray.length o lo myArray.length hacia atrás.


Este es un iterador para la 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'
);

Cada 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 la 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.


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

Si tienes una matriz masiva, debes usarla iteratorspara ganar algo de eficiencia. Los iteradores son una propiedad de ciertas colecciones de JavaScript (como Map, Set, String, Array). Incluso, for...ofutiliza iteratorbajo el capó.

Los iteradores mejoran la eficiencia al permitirle consumir los elementos en una lista de uno en uno como si fueran un flujo. Lo que hace especial a un iterador es cómo atraviesa una colección. Otros bucles deben cargar la colección completa por adelantado para iterar sobre ella, mientras que un iterador solo necesita conocer la posición actual en la colección.

Se accede al elemento actual llamando al nextmétodo del iterador . El siguiente método devolverá el valueelemento actual y a booleanpara indicar cuándo ha llegado al final de la colección. El siguiente es un ejemplo de creación de un iterador a partir de una matriz.

Transforma tu matriz regular a iterador usando un values()método como este:

    const myArr = [2,3,4]

let it = myArr.values();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

También puede transformar su matriz regular a iterador usando Symbol.iteratorasí:

const myArr = [2,3,4]

let it = myArr[Symbol.iterator]();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

También puedes transformar tu regular arrayen una iteratorscomo esta:

let myArr = [8, 10, 12];

function makeIterator(array) {
    var nextIndex = 0;
    
    return {
       next: function() {
           return nextIndex < array.length ?
               {value: array[nextIndex++], done: false} :
               {done: true};
       }
    };
};

var it = makeIterator(myArr);

console.log(it.next().value);   // {value: 8, done: false}
console.log(it.next().value);   // {value: 10, done: false}
console.log(it.next().value);   // {value: 12, done: false}
console.log(it.next().value);   // {value: undefined, done: true}

NOTA :

  • Los iteradores son de naturaleza agotable.
  • Los objetos no están iterablepor defecto. Utilízalo for..inen ese caso porque en lugar de valores funciona con claves.

Puedes leer más sobre iteration protocol here .


Bucle hacia atrás

Creo que lo contrario para el bucle merece una mención aquí:

for (var i = array.length; i--; ) {
     // process array[i]
}

Ventajas:

  • No es necesario declarar una variable len temporal ni comparar con array.length en cada iteración, ya que cualquiera de ellas puede ser una optimización de un minuto.
  • Eliminar a los hermanos del DOM en orden inverso suele ser más eficiente . (El navegador debe hacer menos cambios de elementos en sus matrices internas).
  • Si modifica la matriz mientras realiza un bucle, en o después del índice i (por ejemplo, si quita o inserta un elemento en la array[i] ), un bucle hacia adelante omitirá el elemento que se desplazó a la izquierda hasta la posición i , o re-procesa la i. El artículo que fue cambiado a la derecha. En un bucle for tradicional, podría actualizar i para que apunte al siguiente elemento que necesita procesamiento: 1, pero simplemente invertir la dirección de la iteración suele ser una solución más simple y elegante .
  • De manera similar, al modificar o eliminar elementos DOM anidados , el procesamiento a la inversa puede evitar errores . Por ejemplo, considere la modificación del innerHTML de un nodo padre antes de manejar sus hijos. En el momento en que se llegue al nodo secundario, se desconectará del DOM y será reemplazado por un elemento secundario recién creado cuando se escribió el HTML interno del padre.
  • Es más corto de escribir y leer que algunas de las otras opciones disponibles. Aunque pierde a forEach() y ES6's for ... of .

Desventajas:

  • Procesa los elementos en orden inverso. Si estaba creando una nueva matriz a partir de los resultados, o imprimiendo cosas en la pantalla, naturalmente, la salida se invertirá con respecto al pedido original.
  • La inserción repetida de hermanos en el DOM como primer hijo para conservar su orden es menos eficiente . (El navegador seguiría teniendo que cambiar las cosas correctamente). Para crear nodos DOM de manera eficiente y ordenada, simplemente haga un bucle hacia delante y agregue como de costumbre (y también use un "fragmento de documento").
  • El bucle inverso es confuso para los desarrolladores junior. (Puede considerar que es una ventaja, dependiendo de su perspectiva).

¿Debo usarlo siempre?

Algunos desarrolladores utilizan el modo inverso para el bucle por defecto , a menos que haya una buena razón para hacer un bucle hacia delante.

Aunque las ganancias de rendimiento son generalmente insignificantes, en cierto modo grita:

"Simplemente haga esto a cada elemento de la lista, ¡no me importa el pedido!"

Sin embargo, en la práctica eso no es realmente una indicación confiable de la intención, ya que no se puede distinguir de aquellas ocasiones en las que te preocupas por el orden, y realmente necesitas hacer un giro inverso. Entonces, de hecho, se necesitaría otra construcción para expresar con precisión la intención de "no importa", algo que actualmente no está disponible en la mayoría de los idiomas, incluido ECMAScript, pero que podría llamarse, por ejemplo, para forEachUnordered() .

Si el orden no importa, y la eficiencia es una preocupación (en el bucle más interno de un juego o motor de animación), puede ser aceptable usar el bucle inverso para su patrón de ir. Solo recuerde que ver un reverso del bucle en el código existente no significa necesariamente que el orden sea irrelevante.

Es mejor usar forEach ()

En general, para código de nivel superior donde la claridad y la seguridad son mayores preocupaciones, recomendaría usar Array::forEach como su patrón predeterminado:

  • Está claro para leer.
  • Indica que i no se va a desplazar dentro del bloque (lo que siempre es una posible sorpresa que se esconde durante mucho while bucles).
  • Te da un margen libre para cierres.
  • Reduce la fuga de variables locales y la colisión accidental con (y la mutación de) las variables externas.

Luego, cuando vea el reverso del bucle for en su código, es una pista de que se invierte por una buena razón (tal vez una de las razones descritas anteriormente). Y ver un avance tradicional para el bucle puede indicar que el cambio puede tener lugar.

(Si la discusión sobre la intención no tiene sentido para usted, entonces usted y su código pueden beneficiarse al ver la conferencia de Crockford sobre Estilo de programación y su cerebro ).

¿Como funciona?

for (var i = 0; i < array.length; i++) { ... }   // Forwards

for (var i = array.length; i--; )    { ... }   // Reverse

Notará que i-- es la cláusula central (donde generalmente vemos una comparación) y la última cláusula está vacía (donde generalmente vemos i++ ). Eso significa que i-- también se usa como condición para la continuación. Fundamentalmente, se ejecuta y verifica antes de cada iteración.

  • ¿Cómo puede comenzar en array.length sin explotar?

    Debido a que i-- ejecuta antes de cada iteración, en la primera iteración estaremos accediendo al elemento en array.length - 1 que evita cualquier problema con los elementos undefined matriz fuera de límites .

  • ¿Por qué no deja de iterar antes del índice 0?

    El bucle dejará de iterar cuando la condición i-- evalúe a un valor falsey (cuando arroje 0).

    El truco es que, a diferencia de --i , el operador i final disminuye i pero produce el valor antes de la disminución. Tu consola puede demostrar esto:

    > var i = 5; [i, i--, i];

    [5, 5, 4]

    Así que en la iteración final, yo era previamente 1 y la expresión i-- cambia a 0, pero en realidad produce 1 (verdadero), y por lo tanto la condición pasa. En la siguiente iteración, i-- cambia i a -1 pero produce 0 (falsey), lo que hace que la ejecución se salga inmediatamente de la parte inferior del bucle.

    En los forwards de bucle tradicionales, i++ y ++i son intercambiables (como lo señala Douglas Crockford). Sin embargo, a la inversa para el bucle, porque nuestra disminución también es nuestra expresión de condición, debemos mantenernos en i-- si queremos procesar el elemento en el índice 0.

Trivialidades

A algunas personas les gusta dibujar una pequeña flecha en el reverso for bucle, y terminar con un guiño:

for (var i = array.length; i --> 0 ;) {

Los créditos van a WYL por mostrarme los beneficios y los horrores del reverso para loop.


A partir de ES6:

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

Donde ofevita las rarezas asociadas con iny hace que funcione como el forbucle de cualquier otro idioma, y ​​se letenlaza identro del bucle en lugar de dentro de la función.

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


Probablemente el for(i = 0; i < array.length; i++)bucle 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á a partir array[0]de array[2]. Primero, esto hará referencia primero a las variables que ni siquiera tiene, segundo, no tendría las variables en la matriz, y tercero, esto hará que el código sea más audaz. Mira aquí, es lo que 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
//!!!

Puedes llamar a cada uno de esta manera:

let Array = [1,3,2];

theArray.forEach((element)=>{ 
  // use the element of the array
  console.log(element) 
}

El elemento tendrá el valor de cada índice desde 0 hasta la longitud de la matriz.

Salida:

1    
3    
2

Explicacion

forEach está en la clase de prototipo. También puede llamar a esto como theArray.prototype.forEach (...);

prototipo: https://hackernoon.com/prototypes-in-javascript-5bba2990e04b

También puede modificar una matriz como esta:

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

Una solución fácil ahora sería utilizar la biblioteca underscore.js . Proporciona muchas herramientas útiles, como eachy delegará automáticamente el trabajo al nativo, forEachsi 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

  • Array::forEach .
  • 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 iteración utilizando for (variable of object)como parte de la propuesta de Harmony (ECMAScript 6).

Sé que este es un post antiguo, y ya hay muchas respuestas geniales.Para un poco más de completitud, pensé en lanzar otro usando AngularJS . Por supuesto, esto solo se aplica si está usando Angular, obviamente, sin embargo, me gustaría ponerlo de todos modos.

angular.forEachToma 2 argumentos y un tercer argumento opcional. El primer argumento es el objeto (matriz) para iterar, el segundo argumento es la función de iterador, y el tercer argumento opcional es el contexto del objeto (referido básicamente dentro del bucle como "esto".

Hay diferentes maneras de usar el bucle forEach de angular. El más simple y probablemente el más usado es el

var temp = [1, 2, 3];
angular.forEach(temp, function(item) {
    //item will be each element in the array
    //do something
});

Otra forma útil para copiar elementos de una matriz a otra es

var temp = [1, 2, 3];
var temp2 = [];
angular.forEach(temp, function(item) {
    this.push(item); //"this" refers to the array passed into the optional third parameter so, in this case, temp2.
}, temp2);

Sin embargo, no tiene que hacer eso, simplemente puede hacer lo siguiente y es equivalente al ejemplo anterior:

angular.forEach(temp, function(item) {
    temp2.push(item);
});

Ahora hay ventajas y desventajas de usar la angular.forEachfunción en lugar del forbucle incorporado con sabor a vainilla .

Pros

  • Fácil legibilidad
  • Facilidad de escritura
  • Si está disponible, angular.forEachutilizará el bucle ES5 forEach. Ahora, llegaré a la eficiencia en la sección de contras, ya que los bucles forEach son mucho más lentos que los bucles for. Menciono esto como un profesional porque es bueno ser consistente y estandarizado.

Considere los siguientes 2 bucles anidados, que hacen exactamente lo mismo. Digamos que tenemos 2 matrices de objetos y cada objeto contiene una matriz de resultados, cada uno de los cuales tiene una propiedad Value que es una cadena (o lo que sea). Y digamos que necesitamos iterar sobre cada uno de los resultados y, si son iguales, realice alguna acción:

angular.forEach(obj1.results, function(result1) {
    angular.forEach(obj2.results, function(result2) {
        if (result1.Value === result2.Value) {
            //do something
        }
    });
});

//exact same with a for loop
for (var i = 0; i < obj1.results.length; i++) {
    for (var j = 0; j < obj2.results.length; j++) {
        if (obj1.results[i].Value === obj2.results[j].Value) {
            //do something
        }
    }
}

Concedido, este es un ejemplo hipotético muy simple, pero he escrito triple incrustado para bucles utilizando el segundo enfoque y fue muy difícil de leer y escribir para esa materia.

Contras

  • Eficiencia. angular.forEachy el nativo forEach, para el caso, son mucho más lentos que el forbucle normal ... aproximadamente un 90% más lento . Por lo tanto, para grandes conjuntos de datos, es mejor atenerse al forbucle nativo .
  • No hay descanso, continuar, o devolver el soporte. continueEn realidad, está soportado por " accident ", para continuar en una angular.forEachsimple opción, coloque una return;declaración en la función angular.forEach(array, function(item) { if (someConditionIsTrue) return; });que hará que continúe fuera de la función para esa iteración. Esto también se debe al hecho de que el nativo forEachno admite la interrupción o la continuación tampoco.

Estoy seguro de que también hay otras ventajas y desventajas, y por favor siéntase libre de agregar lo que considere oportuno. Siento que, en el fondo, si necesita eficiencia, siga con el forbucle nativo para sus necesidades de bucle. Pero, si tus conjuntos de datos son más pequeños y es bueno renunciar a un poco de eficiencia a cambio de la legibilidad y la capacidad de escritura, entonces, por supuesto, echa un vistazo angular.forEacha ese chico malo.


Una implementación de 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
  }
);

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 desea 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].
}

Resumen:

Cuando se recorre una matriz, a menudo podemos querer lograr uno de los siguientes objetivos:

  1. Queremos iterar sobre la matriz y crear una nueva matriz:

    Array.prototype.map

  2. Queremos iterar sobre la matriz y no crear una nueva matriz:

    Array.prototype.forEach

    for..of lazo

En JS hay muchas maneras de lograr estos dos objetivos. Sin embargo, algunos son más convenientes que otros. A continuación, puede encontrar algunos métodos comúnmente utilizados (la imo más conveniente) para lograr la iteración de matrices en javascript.

Creando nueva matriz: Map

map()es una función ubicada en la Array.prototypeque se puede transformar cada elemento de una matriz y luego se devuelve una nueva matriz. map()toma como argumento una función de devolución de llamada y funciona de la siguiente manera:

let arr = [1, 2, 3, 4, 5];

let newArr = arr.map((element, index, array) => {
  return element * 2;
})

console.log(arr);
console.log(newArr);

La devolución de llamada que hemos pasado map()como argumento se ejecuta para cada elemento. Luego se devuelve una matriz que tiene la misma longitud que la matriz original. En este nuevo elemento de matriz se transforma por la función de devolución de llamada que se pasa como un argumento a map().

La diferencia distintiva entre mapy otro mecanismo de bucle como forEachy un for..ofbucle es que mapvuelve como una matriz nueva y deja la matriz antigua intacta (excepto si se manipula explícitamente con la forma en que se piensa splice).

También tenga en cuenta que la mapdevolución de llamada de la función proporciona como segundo argumento el número de índice de la iteración actual. Además, el tercer argumento proporciona la matriz en la que mapse llamó. A veces estas propiedades pueden ser muy útiles.

Bucle usando forEach

forEaches una función que se encuentra en la Array.prototypeque toma una función de devolución de llamada como un argumento. A continuación, ejecuta esta función de devolución de llamada para cada elemento de la matriz. En contraste con la map()función, la función forEach no devuelve nada ( undefined). Por ejemplo:

let arr = [1, 2, 3, 4, 5];

arr.forEach((element, index, array) => {

  console.log(element * 2);

  if (index === 4) {
    console.log(array)
  }
  // index, and oldArray are provided as 2nd and 3th argument by the callback

})

console.log(arr);

Al igual que la mapfunción, la forEachdevolución de llamada proporciona como segundo argumento el número de índice de la iteración actual. También proporciona el tercer argumento la matriz en la que forEachse llamó.

Recorrer los elementos usando for..of

El for..ofbucle recorre todos los elementos de una matriz (o cualquier otro objeto iterable). Funciona de la siguiente manera:

let arr = [1, 2, 3, 4, 5];

for(let element of arr) {
  console.log(element * 2);
}

En el ejemplo anterior se elementrefiere a un elemento de matriz y arres la matriz a la que queremos hacer un bucle. No es que el nombre elementsea ​​arbitrario y podríamos haber elegido cualquier otro nombre como 'el' o algo más declarativo cuando sea aplicable.

No confunda el for..inbucle con el for..ofbucle. for..inrecorrerá todas las propiedades enumerables de la matriz, mientras que el for..ofbucle solo recorrerá los elementos de la matriz. Por ejemplo:

let arr = [1, 2, 3, 4, 5];

arr.foo = 'foo';

for(let element of arr) {
  console.log(element);
}

for(let element in arr) {
  console.log(element);
}


No hay una habilidad incorporada para entrar forEach. Para interrumpir la ejecución use el Array#somesiguiente a continuación:

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

Esto funciona porque somedevuelve verdadero tan pronto como cualquiera de las devoluciones de llamada, ejecutadas en orden de matriz, devuelve verdadero, cortocircuitando la ejecución del resto. Respuesta original ver prototipo de Array para some


Si quieres usarlo forEach(), se verá como ...

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

Si quieres usarlo for(), se verá como ...

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


ECMAScript5 (la versión en Javascript) para trabajar con Arrays.

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

['C', 'D', 'E'].forEach(function(element, index) {
  console.log(element + " is the #" + (index+1) + " in 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, más interesado en la operación en la matriz utilizando alguna característica incorporada.

mapa : crea una nueva matriz con el resultado de la función de devolución de llamada. Este método es bueno para usar cuando necesite 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']

reducir : como su nombre lo indica, reduce la matriz a un solo valor llamando a la función dada que pasa en el elemento currenct 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]

Espero que esto sea de utilidad.


Usando Loops con ES6 destructuring y extendiendo el operador.

La destrucción y el uso del operador de propagación han demostrado ser muy útiles para los recién llegados a ES6 por ser más legibles / humanos, aunque algunos veteranos de javascript pueden considerar que es desordenado, los juniors o algunas otras personas pueden encontrarlo útil.

Los siguientes ejemplos utilizarán for...ofdeclaración y .forEachmétodo.

Ejemplos 6, 7 y 8 se pueden utilizar con cualquier bucles funcionales como .map, .filter, .reduce, .sort, .every, .some, para más información acerca de estos métodos visita el objeto de matriz .

Ejemplo 1:for...of Bucle normal - no hay trucos aquí.

let arrSimple = ['a', 'b', 'c'];

for (let letter of arrSimple) {
  console.log(letter);
}

Ejemplo 2: dividir palabras en caracteres

let arrFruits = ['apple', 'orange', 'banana'];

for (let [firstLetter, ...restOfTheWord] of arrFruits) {
  // Create a shallow copy using the spread operator
  let [lastLetter] = [...restOfTheWord].reverse();
  console.log(firstLetter, lastLetter, restOfTheWord);

}

Ejemplo 3: Bucle con a keyyvalue

// let arrSimple = ['a', 'b', 'c'];

// Instead of keeping an index in `i` as per example `for(let i = 0 ; i<arrSimple.length;i++)`
// this example will use a multi-dimensional array of the following format type: 
// `arrWithIndex: [number, string][]`

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Same thing can be achieved using `.map` method
// let arrWithIndex = arrSimple.map((i, idx) => [idx, i]);

// Same thing can be achieved using `Object.entries`
// NOTE: `Object.entries` method doesn't work on internet explorer unless it's polyfilled
// let arrWithIndex = Object.entries(arrSimple);

for (let [key, value] of arrWithIndex) {
  console.log(key, value);
}

Ejemplo 4: Obtener propiedades de objeto en línea

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];

for (let { name, age: aliasForAge } of arrWithObjects) {
  console.log(name, aliasForAge);
}

Ejemplo 5: Obtenga propiedades de objetos profundos de lo que necesita

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

for (let { name, tags: [firstItemFromTags, ...restOfTags] } of arrWithObjectsWithArr) {
  console.log(name, firstItemFromTags, restOfTags);
}

Ejemplo 6: ¿Se usa el Ejemplo 3 con.forEach

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Not to be confused here, `forEachIndex` is the real index
// `mappedIndex` was created by "another user", so you can't really trust it

arrWithIndex.forEach(([mappedIndex, item], forEachIndex) => {
  console.log(forEachIndex, mappedIndex, item);
});

Ejemplo 7: ¿Se usa el Ejemplo 4 con.forEach

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];
// NOTE: Destructuring objects while using shorthand functions 
// are required to be surrounded by parenthesis
arrWithObjects.forEach( ({ name, age: aliasForAge }) => {
  console.log(name, aliasForAge)
});

Ejemplo 8: ¿ Se usa el Ejemplo 5 con.forEach

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

arrWithObjectsWithArr.forEach(({
  name,
  tags: [firstItemFromTags, ...restOfTags]
}) => {
  console.log(name, firstItemFromTags, restOfTags);
});


La sintaxis lambda no suele funcionar en IE 10 o inferior.

Usualmente uso el

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


If you are a jQuery Fan and already have a jQuery file running, you should reverse the positions of the index and value parameters

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




iteration