Iterator dan Iterabel JavaScript

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… ofloop.

Konsep protokol dapat dibagi menjadi:

  • iterable
  • iterator

Protokol yang dapat diulang menyebutkan bahwa sebuah iterable harus memiliki Symbol.iteratorkuncinya.

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… ofloop 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… ofloop 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: valuedan done.

  • Nilai
    tersebut valueproperti dapat dari setiap tipe data dan mewakili nilai saat dalam urutan.
  • dilakukan
    The doneproperti adalah nilai boolean yang menunjukkan apakah iterasi selesai atau tidak. Jika iterasi tidak lengkap, doneproperti disetel ke false, jika tidak, properti disetel ke true.

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 arrIteratorobjek.

  • The next()Metode mengembalikan sebuah objek dengan dua sifat: valuedan done.
  • Saat next()metode mencapai akhir urutan, doneproperti disetel ke false.

Mari kita lihat bagaimana for… ofloop 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… ofloop tidak persis sama dengan program di atas.

The for… ofLoop terus memanggil next()metode pada iterator. Setelah mencapai done:true, for… ofloop 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 valuedan doneproperti.

  • Setiap kali next()metode dipanggil, fungsi dijalankan satu kali dan menampilkan nilai array.
  • Terakhir, ketika semua elemen array habis, doneproperti disetel ke true, dengan valueas undefined.

Artikel yang menarik...