Apa itu iterable di javascript?

Iterable adalah antarmuka yang menentukan bahwa suatu objek dapat diakses jika mengimplementasikan metode yang kuncinya adalah [simbol. iterator]

Beberapa struktur data bawaan yang menggunakan iterable adalah

• Array
• String
• Peta
• Set dll

Mengapa iterables ditambahkan di ES6?

Tanpa iterable, sulit untuk mengelola iterasi pada data untuk berbagai jenis struktur data i. Iterasi pada array berbeda dengan iterasi pada objek

Juga, ES6 telah memperkenalkan struktur data baru seperti set dan peta sehingga akan menjadi lebih rumit untuk menulis logika sesuai struktur data untuk iterasi

Di sinilah antarmuka iterable lahir

Ada dua hal yang perlu diperhatikan di sini

1. Konsumen data — bagaimana iterasi terjadi seperti menggunakan loop, operator spread, array. dari metode, destrukturisasi melalui pola array, dll
2. Sumber data — struktur data apa yang dia pilih seperti larik, peta, string, dll untuk diulang

Iterator

Objek yang mengetahui cara mengakses item dari koleksi satu per satu, sekaligus melacak posisinya saat ini dalam urutan tersebut

Objek yang dikembalikan oleh antarmuka iterable juga merupakan objek iterator

Objek Iterator memiliki metode next()_ yang mengembalikan item berikutnya dalam urutan. Metode ini mengembalikan objek dengan dua properti. ________ 49 _______ dan value dan ketika next() panggilan mencapai akhir urutan maka properti ________ 49 _______ diatur ke true lain tetap false

Jadi selanjutnya pada pengembalian iterator

{nilai. 'Nilai iterasi saat ini', selesai. 'benar salah'}

Sekarang, karena kita sudah jelas dengan teorinya, mari kita lihat beberapa contoh

Contoh larik sederhana

Iterator susunan

Di sini, dia memiliki array arr dengan beberapa nilai dan kemudian dia membuat objek iterator di mana dia dapat memanggil next() sampai dia selesai seperti true

Catatan. Array sudah memiliki simbol. kunci iterator sebagai fungsi di dalamnya dan dalam contoh di atas Simbol. iterator mewakili properti dari objek next()_1 yang ketika kita panggil, buat instance iterator untuk mengonsumsi nilai objek itu hingga berikutnya

Kita dapat membuat objek iterable dan iterator kita sendiri, mari kita lihat contohnya

Contoh objek iterator khusus

Catatan. Untuk berlari di atas dia akan menggunakan for. loop, Anda dapat membaca di sini untuk lebih jelasnya

Ini adalah cara kami mengulangi objek customIterable kami

for (const x of customIterable) {
console.log(x);
}
// output 1,2,3,4,5,undefined

Kode menjalankan lima langkah, dengan next()2 bertambah setiap proses. Pertama, ia mengembalikan nilai next()_3, kemudian nilai next()4 dan seterusnya hingga next()5 kemudian ia menunjukkan bahwa akhir iterasi telah tercapai dan nilai next()6 dikembalikan. Setiap item dibungkus dalam objek dengan properti

• value yang menyimpan barang sebenarnya dan
• done_ yang merupakan bendera boolean yang menunjukkan apakah akhir telah tercapai, belum

Catatan. Langkah terakhir dapat mengembalikan nilai jika diperlukan, juga dapat dipecah secara manual. loop jika diperlukan menggunakan kata kunci break. Kata kunci break akan mengirimkan sinyal ke iterator bahwa kode konsumsi telah selesai dan tidak akan menarik nilai lagi darinya, jadi itu tetap dipanggil setelah kita selesai mengulang, itu adalah yang kembali {selesai. true}, tapi dia juga bisa memanggilnya secara manual

Iterator dengan generator memiliki banyak daya dan dapat mengubah cara kita menulis kode

Harap pertimbangkan untuk memasukkan email Anda di sini jika Anda ingin ditambahkan ke daftar email saya dan ikuti saya di media untuk membaca lebih banyak artikel tentang javascript dan di github untuk melihat kode gila saya. Jika ada yang kurang jelas atau ingin menunjukkan sesuatu, silahkan berkomentar di bawah

JavaScript menyediakan protokol untuk mengulang struktur data. Protokol ini menentukan bagaimana struktur data ini diulang menggunakan Array Iterator {} StringIterator {}0 loop

Konsep protokol dapat dibagi menjadi

Protokol iterable menyebutkan bahwa iterable harus memiliki kunci Array Iterator {} StringIterator {}1

