Neste tutorial, você aprenderá sobre JavaScript para … de loop com a ajuda de exemplos.
Em JavaScript, existem três maneiras de usar um forloop.
- JavaScript para loop
- JavaScript para … em loop
- JavaScript para … de loop
O for… ofloop foi introduzido nas versões posteriores do JavaScript ES6 .
O for… ofloop em JavaScript permite que você itere sobre objetos iteráveis (arrays, conjuntos, mapas, strings, etc.).
JavaScript para … de loop
A sintaxe do for… ofloop é:
for (element of iterable) ( // body of for… of )
Aqui,
- iterable - um objeto iterável (array, set, strings, etc).
- elemento - itens no iterável
Em inglês simples, você pode ler o código acima como: para cada elemento no iterável, execute o corpo do loop.
para … de com Arrays
O for… ofloop pode ser usado para iterar em uma matriz. Por exemplo,
// array const students = ('John', 'Sara', 'Jack'); // using for… of for ( let element of students ) ( // display the values console.log(element); )
Resultado
John sara jack
No programa acima, o for… ofloop é usado para iterar sobre o objeto de matriz de alunos e exibir todos os seus valores.
para … de com Strings
Você pode usar o for… ofloop para iterar sobre os valores da string. Por exemplo,
// string const string = 'code'; // using for… of loop for (let i of string) ( console.log(i); )
Resultado
código
para … de com conjuntos
Você pode iterar por meio de elementos Set usando o for… ofloop. Por exemplo,
// define Set const set = new Set((1, 2, 3)); // looping through Set for (let i of set) ( console.log(i); )
Resultado
1 2 3
para … de com Maps
Você pode iterar por meio de elementos do mapa usando o for… ofloop. Por exemplo,
// define Map let map = new Map(); // inserting elements map.set('name', 'Jack'); map.set('age', '27'); // looping through Map for (let (key, value) of map) ( console.log(key + '- ' + value); )
Resultado
nome- Jack idade- 27
Iteradores definidos pelo usuário
Você pode criar um iterador manualmente e usar o for… ofloop para iterar pelos iteradores. Por exemplo,
// creating iterable object const iterableObj = ( // iterator method (Symbol.iterator)() ( let step = 0; return ( next() ( step++; if (step === 1) ( return ( value: '1', done: false); ) else if (step === 2) ( return ( value: '2', done: false); ) else if (step === 3) ( return ( value: '3', done: false); ) return ( value: '', done: true ); ) ) ) ) // iterating using for… of for (const i of iterableObj) ( console.log(i); )
Resultado
1 2 3
para … de com geradores
Como os geradores são iteráveis, você pode implementar um iterador de uma maneira mais fácil. Em seguida, você pode iterar pelos geradores usando o for… ofloop. Por exemplo,
// generator function function* generatorFunc() ( yield 10; yield 20; yield 30; ) const obj = generatorFunc(); // iteration through generator for (let value of obj) ( console.log(value); )
Resultado
10 20 30
para … de Vs para … em
| para de | para … em |
|---|---|
O for… ofloop é usado para percorrer os valores de um iterável. | O for… inloop é usado para iterar pelas chaves de um objeto. |
O for… ofloop não pode ser usado para iterar sobre um objeto. | Você pode usar for… inpara iterar sobre um iterável como matrizes e strings, mas deve evitar o uso for… inpara iteráveis. |
O for… ofloop foi introduzido no ES6 . Alguns navegadores podem não suportar seu uso. Para saber mais, visite JavaScript para… de Suporte.
