infinito - ¿Cómo se obtiene el contador/índice de bucle usando un... en sintaxis en JavaScript?

condicion for en javascript

Question

Precaución. No usar para ... in para iterar sobre una matriz, úsala para iterar sobre las propiedades de un objeto.
Dicho esto, esta pregunta todavía se aplica a ... de bucles.

Entiendo que el básico para ... en sintaxis en JavaScript se ve así:

for (var obj in myArray) {
    // ...
}

¿Pero cómo obtengo el contador / índice de bucle? Sé que probablemente podría hacer algo como:

var i = 0
for (var obj in myArray) {
    alert(i)
    i++
}

O incluso lo bueno, lo viejo:

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

Pero prefiero usar el ciclo for-in más simple. Creo que se ven mejor y tienen más sentido.

¿Pero hay una manera más simple o más elegante?

En Python es fácil:

for i, obj in enumerate(myArray):
    print i

Answer 1

Como han dicho otros, no deberías utilizar for..in para iterar sobre una matriz.

for ( var i = 0, len = myArray.length; i < len; i++ ) { ... }

Si quieres una sintaxis más limpia, puedes usar forEach:

myArray.forEach( function ( val, i ) { ... } );

Si desea utilizar este método, asegúrese de incluir el calce ES5 para agregar compatibilidad con los navegadores más antiguos.

Answer 2

En ES6, es bueno usarlo para - of loop. Puedes obtener el índice de este modo

for (let [index, val] of array.entries()) {
        // your code goes here    
}

Tenga en cuenta que Array.entries() devuelve Array.prototype.entries , que es lo que le permite funcionar en el ciclo for-of; no confunda esto con Object.entries() , que devuelve una matriz de pares clave-valor.

Answer 3

Los bucles for-in iteran sobre las propiedades de un objeto. No los use para Arrays, incluso si a veces funcionan.

Las propiedades del objeto no tienen índice, todas son iguales y no es necesario ejecutarlas en un orden determinado. Si desea contar las propiedades, tendrá que configurar el contador extra (como lo hizo en su primer ejemplo).

bucle sobre una matriz:

var a = [];
for (var i=0; i<a.length; i++) {
    i // is the index
    a[i] // is the item
}

bucle sobre un objeto:

var o = {};
for (var prop in o) {
    prop // is the property name
    o[prop] // is the property value - the item
}

Answer 4

Qué tal esto

let numbers = [1,2,3,4,5]
numbers.forEach((number, index) => console.log(`${index}:${number}`))

Answer 5

Solución para pequeñas colecciones de matriz:

for (var obj in arr) {
    var i = Object.keys(arr).indexOf(obj);
}

arr - ARRAY, obj - CLAVE del elemento actual, i - COUNTER / INDEX

Aviso: las teclas de método () no están disponibles para la versión IE <9, debe usar el código Polyfill . https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

Answer 6

for…in itera sobre nombres de propiedad, no valores, y lo hace en un orden no especificado (sí, incluso después de ES6). No deberías usarlo para iterar sobre las matrices. Para ellos, hay ES5 para forEach método que pasa el valor y el índice a la función que le das:

var myArray = [123, 15, 187, 32];

myArray.forEach(function (value, i) {
    console.log(''%d: %s'', i, value);
});

// Outputs:
// 0: 123
// 1: 15
// 2: 187
// 3: 32

O Array.prototype.entries de ES6, que ahora tiene soporte en las versiones actuales del navegador:

for (const [i, value] of myArray.entries()) {
    console.log(''%d: %s'', i, value);
}

Para los iterables en general (donde usaría un for…of loop en lugar de a for…in ), no hay nada incorporado, sin embargo:

function* enumerate(iterable) {
    let i = 0;

    for (const x of iterable) {
        yield [i, x];
        i++;
    }
}

for (const [i, obj] of enumerate(myArray)) {
    console.log(i, obj);
}

demo

Si realmente significaba for…in enumerar propiedades, necesitaría un contador adicional. Object.keys(obj).forEach podría funcionar, pero solo incluye propiedades propias ; for…in incluye propiedades enumerables en cualquier lugar de la cadena de prototipos.