Bu eğitimde, örnekler yardımıyla JavaScript for … of loop hakkında bilgi edineceksiniz.
JavaScript'te fordöngü kullanmanın üç yolu vardır .
- Döngü için JavaScript
- JavaScript için… in döngüsü
- JavaScript for… of loop
for… ofDöngü sonraki sürümlerinde tanıtıldı JavaScript ES6 .
for… ofJavaScript döngü iterable nesneler (diziler, setleri, haritalar, ipler vb) üzerinde yineleme yapmanıza olanak sağlar.
JavaScript for… of loop
for… ofDöngünün sözdizimi şöyledir:
for (element of iterable) ( // body of for… of )
Buraya,
- yinelenebilir - yinelenebilir bir nesne (dizi, küme, dizeler, vb.).
- öğe - yinelenebilir öğeler
Düz İngilizce olarak, yukarıdaki kodu şu şekilde okuyabilirsiniz: yinelenebilirdeki her öğe için, döngünün gövdesini çalıştırın.
for … of Arrays
for… ofDöngü bir dizi yineleme kullanılabilir. Örneğin,
// array const students = ('John', 'Sara', 'Jack'); // using for… of for ( let element of students ) ( // display the values console.log(element); )
Çıktı
John Sara Jack
Yukarıdaki programda for… ofdöngü, öğrenciler dizisi nesnesini yinelemek ve tüm değerlerini görüntülemek için kullanılır.
for… of with Strings
for… ofDize değerlerini yinelemek için döngüyü kullanabilirsiniz . Örneğin,
// string const string = 'code'; // using for… of loop for (let i of string) ( console.log(i); )
Çıktı
kodu
for… of Sets ile
for… ofDöngüyü kullanarak Set öğelerini yineleyebilirsiniz . Örneğin,
// define Set const set = new Set((1, 2, 3)); // looping through Set for (let i of set) ( console.log(i); )
Çıktı
1 2 3
için… / Haritalar ile
for… ofDöngüyü kullanarak Harita öğelerinde yineleme yapabilirsiniz . Örneğin,
// 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); )
Çıktı
isim- Jack yaş- 27
Kullanıcı Tanımlı Yineleyiciler
Manuel olarak bir yineleyici oluşturabilir ve yineleyiciler for… ofarasında yineleme yapmak için döngüyü kullanabilirsiniz . Örneğin,
// 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); )
Çıktı
1 2 3
for… of Generator'lar ile
Üreteçler yinelenebilir olduğundan, bir yineleyiciyi daha kolay bir şekilde uygulayabilirsiniz. Ardından for… ofdöngüyü kullanarak üreteçler arasında yineleme yapabilirsiniz . Örneğin,
// generator function function* generatorFunc() ( yield 10; yield 20; yield 30; ) const obj = generatorFunc(); // iteration through generator for (let value of obj) ( console.log(value); )
Çıktı
10 20 30
for… of Vs for… in
| için … / | için … içinde |
|---|---|
for… ofDöngü iterable değerleri arasında yineleme için kullanılır. | for… inDöngü bir nesnenin şifreler yinelemek için kullanılır. |
for… ofDöngü bir nesne üzerinde yineleme için kullanılamaz. | for… inYinelenebilir bu tür dizileri ve dizeleri yinelemek için kullanabilirsiniz , ancak for… inyinelenebilir öğeler için kullanmaktan kaçınmalısınız. |
for… ofDöngü içinde tanıtıldı ES6 . Bazı tarayıcılar kullanımını desteklemeyebilir. Daha fazla bilgi edinmek için JavaScript’i ziyaret edin… of Support.
