JavaScript dla ... of Loop

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.

Interesujące artykuły...