Iterable JavaScript

Struktur data yang memiliki metode Array Iterator {} StringIterator {}_2 disebut iterables. Misalnya, Array, String, Set, dll

Iterator JavaScript

Iterator adalah objek yang dikembalikan oleh metode Array Iterator {} StringIterator {}2

Protokol iterator menyediakan metode Array Iterator {} StringIterator {}_4 untuk mengakses setiap elemen iterable (struktur data) satu per satu

Mari kita lihat contoh iterables yang memiliki Array Iterator {} StringIterator {}5

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 metode Array Iterator {} StringIterator {}2 dari array dan string mengembalikan masing-masing iterator

Iterasi Melalui Iterables

Anda dapat menggunakan Array Iterator {} StringIterator {}0 loop untuk beralih melalui objek yang dapat diubah ini. Anda dapat mengulang melalui metode Array Iterator {} StringIterator {}_2 seperti ini

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

Keluaran

1 2 3

Atau Anda cukup mengulang melalui array seperti ini

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

Di sini, iterator memungkinkan Array Iterator {} StringIterator {}_0 loop untuk beralih ke array dan mengembalikan setiap nilai

Metode JavaScript next()

Objek iterator memiliki metode Array Iterator {} StringIterator {}_4 yang mengembalikan item berikutnya dalam urutan

Metode Array Iterator {} StringIterator {}4 berisi dua properti. const number = [ 1, 2, 3]; for (let n of number[Symbol.iterator]()) { console.log(n); }2 dan const number = [ 1, 2, 3]; for (let n of number[Symbol.iterator]()) { console.log(n); }3

• nilai
  Properti const number = [ 1, 2, 3]; for (let n of number[Symbol.iterator]()) { console.log(n); }_2 dapat berupa tipe data apa pun dan mewakili nilai saat ini dalam urutan
• Selesai
  Properti const number = [ 1, 2, 3]; for (let n of number[Symbol.iterator]()) { console.log(n); }_3 adalah nilai boolean yang menunjukkan apakah iterasi selesai atau tidak. Jika iterasi tidak lengkap, properti const number = [ 1, 2, 3]; for (let n of number[Symbol.iterator]()) { console.log(n); }_3 disetel ke const number = [ 1, 2, 3]; for (let n of number[Symbol.iterator]()) { console.log(n); }7, selain itu disetel ke const number = [ 1, 2, 3]; for (let n of number[Symbol.iterator]()) { console.log(n); }8

Mari kita lihat contoh array iterables

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 Array Iterator {} StringIterator {}4 berulang kali untuk mengulangi objek 1 2 30

• Metode Array Iterator {} StringIterator {}4 mengembalikan objek dengan dua properti. const number = [ 1, 2, 3]; for (let n of number[Symbol.iterator]()) { console.log(n); }2 dan const number = [ 1, 2, 3]; for (let n of number[Symbol.iterator]()) { console.log(n); }3
• Ketika metode Array Iterator {} StringIterator {}_4 mencapai akhir urutan, maka properti const number = [ 1, 2, 3]; for (let n of number[Symbol.iterator]()) { console.log(n); }3 disetel ke const number = [ 1, 2, 3]; for (let n of number[Symbol.iterator]()) { console.log(n); }7

Mari kita lihat bagaimana Array Iterator {} StringIterator {}_0 loop mengeksekusi program di atas. Misalnya,

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

Keluaran

h e l l o

Loop Array Iterator {} StringIterator {}0 melakukan hal yang persis sama dengan program di atas

Loop Array Iterator {} StringIterator {}0 terus memanggil metode Array Iterator {} StringIterator {}4 pada iterator. Setelah mencapai const number = [ 1, 2, 3]; for (let n of number) { console.log(n); }1, loop Array Iterator {} StringIterator {}0 berakhir

Iterator yang Ditentukan Pengguna

Anda juga dapat membuat iterator Anda sendiri dan memanggil Array Iterator {} StringIterator {}4 untuk mengakses elemen berikutnya. Misalnya,

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

{value: "h", done: false} {value: "e", done: false} {value: "l", done: false} {value: "l", done: false} {value: "o", done: false} {value: undefined, done: true}

Pada program di atas, kita telah membuat iterator kita sendiri. Fungsi const number = [ 1, 2, 3]; for (let n of number) { console.log(n); }_4 mengembalikan properti const number = [ 1, 2, 3]; for (let n of number[Symbol.iterator]()) { console.log(n); }2 dan const number = [ 1, 2, 3]; for (let n of number[Symbol.iterator]()) { console.log(n); }3