W tym samouczku nauczysz się JavaScript for… of loop na podstawie przykładów.
W JavaScript istnieją trzy sposoby wykorzystania forpętli.
- JavaScript for loop
- JavaScript dla… w pętli
- JavaScript dla… pętli
for… ofPętla została wprowadzona w późniejszych wersjach JavaScript ES6 .
for… ofPętla w JavaScript umożliwia iteracyjne nad iterowalny obiektów (tablice, zestawy, mapy, łańcuchy itp.)
JavaScript dla… pętli
Składnia for… ofpętli to:
for (element of iterable) ( // body of for… of )
Tutaj,
- iterowalny - iterowalny obiekt (tablica, zbiór, ciągi znaków itp.).
- element - elementy w iterowalnym
Mówiąc prostym językiem, możesz odczytać powyższy kod jako: dla każdego elementu w iterowalnej, uruchom ciało pętli.
dla… lub z tablicami
for… ofPętla może być używane do przechodzenia przez szereg. Na przykład,
// array const students = ('John', 'Sara', 'Jack'); // using for… of for ( let element of students ) ( // display the values console.log(element); )
Wynik
John Sara Jack
W powyższym programie for… ofpętla jest używana do iteracji po obiekcie tablicy studentów i wyświetlenia wszystkich jego wartości.
dla… z ze Strings
Możesz użyć for… ofpętli do iteracji po wartościach ciągów. Na przykład,
// string const string = 'code'; // using for… of loop for (let i of string) ( console.log(i); )
Wynik
kod
dla… z z Zestawy
Możesz iterować przez elementy Set za pomocą for… ofpętli. Na przykład,
// define Set const set = new Set((1, 2, 3)); // looping through Set for (let i of set) ( console.log(i); )
Wynik
1 2 3
dla… z z Mapami
Możesz iterować przez elementy Map za pomocą for… ofpętli. Na przykład,
// 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); )
Wynik
imię- Jack wiek- 27
Iteratory zdefiniowane przez użytkownika
Możesz ręcznie utworzyć iterator i użyć for… ofpętli do iteracji przez iteratory. Na przykład,
// 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); )
Wynik
1 2 3
dla… lub z generatorami
Ponieważ generatory są iterowalne, możesz zaimplementować iterator w łatwiejszy sposób. Następnie możesz iterować przez generatory za pomocą for… ofpętli. Na przykład,
// generator function function* generatorFunc() ( yield 10; yield 20; yield 30; ) const obj = generatorFunc(); // iteration through generator for (let value of obj) ( console.log(value); )
Wynik
10 20 30
dla… z Vs dla… w
| dla… z | dla w |
|---|---|
for… ofPętli służy do iterację wartości wiązania iterowalny. | for… inPętli, iterację kluczy obiektu. |
for… ofPętli nie mogą być używane do przechodzenia przez obiekt. | Możesz użyć for… indo iteracji po takich tablicach i ciągach iterowalnych, ale powinieneś unikać używania for… indla iterowalnych. |
for… ofPętli wprowadzono ES6 . Niektóre przeglądarki mogą nie obsługiwać jego użycia. Aby dowiedzieć się więcej, odwiedź JavaScript dla… pomocy.
