En savoir plus sur les boucles for...of en JS

Cet article vous donnera une compréhension approfondie de la boucle for...of en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

La boucle créée par l'instruction for...of peut traverser des objets. Le for...of introduit dans ES6 peut remplacer les deux autres instructions de boucle for...in et forEach(), et cette nouvelle instruction de boucle prend en charge le nouveau protocole d'itération. for...of vous permet de parcourir des structures de données itérables, telles que des tableaux, des chaînes, des cartes, des ensembles, etc.

Syntaxe

for (variable of iterable) {
    statement
}

• variable : La valeur d'attribut de chaque itération est affectée à la variable

• itérable : un objet qui a des propriétés énumérables et peut être itéré

Illustrons à l'aide de quelques exemples.

Tableaux

Les tableaux sont de simples listes qui ressemblent à des objets. Le prototype du tableau dispose de diverses méthodes qui permettent d'effectuer des opérations dessus, telles que le parcours. L'exemple suivant utilise for...of pour parcourir un tableau :

const iterable = ['mini', 'mani', 'mo'];

for (const value of iterable) {
    console.log(value);
}

// Output:
// => mini
// => mani
// => mo

Le résultat est d'imprimer chaque valeur du tableau iterable.

Carte

Map l'objet contient key-value paires. Les objets et les valeurs primitives peuvent être traités comme un key ou un value. MapL'objet traverse les éléments selon la manière dont ils sont insérés. En d'autres termes, for...of renvoie un tableau de kay-value paires à chaque itération. L'objet

const iterable = new Map([['one', 1], ['two', 2]]);

for (const [key, value] of iterable) {
    console.log(`Key: ${key} and Value: ${value}`);
}

// Output:
// => Key: one and Value: 1
// => Key: two and Value: 2

Set

Set vous permet de stocker des valeurs uniques de tout type, qui peuvent être des valeurs ou des objets primitifs. SetLes objets ne sont que des collections de valeurs. SetL'itération des éléments est basée sur l'ordre d'insertion et ne peut se produire qu'une seule fois pour chaque valeur. Si vous créez un Set avec le même élément plusieurs fois, il est toujours considéré comme un seul élément.

const iterable = new Set([1, 1, 2, 2, 1]);

for (const value of iterable) {
    console.log(value);
}

// Output:
// => 1
// => 2

Bien que le Set que nous avons créé ait plusieurs 1 et 2, la sortie de traversée n'est que 1 et 2.

String

String est utilisé pour stocker des données sous forme de texte.

const iterable = 'javascript';

for (const value of iterable) {
    console.log(value);
}

// Output:
// => "j"
// => "a"
// => "v"
// => "a"
// => "s"
// => "c"
// => "r"
// => "i"
// => "p"
// => "t"

Ici, parcourez la chaîne et imprimez les caractères à chaque index (index).

Objet Arguments

Pensez à un objet argument comme un objet de type tableau correspondant aux arguments passés à la fonction. Voici un cas d'utilisation :

function args() {
    for (const arg of arguments) {
        console.log(arg);
    }
}

args('a', 'b', 'c');

// Output:
// => a
// => b
// => c

Vous vous demandez peut-être : qu'est-ce qui se passe ? Comme je l'ai déjà dit, lorsqu'une fonction est appelée, les paramètres reçoivent tous les arguments transmis à la fonction args(). Donc, si nous passons des arguments 20 à la fonction args(), nous afficherons des arguments 20.

Effectuez quelques ajustements en vous basant sur l'exemple ci-dessus, comme passer un objet, un tableau et une fonction à la fonction args() :

function fn(){
return 'functions';
}

args('a', 'w3cplus', 'c',{'name': 'airen'},['a',1,3],fn());

// Output:
// => "a"
// => "w3cplus"
// => "c"
// => Object {
// =>     "name": "airen"
// => }
// => Array [
// =>    "a",
// =>    1,
// =>    3
// => ]
// => "functions"

Générateurs

Un générateur est une fonction qui peut être quittée et réactivée ultérieurement.

function* generator(){ 
    yield 1; 
    yield 2; 
    yield 3; 
};

for (const g of generator()) { 
    console.log(g); 
}

// Output:
// => 1
// => 2
// => 3

function* définit une fonction génératrice qui renvoie un objet générateur. Pour plus d'informations sur le générateur, vous pouvez cliquer ici .

Fermer l'itérateur

JavaScript fournit quatre méthodes connues pour terminer les boucles : break, continue, return et throw. Regardons un exemple :

const iterable = ['mini', 'mani', 'mo'];

for (const value of iterable) {
console.log(value);
break;
}

// Output:
// => mini

Dans cet exemple, nous utilisons le mot-clé break pour terminer une boucle et n'en imprimer qu'un seul mini.

Les objets ordinaires ne sont pas itérables

for...ofLes boucles ne peuvent fonctionner qu'avec itération. Mais les objets ordinaires ne sont pas itérables. Voyons :

const obj = { fname: 'foo', lname: 'bar' };

for (const value of obj) { // TypeError: obj[Symbol.iterator] is not a function
    console.log(value);
}

Ici, nous définissons un objet normal obj Lorsque nous essayons de for...of opérer sur obj, une erreur sera signalée : TypeError: obj[Symbol.iterator] is not a function.

Nous pouvons convertir un objet de type tableau en tableau. L'objet aura l'attribut length et ses éléments pourront être indexés. Regardons un exemple : la méthode

const obj = { length: 3, 0: 'foo', 1: 'bar', 2: 'baz' };
const array = Array.from(obj);
for (const value of array) { 
    console.log(value);
}
// Output:
// => foo
// => bar
// => baz

Array.from() crée une nouvelle instance de tableau à partir d'un objet de type tableau (Array-lik) ou itérable.

<code><span style="font-size: 20px;">for...of</span>pour...de vs.for...in

for...in

Toutes les propriétés énumérables de l'objet seront parcourues dans la boucle.

Array.prototype.newArr = () => {};
Array.prototype.anotherNewArr = () => {};
const array = ['foo', 'bar', 'baz'];
for (const value in array) { 
    console.log(value);
}
// Outcome:
// => 0
// => 1
// => 2
// => newArr
// => anotherNewArr

for...innewArr peut non seulement énumérer les valeurs déclarées dans le tableau, il peut également trouver des propriétés de non-énumération héritées du prototype du constructeur, telles que anotherNewArr et

dans le exemple ci-dessus et imprimez-les. <🎜>

for...of可以对数组和对象等做更具体的操作，但并不表示包括所有对象。

注意：任何具有Symbol.iterator属性的元素都是可迭代的。

Array.prototype.newArr = function() {};
const array = ['foo', 'bar', 'baz'];
for (const value of array) { 
    console.log(value);
}
// Outcome:
// => foo
// => bar
// => baz

for...of不考虑构造函数原型的不可枚举属性。它只需要查找可枚举属性并将其打印出来。

总结

理解for...of循环在开发过程中的用法，可以节省很多时间。希望本文能帮助您理解和编写JavaScript开发中的更好的循环结构。从而让你编码更快乐！

相关免费学习推荐：js视频教程

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!