Dalam tutorial ini, Anda akan belajar tentang iterator JavaScript dan iterable dengan bantuan contoh.
Iterabel dan Iterator JavaScript
JavaScript menyediakan protokol untuk mengulangi struktur data. Protokol ini mendefinisikan bagaimana struktur data ini diiterasi menggunakan for… of
loop.
Konsep protokol dapat dibagi menjadi:
- iterable
- iterator
Protokol yang dapat diulang menyebutkan bahwa sebuah iterable harus memiliki Symbol.iterator
kuncinya.
Iterabel JavaScript
Struktur data yang memiliki Symbol.iterator()
metode disebut iterable. Misalnya, Array, String, Set, dll.
Iterator JavaScript
Iterator adalah objek yang dikembalikan oleh Symbol.iterator()
metode.
Protokol iterator menyediakan next()
metode untuk mengakses setiap elemen iterable (struktur data) satu per satu.
Mari kita lihat contoh memiliki iterable Symbol.Iterator()
const arr = (1, 2 ,3); // calling the Symbol.iterator() method const arrIterator = arr(Symbol.iterator)(); // gives Array Iterator console.log(arrIterator); const str = 'hello'; // calling the Symbol.iterator() method const strIterator = str(Symbol.iterator)(); // gives String Iterator console.log(strIterator);
Keluaran
Array Iterator () StringIterator ()
Di sini, memanggil Symbol.iterator()
metode array dan string akan mengembalikan iteratornya masing-masing.
Iterasi Melalui Iterables
Anda dapat menggunakan for… of
loop untuk melakukan iterasi melalui objek yang dapat diulang ini. Anda dapat mengulang melalui Symbol.iterator()
metode seperti ini:
const number = ( 1, 2, 3); for (let n of number(Symbol.iterator)()) ( console.log(n); )
Keluaran
1 2 3
Atau Anda dapat dengan mudah melakukan iterasi melalui array seperti ini:
const number = ( 1, 2, 3); for (let n of number) ( console.log(n); )
Di sini, iterator memungkinkan for… of
loop untuk melakukan iterasi pada array dan mengembalikan setiap nilai.
Metode JavaScript next ()
Objek iterator memiliki next()
metode yang mengembalikan item berikutnya dalam urutan.
The next()
metode berisi dua sifat: value
dan done
.
- Nilai
tersebutvalue
properti dapat dari setiap tipe data dan mewakili nilai saat dalam urutan. - dilakukan
Thedone
properti adalah nilai boolean yang menunjukkan apakah iterasi selesai atau tidak. Jika iterasi tidak lengkap,done
properti disetel kefalse
, jika tidak, properti disetel ketrue
.
Mari kita lihat contoh dari array iterable:
const arr = ('h', 'e', 'l', 'l', 'o'); let arrIterator = arr(Symbol.iterator)(); console.log(arrIterator.next()); // (value: "h", done: false) console.log(arrIterator.next()); // (value: "e", done: false) console.log(arrIterator.next()); // (value: "l", done: false) console.log(arrIterator.next()); // (value: "l", done: false) console.log(arrIterator.next()); // (value: "o", done: false) console.log(arrIterator.next()); // (value: undefined, done: true)
Anda dapat memanggil next()
berulang kali untuk mengulang suatu arrIterator
objek.
- The
next()
Metode mengembalikan sebuah objek dengan dua sifat:value
dandone
. - Saat
next()
metode mencapai akhir urutan,done
properti disetel kefalse
.
Mari kita lihat bagaimana for… of
loop mengeksekusi program di atas. Sebagai contoh,
const arr = ('h', 'e', 'l', 'l', 'o'); for (let i of arr) ( console.log(i); )
Keluaran
Halo
The for… of
loop tidak persis sama dengan program di atas.
The for… of
Loop terus memanggil next()
metode pada iterator. Setelah mencapai done:true
, for… of
loop berakhir.
Iterator Buatan Pengguna
Anda juga dapat membuat iterator Anda sendiri dan memanggil next()
untuk mengakses elemen berikutnya. Sebagai contoh,
function displayElements(arr) ( // to update the iteration let n = 0; return ( // implementing the next() function next() ( if(n < arr.length) ( return ( value: arr(n++), done: false ) ) return ( value: undefined, done: true ) ) ) ) const arr = ('h', 'e', 'l', 'l', 'o'); const arrIterator = displayElements(arr); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next());
Keluaran
(nilai: "h", selesai: salah) (nilai: "e", selesai: salah) (nilai: "l", selesai: salah) (nilai: "l", selesai: salah) (nilai: "o" , selesai: salah) (nilai: tidak ditentukan, selesai: benar)
Dalam program di atas, kami telah membuat iterator kami sendiri. The displayElements()
kembali fungsi value
dan done
properti.
- Setiap kali
next()
metode dipanggil, fungsi dijalankan satu kali dan menampilkan nilai array. - Terakhir, ketika semua elemen array habis,
done
properti disetel ketrue
, denganvalue
asundefined
.