Méthode de boucle JavaScript
Il n'implique pas les méthodes de bouclage spécifiquement liées au prototype, c'est-à-dire les méthodes de bouclage contenues XXXXX.prototypedans (par exemple forEach, map).
pour
Il existe au total trois méthodes de bouclage pour for, l'une est le corps forde boucle , l'autre est for in, et l'autre est for of.
traditionnel pour
Cette syntaxe est également disponible dans la plupart des autres langages de programmation. En JS, elle réside principalement dans la déclaration de variables, telles que :
// ES5
for (var i = 0; i < 10; i++) {
console.log('es5');
}
// ES6
for (let i = 0; i < 10; i++) {
console.log('es6');
}
const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
Il n'y a pas de différence particulièrement grande dans la grammaire ici, et les résultats de sortie sont également cohérents. La principale différence réside dans varla letportée et les problèmes de levage variables causés par et . Étant donné que les navigateurs actuels supportent très bien ES6, il est recommandé d'utiliser letà la place de var.
Elle ne peut pas être utilisée ici const, car la variable constdéclarée ne peut pas être modifiée, elle ne peut donc pas être incrémentée ici, ce qui entraîne une erreur :
var, let, constpour les similitudes et les différences, vous pouvez vérifier cette note : La différence entre var, let, const est la même que
Une autre façon intéressante d'écrire, que je n'avais pas remarquée auparavant, consiste à omettre toutes les déclarations de variables :
for (;;) {
// do sth
}
Cela crée une boucle infinie.
for...of
for...ofIl s'agit d'une méthode d'itération implémentée après ES6, qui est utilisée pour faciliter les tableaux dans la plupart des cas, mais elle peut être utilisée pour boucler tous les objets itérables , y compris :
- déployer
- chaîne
- TypedArray
- Carte
- Ensemble
- Liste de nœuds
- arguments
- générateurs
- objet itérable défini par l'utilisateur
D'une manière générale, s'il est utilisé avec certains objets et fonctionnalités nouvellement créés après ES6, sa flexibilité est même supérieure à celle des forboucles seule limitation est qu'il ne peut pas obtenir d'indices.
Voici la syntaxe la plus couramment for...ofutilisée :
const arr = [1, 2, 3, 4, 5];
for (const val of arr) {
console.log(val);
}
const map = new Map([
['a', 1],
['b', 2],
['c', 3],
]);
for (const [key, val] of map) {
console.log(key, val);
}
const set = new Set(['a', 1, 'b', '2', 2]);
for (const setV of set) {
console.log(setV);
}
for...in
for...inUtilisé pour itérer les propriétés de chaîne énumérable qui n'incluent pas de symboles dans les objets , et for...inpeut également être utilisé pour itérer les propriétés de chaîne énumérable héritées :
const obj = {
a: 'a',
b: 'b',
c: 'c',
};
for (const enumerable in obj) {
console.log(enumerable);
}
const obj2 = {
d: 'd' };
obj2.__proto__ = obj;
for (const enumerable in obj2) {
console.log(enumerable);
}
alors que
tandis que divise principalement whileet do-while, la différence entre les deux n'est pas trop grande, principalement parce do-whilequ'il au moins une fois, puis vérifiera si les conditions sont remplies.
let i = 10;
while (i < 0) {
console.log('i < 10');
}
do {
console.log('at least log once');
} while (i < 10);
mots clés
Principalement pour compenser l'étiquette... Seulement pour découvrir que JS l'a aussi...
break
breakPeut être utilisé pour rompre la boucle actuelle, en d'autres termes, si dans des boucles imbriquées, il rompra la boucle interne :
for (let i = 0; i < 5; i++) {
console.log('i', i);
for (let j = 0; j < 20; j++) {
// 这里一旦 j > 1 就会跳出当前循环
if (j > 1) break;
console.log('j', j);
}
}
continue
continueContinuera au cycle suivant, tel que :
for (let i = 0; i < 5; i++) {
// 一旦 i > 2，就会跳过下面的代码，重新进入循环
if (i > 2) continue;
console.log('i', i);
for (let j = 0; j < 20; j++) {
if (j > 1) break;
console.log('j', j, 'i', i);
}
}
étiqueter
Je n'ai pas beaucoup utilisé label auparavant... Il semble que je ne l'ai rencontré que lors de la compilation.
Son objectif principal est de lier une étiquette à une expression, puis de passer à l'étiquette correspondante. Bien que les étiquettes puissent également être utilisées dans des corps sans boucle, dans la plupart des cas, elles sont plus conformes aux règles d'utilisation dans les corps de boucle :
for (let i = 0; i < 3; i++) {
let j = 3;
outer: do {
console.log(j);
for (let k = 0; k < 5; k++) {
// 一旦k === 3 就会跳到 outer，因为 outer 的条件不满足了，所以就会彻底终止 do-while 循环
if (k === 3) {
break outer;
}
console.log(k);
}
j++;
} while (j < 3);
}
Méthodes de bouclage alternatives après ES6
mapVous pouvez utiliser keys()les values(), et set est la seule values. Ils renvoient tous des itérateurs, vous devez donc utiliser des méthodes itératives pour les appeler.
for...inLes objets peuvent également utiliser Object.entries(), Object.keys(), Object.values()pour obtenir des paires clé-valeur, des clés et des valeurs sous forme de tableaux. Comme tous les retours sont des tableaux, forles boucles .
la fin
forLes boucles traditionnelles peuvent être les plus gênantes à écrire, mais elles sont aussi les plus flexibles pour les boucles nécessitant des indices. Dans certains cas, elles peuvent en effet résoudre forEachles problèmes causés par , mais forles boucles ne peuvent pas implémenter de boucles pour les objets.
for...ofLa méthode d'écriture est plus simple et peut également être utilisée awaitpour des opérations asynchrones, et avec certains objets et attributs qui existent après ES6, sa flexibilité sera plus élevée, mais for...ofelle a ses limites lorsque l'index est nécessaire.
for...inIl ne peut être utilisé que pour faire défiler des objets. Pour savoir quand utiliser la méthode d'obtention de paires clé-valeur d'objets, vous pouvez vous référer à ce tableau :
Quelques autres notes sur la boucle sur les tableaux sont :
Autres références: