Traduit en : Français Afficher l'original Options ▼

DSA avec JS - À votre rythme Tutoriel JS Exercice JS Questions d'entretien JS Tableau JS Chaîne JS Co

JavaScript pour…de Loop

Dernière mise à jour : 30 août 2024
La boucle JavaScript for…of est une instruction d'itération moderne introduite
dans ECMAScript 2015 (ES6). Elle permet aux développeurs d'itérer sur des
objets itérables tels que des tableaux, des chaînes, des cartes, des
ensembles, etc. Elle fournit une syntaxe plus simple que les boucles for
traditionnelles.

Quel est le but de Loop ?

La boucle for…of itère sur les valeurs d’un objet itérable, ce qui est différent
de la boucle for…in qui itère sur les propriétés énumérables d’un objet.

Syntaxe:

pour ( variable de Iterable ) {

// Bloc de code à exécuter
}

Paramètres:

variable : Représente la valeur actuelle de chaque itération de l'itérable.

itérable : tout objet sur lequel il est possible d'itérer (par exemple, des
tableaux, des chaînes, des cartes).

Exemples d'utilisation de la boucle for…of

1. Itérer sur un tableau en utilisant la boucle for…of

Les tableaux sont l'une des structures de données les plus courantes en
JavaScript. La boucle for…of fournit un moyen concis d'itérer sur les éléments
d'un tableau :

Exemple : le code initialise un tableau avec les valeurs 1 à 5. Il parcourt

ensuite chaque élément du tableau à l’aide d’une boucle for of en
ensuite chaque élément du tableau à l aide d une boucle for…of, en

enregistrant chaque élément dans la console.

JavaScript

const array = [ 1, 2, 3, 4, 5 ];

for (const item of array) {

[Link](item);
}

Sortir

1
2
3
4
5

2. Itération sur une chaîne à l'aide de la boucle for…of

Les chaînes sont également des objets itérables en JavaScript. Vous pouvez
utiliser la boucle for…of pour parcourir chaque caractère d'une chaîne.

JavaScript

const str = "Hello";

for (const char of str) {

[Link](char);
}

Sortir

H
et
l
l
ou
Explication du code
strest la chaîne sur laquelle vous souhaitez faire une boucle.
Iinitie la for...ofboucle, où charreprésente chaque caractère de la chaîne
pendant chaque itération.
[Link](char)imprime chaque caractère sur la console à chaque
itération de la boucle.

3. Itération sur une carte à l'aide de la boucle for…of

Les cartes sont une nouvelle structure de données dans ES6 qui stocke des
paires clé-valeur. La boucle for…of peut être utilisée pour parcourir les
entrées d'une carte.

JavaScript

const map = new Map([

["name", "Akash"],
["age", 25],
["city", "Noida"]
]);

for (let [key, value] of map) {

[Link](`${key}: ${value}`);
}

Sortir

nom: Akash
âge : 25 ans
ville: Noida

Explication du code
Tout d’abord, nous créons un objet Map sur lequel nous souhaitons
effectuer une itération.
Initie la for...ofboucle, où [key, value]représente chaque paire clé-valeur
dans la carte pendant chaque itération.
À l'intérieur de la boucle, [Link](`${key}: ${value}` );imprime chaque
paire clé-valeur sur la console à chaque itération de la boucle.

4. Itération sur un ensemble à l'aide de la boucle for…of

Les ensembles sont une autre nouvelle structure de données d'ES6 qui
stocke des valeurs uniques. Vous pouvez utiliser la boucle for…of pour
parcourir les éléments d'un ensemble.

JavaScript

let set = new Set([1, 2, 3, 4, 5]);

for (let value of set) {

[Link](value);
}

Sortir

1
2
3
4
5

5. Itération sur les propriétés d'un objet à l'aide de la boucle for…of

Bien que la boucle for…of ne soit pas directement utilisée pour parcourir les
propriétés d'un objet, vous pouvez l'utiliser en combinaison avec
[Link](), [Link]() ou [Link]() pour y parvenir.

JavaScript

let person = {
name: "Akash",
age: 25,
city: "Noida"
};

for (let key of [Link](person)) {

[Link](`${key}: ${person[key]}`);
}

Sortir
 nom: Akash
âge : 25 ans
ville: Noida

The for…of loop in JavaScript provides a powerful and efficient way to iterate
over iterable objects. Its syntax is simpler and more intuitive compared to
traditional loops, making code easier to read and maintain. For more
advanced JavaScript tutorials and examples, explore our JavaScript Tutorial
and JavaScript Examples.

JavaScript for…of Loop – FAQs

What is a for-of loop in JavaScript?

A for-of loop is a control structure that allows you to iterate over the
values of an iterable object, such as arrays, strings, maps, sets, and
more. This loop is designed to traverse the values directly rather than
the keys or indices.

What is the basic syntax of a for-of loop?

The basic syntax of a for-of loop includes the for keyword, followed by
a variable to hold each value, the of keyword, and the iterable object to
iterate over. The code block to be executed for each value is placed
inside curly braces.

How does the for-of loop work?

The for-of loop iterates over the values of an iterable object. For each
value, the loop assigns the value to the specified variable and executes
the code block.

What is the difference between for-of and for-in loops?

 p

for-of loop: Iterates over the values of an iterable object (such as

arrays, strings, maps, etc.).

for-in loop: Iterates over the enumerable properties (keys) of an object.

Can a for-of loop be used with objects?

A for-of loop cannot be used directly with objects because objects are
not inherently iterable. However, you can use a for-of loop in
conjunction with [Link](), [Link](), or [Link]() to
iterate over an object’s keys, values, or key-value pairs.

Want to be a Software Developer or a Working Professional looking to

enhance your Software Development Skills? Then, master the concepts of
Full-Stack Development. Our Full Stack Development - React and [Link]
Course will help you achieve this quickly. Learn everything from Front-End
to Back-End Development with hands-on Projects and real-world
examples. This course enables you to build scalable, efficient, dynamic web
applications that stand out. Ready to become an expert in Full-Stack? Enroll
Now and Start Creating the Future!

tridib… 7

Previous Article Next Article

JavaScript for-in Loop JavaScript do...while Loop

Similar Reads
How to loop through HTML elements without using forEach() loop in…
In this article, we will learn how to loop through HTML elements without using
the forEach() method. This can be done in the following ways: Table of Conte…
 4 min read

How to Loop Through an Array using a foreach Loop in PHP?

Given an array (indexed or associative), the task is to loop through the array
using foreach loop. The foreach loop iterates through each array element and…
2 min read

How to Change Values in an Array when Doing foreach Loop in JavaScript ?

The forEach loop in JavaScript is one of the several ways to iterate through an
array. ForEach method is different from all other looping methods as it passes…
3 min read

How to break nested for loop using JavaScript?

The break statement, which is used to exit a loop early. A label can be used
with a break to control the flow more precisely. A label is simply an identifier…
3 min read

How to trigger setInterval loop immediately using JavaScript ?

This article will show some simple ways in which the setInterval() method can
be made to execute the function without delay. There are many procedures to…
2 min read

How to ignore loop in else condition using JavaScript ?

In this article, we will see the methods to ignore the loop in the else conditions
using JavaScript. There are two ways to ignore the loop in the else condition:…
2 min read

What are the microtask and macrotask within an event loop in JavaScript ?
Event Loop: An Event Loop in JavaScript is said to be a constantly running
process that keeps a tab on the call stack. Its main function is to check wheth…
4 min read

JavaScript SyntaxError - A declaration in the head of a for-of loop can't…

This JavaScript exception a declaration in the head of a for-of loop can't have
an initializer occurs if the for -of loop contains an initialization expression like…
1 min read
 How to Pause and Play a Loop in JavaScript using Event Listeners ?
Vous trouverez ci-dessous un programme JavaScript pour la manipulation du
DOM qui explique essentiellement comment mettre en pause et lire une bouc…
4 minutes de lecture

Comment retarder une boucle en JavaScript en utilisant async/await av…

Vous trouverez ci-dessous un extrait de code JavaScript qui décrit
essentiellement comment retarder une boucle en JavaScript à l'aide de…
2 min de lecture

Mots clés de l'article :

JavaScript Rédacteur technique Technologies Web notions de base de javascript +1 de plus

Adresse de l'entreprise et des

communications : A-143, 9e étage,
Sovereign Corporate Tower, secteur 136,
Noida, Uttar Pradesh (201305) | Adresse
enregistrée : K 061, Tower K, Gulshan
Vivante Apartment, secteur 137, Noida,
Gautam Buddh Nagar, Uttar Pradesh,
201305
 Entreprise Langues
À propos de nous Python
Légal Java
Dans les médias C++
Contactez-nous PHP
Faites de la publicité avec nous GoLang
Solution d'entreprise GFG SQL
Programme de formation en placement Langage R
Communauté GeeksforGeeks Tutoriel Android
Archives des tutoriels

DSA Science des données et Machine learning

Structures de données Science des données avec Python
Algorithmes Science des données pour débutants
DSA pour les débutants Apprentissage automatique
Problèmes DSA de base Mathématiques ML
Feuille de route DSA Visualisation des données
Top 100 des problèmes d'entretien DSA Pandas
Feuille de route DSA par Sandeep Jain Numpy
Toutes les aide-mémoire PNL
Apprentissage profond

Technologies Web Tutoriel Python

HTML Exemples de programmation Python
CSS Projets Python
JavaScript Python Tkinter
Manuscrit Grattage Web
ReactJS Tutoriel OpenCV
SuivantJS Question d'entretien Python
Amorçage Django
Conception de sites Web

L'informatique DevOps
Systèmes d'exploitation Git
Réseau informatique Linux
Système de gestion de base de données AWS
Ingénierie logicielle Docker
Conception de la logique numérique Kubernetes
Mathématiques de l'ingénierie Azuré
Développement de logiciels BPC
Tests de logiciels Feuille de route DevOps

Conception du système Préparation à l'entretien

Conception de haut niveau Programmation compétitive
Conception de bas niveau Top DS ou Algo pour CP
Diagrammes UML Processus de recrutement adapté à l'entreprise
Guide d'entretien Préparation adaptée à l'entreprise
Modèles de conception Préparation aux aptitudes
OOAAD Casse-têtes
Bootcamp sur la conception de systèmes
d
Questions d'entretien

Matières scolaires Vidéos de GeeksforGeeks

Mathématiques DSA
Physique Python
Chimie Java
Biologie C++
Sciences sociales Développement Web
Grammaire anglaise Science des données
Commerce Matières d'informatique
Gardien de but mondial

@GeeksforGeeks, Sanchhaya Education Private Limited , Tous droits réservés