Iterator dan Iterables JavaScript

Dalam tutorial ini, anda akan belajar mengenai iterator JavaScript dan iterables dengan bantuan contoh.

Iterables dan Iterator JavaScript

JavaScript menyediakan protokol untuk mengulang struktur data. Protokol ini mendefinisikan bagaimana struktur data ini diulang menggunakan for… ofgelung.

Konsep protokol boleh dibahagikan kepada:

  • berulang kali
  • iterator

Protokol berulang menyebutkan bahawa berulang perlu mempunyai Symbol.iteratorkuncinya.

Iterables JavaScript

Struktur data yang mempunyai Symbol.iterator()kaedah tersebut disebut iterables. Contohnya, Susunan, Rentetan, Set, dll.

Pengulangan JavaScript

Iterator adalah objek yang dikembalikan dengan Symbol.iterator()kaedah.

Protokol iterator menyediakan next()kaedah untuk mengakses setiap elemen berulang (struktur data) satu demi satu.

Mari kita lihat contoh yang mempunyai iterables 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);

Pengeluaran

 Array Iterator () StringIterator ()

Di sini, memanggil Symbol.iterator()kaedah array dan rentetan mengembalikan lelaran masing-masing.

Iterate Melalui Iterables

Anda boleh menggunakan for… ofgelung untuk melakukan lelaran pada objek-objek yang boleh berulang kali ini. Anda boleh melakukan lelaran melalui Symbol.iterator()kaedah seperti ini:

 const number = ( 1, 2, 3); for (let n of number(Symbol.iterator)()) ( console.log(n); )

Pengeluaran

 1 2 3

Atau anda boleh melakukan lelaran melalui array seperti ini:

 const number = ( 1, 2, 3); for (let n of number) ( console.log(n); )

Di sini, iterator membolehkan for… ofgelung melakukan iterasi pada array dan mengembalikan setiap nilai.

Kaedah seterusnya () Kaedah JavaScript

Objek iterator mempunyai next()kaedah yang mengembalikan item seterusnya dalam urutan.

The next()Cara mengandungi dua sifat: valuedan done.

  • nilai
    ini valueharta boleh menjadi apa-apa jenis data dan mewakili nilai semasa dalam jujukan.
  • dilakukan
    The doneharta adalah nilai boolean yang menunjukkan sama ada lelaran lengkap atau tidak. Sekiranya lelaran tidak lengkap, doneharta tanah diset ke false, jika tidak, ia ditetapkan ke true.

Mari lihat contoh iterables array:

 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 boleh memanggil next()berulang kali untuk melakukan lelaran pada arrIteratorobjek.

  • The next()Cara mengembalikan objek dengan dua sifat: valuedan done.
  • Apabila next()kaedah mencapai akhir urutan, maka doneharta itu ditetapkan ke false.

Mari kita lihat bagaimana for… ofgelung melaksanakan program di atas. Sebagai contoh,

 const arr = ('h', 'e', 'l', 'l', 'o'); for (let i of arr) ( console.log(i); )

Pengeluaran

 hello

The for… ofgelung tidak tepat yang sama seperti program di atas.

The for… ofgelung menyimpan memanggil next()kaedah di iterator itu. Setelah sampai done:true, for… ofgelung akan berakhir.

Iterator yang Ditetapkan Pengguna

Anda juga boleh membuat iterator dan panggilan anda sendiri next()untuk mengakses elemen seterusnya. 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());

Pengeluaran

 (nilai: "h", selesai: palsu) (nilai: "e", selesai: palsu) (nilai: "l", selesai: palsu) (nilai: "l", selesai: palsu) (nilai: "o" , selesai: false) (nilai: tidak ditentukan, selesai: benar)

Dalam program di atas, kami telah membuat iterator sendiri. The displayElements()pulangan fungsi valuedan doneharta.

  • Setiap kali next()kaedah dipanggil, fungsi akan dijalankan sekali dan memaparkan nilai array.
  • Akhirnya, apabila semua elemen array habis, doneharta tanah diset ke true, dengan valuesebagai undefined.

Artikel menarik...