web-dev-qa-db-fra.com

Accès à l'index de l'élément de tableau ES6 dans la boucle for-of

Nous pouvons accéder aux éléments d'un tableau en utilisant 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 également à l'index actuel? Je veux y parvenir en utilisant la syntaxe for-of, ni forEach ni for-in.

javascriptecmascript-6for-of-loop
153
Abdennour TOUMI

Utilisez 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() with destructuring :

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

229
Michał Perłakowski

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

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

}
246
Felix Kling

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 break la boucle. Prime! Vous pouvez également commencer à la fin et revenir en arrière avec i--!

12
chris

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

}
2
Joseph Merdrignac

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

Lorsque la méthode next() est appelée sur l'itérateur, des paires valeur/clé sont générées. Dans ces paires clé-valeur, le tableau index 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 boucle for..of est fondamentalement une construction qui consomme un itératif 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);
}

1
Willem van der Veen

es6 for...in

for(const index in [15, 64, 78]) {                        
    console.log(index);
}
0
solanki...
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 . P.D cette méthode a quelques défauts avec des nombres, utilisez donc fruits

0
Edwin Felipe

Pour ceux qui utilisent des objets qui ne sont pas une Array ni même un tableau, vous pouvez facilement créer votre propre itérable, de sorte que vous pouvez toujours utiliser for of pour des choses comme localStorage qui ont vraiment seulement une 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, il suffit de lui donner un numéro:

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