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
3
0

  • 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