Accès à l'index des éléments du tableau ES6 dans la boucle for-of

Nous pouvons accéder aux éléments du tableau à l'aide d'une boucle for-of:

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

Comment puis-je modifier ce code pour accéder à l'index en cours également? Je veux y parvenir en utilisant la syntaxe for-of, ni forEach ni for-in.

Utilisation Array.prototype.keys:

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

Si vous souhaitez accéder à la fois à la clé et à la valeur, vous pouvez utiliser Array.prototype.entries()avec la déstructuration :

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

Array#entries renvoie l'index et la valeur, si vous avez besoin des deux:

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

}

Dans ce monde de nouvelles fonctions natives flashy, nous oublions parfois les bases.

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

Propre, efficace et vous pouvez toujours faire breakla boucle. Prime! Vous pouvez également commencer par la fin et revenir en arrière avec i--!

Remarque supplémentaire: Si vous utilisez beaucoup la valeur dans la boucle, vous pouvez le faire const value = arr[i];en haut de la boucle pour une référence facile et lisible.

dans le contexte html / js, sur les navigateurs modernes, avec d'autres objets itérables que les tableaux, nous pourrions également utiliser [Iterable] .entries ():

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

    element.innerHTML = '#' + index

}

En for..ofboucle, nous pouvons y parvenir via array.entries(). array.entriesrenvoie un nouvel objet itérateur Array. Un objet itérateur sait comment accéder aux éléments à partir d'un objet itérable à la fois, tout en gardant une trace de sa position actuelle dans cette séquence.

Lorsque la next()méthode est appelée, les paires valeur / clé de l'itérateur sont générées. Dans ces paires de valeurs de clé, l' index du tableau est la clé et l'élément de tableau est la valeur.

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

Une for..ofboucle est fondamentalement une construction qui consomme un itérable et boucle à travers tous les éléments (en utilisant un itérateur sous le capot). Nous pouvons combiner cela avec array.entries()de la manière suivante:

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);
}

Vous pouvez également gérer l'index vous-même si vous avez besoin de l' index , cela ne fonctionnera pas si vous avez besoin de la clé .

let i = 0;
for (const item of iterableItems) {
  // do something with index
  console.log(i);

  i++;
}

Pour ceux qui utilisent des objets qui ne sont pas un Arraytableau ou même un tableau, vous pouvez facilement créer votre propre itérable afin que vous puissiez toujours l'utiliser for ofpour des choses comme celles localStoragequi n'ont vraiment que 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;
}

Ensuite, donnez-lui simplement un numéro:

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

es6 for...in

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

Une autre approche pourrait être en utilisant Array.prototype.forEach()comme

Array.from({
  length: 5
}, () => Math.floor(Math.random() * 5)).forEach((val, index) => {
  console.log(val, index)
})

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

la boucle for traverse le tableau, tandis que la propriété indexof prend la valeur de l'index qui correspond au tableau. PD cette méthode a quelques défauts avec les nombres, donc utilisez des fruits