javascript - index - Acceso al índice del elemento de matriz ES6 dentro del bucle for

map javascript

Question

Podemos acceder a los elementos de la matriz utilizando un bucle for-of:

for (const j of [1, 2, 3, 4, 5]) {
  console.log(j);
}

¿Cómo puedo modificar este código para acceder también al índice actual? Quiero lograr esto usando la sintaxis for-of, ni forEach ni for-in.

Answer 1

En este mundo de nuevas y llamativas funciones nativas, a veces olvidamos lo básico.

for (let i = 0; i < arr.length; i++) {
    console.log(''index:'', i, ''element:'', arr[i]);
}

Limpio, eficiente, y aún puede break el ciclo. ¡Prima! ¡También puedes comenzar desde el final e ir hacia atrás con i-- !

Nota adicional: si está utilizando mucho el valor dentro del ciclo, es posible que desee hacer const value = arr[i]; en la parte superior del bucle para una referencia fácil y legible.

Answer 2

En un bucle for..of podemos lograr esto a través de array.entries() . array.entries devuelve un nuevo objeto iterador de matriz. Un objeto iterador sabe cómo acceder a elementos de uno iterable en ese momento, mientras realiza un seguimiento de su posición actual dentro de esa secuencia.

Cuando se llama al método next() en el iterador, se generan pares de valores clave. En estos pares de valores clave, el índice de matriz es la clave y el elemento de matriz es el valor.

let arr = [''a'', ''b'', ''c''];
let iterator = arr.entries();
console.log(iterator.next().value); // [0, ''a'']
console.log(iterator.next().value); // [1, ''b'']

Un bucle for..of es básicamente una construcción que consume un iterable y recorre todos los elementos (usando un iterador debajo del capó). Podemos combinar esto con array.entries() de la siguiente manera:

array = [''a'', ''b'', ''c''];

for (let indexValue of array.entries()) {
  console.log(indexValue);
}


// we can use array destructuring to conveniently
// store the index and value in variables
for (let [index, value] of array.entries()) {
   console.log(index, value);
}

Answer 3

Para aquellos que usan objetos que no son una Array o incluso una matriz, puede construir su propio iterable fácilmente para que pueda usar para cosas como localStorage que realmente solo tienen una length :

function indexerator(length) {
    var output = new Object();
    var index = 0;
    output[Symbol.iterator] = function() {
        return {next:function() {
            return (index < length) ? {value:index++} : {done:true};
        }};
    };
    return output;
}

Luego solo dale un número:

for (let index of indexerator(localStorage.length))
    console.log(localStorage.key(index))

Answer 4

Utilice Array.prototype.keys :

for (const index of [1, 2, 3, 4, 5].keys()) {
  console.log(index);
}

Si desea acceder a la clave y al valor, puede usar Array.prototype.entries() con la destructuring :

for (const [index, value] of [1, 2, 3, 4, 5].entries()) {
  console.log(index, value);
}

Answer 5

en el contexto html / js, en los navegadores modernos, con otros objetos iterables que las matrices también podríamos usar [Iterable] .entries ():

for(let [index, element] of document.querySelectorAll(''div'').entries()) {

    element.innerHTML = ''#'' + index

}

Answer 6

es6 for...in

for(const index in [15, 64, 78]) {                        
    console.log(index);
}

Answer 7

Array.prototype.entries() devuelve el índice y el valor, si necesita ambos:

for (let [index, value] of array.entries()) {

}

Answer 8

var fruits = ["apple","pear","peach"];
for (fruit of fruits) {
    console.log(fruits.indexOf(fruit));
    //it shows the index of every fruit from fruits
}

el bucle for atraviesa la matriz, mientras que la propiedad indexof toma el valor del índice que coincide con la matriz. PD: este método tiene algunos defectos con los números, así que usa frutas