Dalam tutorial ini, Anda akan belajar tentang JavaScript untuk… of loop dengan bantuan contoh.
Di JavaScript, ada tiga cara kita bisa menggunakan forloop.
- JavaScript untuk loop
- JavaScript untuk… dalam putaran
- JavaScript untuk… of loop
The for… ofLoop diperkenalkan dalam versi JavaScript ES6 .
The for… ofloop dalam JavaScript memungkinkan Anda untuk iterate atas benda iterable (array, set, peta, string dll).
JavaScript untuk… of loop
Sintaks dari for… ofloop adalah:
for (element of iterable) ( // body of for… of )
Sini,
- iterable - objek iterable (array, set, string, dll).
- elemen - item di iterable
Dalam bahasa Inggris sederhana, Anda dapat membaca kode di atas sebagai: untuk setiap elemen dalam iterable, jalankan body of the loop.
untuk… dengan Array
The for… ofLoop dapat digunakan untuk iterate atas array. Sebagai contoh,
// array const students = ('John', 'Sara', 'Jack'); // using for… of for ( let element of students ) ( // display the values console.log(element); )
Keluaran
John Sara Jack
Dalam program di atas, for… ofloop digunakan untuk melakukan iterasi pada objek array siswa dan menampilkan semua nilainya.
untuk… dari dengan Strings
Anda dapat menggunakan for… ofloop untuk mengulang nilai string. Sebagai contoh,
// string const string = 'code'; // using for… of loop for (let i of string) ( console.log(i); )
Keluaran
kode
untuk … dari dengan Sets
Anda dapat melakukan iterasi melalui elemen Set menggunakan for… ofloop. Sebagai contoh,
// define Set const set = new Set((1, 2, 3)); // looping through Set for (let i of set) ( console.log(i); )
Keluaran
1 2 3
untuk… dengan Maps
Anda dapat melakukan iterasi melalui elemen Peta menggunakan for… ofloop. Sebagai contoh,
// 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); )
Keluaran
nama- Jack usia- 27
Iterator Buatan Pengguna
Anda dapat membuat iterator secara manual dan menggunakan for… ofloop untuk melakukan iterasi melalui iterator. Sebagai contoh,
// 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); )
Keluaran
1 2 3
untuk… dengan Generator
Karena generator bersifat iterable, Anda dapat mengimplementasikan iterator dengan cara yang lebih mudah. Kemudian Anda dapat melakukan iterasi melalui generator menggunakan for… ofloop. Sebagai contoh,
// generator function function* generatorFunc() ( yield 10; yield 20; yield 30; ) const obj = generatorFunc(); // iteration through generator for (let value of obj) ( console.log(value); )
Keluaran
10 20 30
untuk… dari Vs untuk… dalam
| untuk… dari | untuk… dalam |
|---|---|
The for… ofLoop digunakan untuk iterate melalui nilai-nilai dari suatu iterable. | The for… inLoop digunakan untuk iterate melalui tombol dari sebuah objek. |
The for… ofLoop tidak dapat digunakan untuk iterate atas objek. | Anda dapat menggunakan for… inuntuk melakukan iterasi pada larik dan string seperti itu yang dapat diulang tetapi Anda harus menghindari penggunaan for… inuntuk iterabel. |
The for… ofLoop diperkenalkan pada ES6 . Beberapa browser mungkin tidak mendukung penggunaannya. Untuk mempelajari lebih lanjut, kunjungi JavaScript untuk… Dukungan.
