Iterator JavaScript: Panduan Lengkap – Codewithaden

Iterator Javascript adalah konsep baru ES6 di mana ia memproses masing -masing item dalam koleksi, operasi yang meresap. Iterator adalah cara baru lingkaran atas koleksi apa pun di JavaScript.

Mereka diperkenalkan di ES6 dan telah menjadi populer karena mereka secara luas memberikan beberapa cara untuk mengulangi koleksi, dari yang sederhana untuk loop ke peta() dan Saring() Iterator dan Generator Bawa konsep iterasi langsung ke dalam bahasa inti dan berikan mekanisme untuk menyesuaikan perilaku loop.

Javascript Iterator

Iterator di Javascript adalah obyek itu memungkinkan kita pengulangan melalui an Himpunan , sebuah Obyek , sebuah Rangkaian atau bahkan kebiasaan Objek . Iterator memungkinkan kita untuk secara efektif mengulangi kumpulan objek seperti Himpunan , rangkaian , benda atau yang lainnya struktur data

Iterator paling umum di Javascript adalah array iterator, yang mengembalikan setiap nilai dalam array yang terkait secara berurutan.

Meskipun mudah untuk membayangkan bahwa semua iterator dapat dinyatakan sebagai array, ini tidak benar.

Array harus dialokasikan sepenuhnya, tetapi iterator hanya dikonsumsi dan dengan demikian dapat mengekspresikan urutan ukuran yang tidak terbatas, seperti kisaran bilangan bulat antara 0 dan tak terbatas.

Contoh

//main.js

let dances = ['Robot', 'Hip-hop','break'];
let mj = dances[Symbol.iterator]();
console.log(mj.next()); 

Jika Anda langsung menjalankan kode di atas di browser, Anda mungkin menghadapi masalah berikut.

Kemungkinan kesalahan

  1. Anda bisa mendapatkan kesalahan sintaks.
  2. Jika Anda melakukan kode langsung di browser Anda, maka kemungkinan besar gagal Webpack proses kompilasi.

Solusi yang memungkinkan

  1. Panduan Pemula untuk Mengatur Lingkungan Pengembangan ES6 Ikuti artikel ini secara ketat dan masukkan kode di atas di Main.js mengajukan.

Keluaran

Object {value: "Robot", done: false} 

Aneh kan? Namun, itulah arti iterator .

Itu menyediakan antarmuka kita bisa menyebut metode seperti itu Berikutnya().

Selanjutnya, iterator di JavaScript juga mengembalikan obyek Kami menyimpan dalam variabel. Lalu ketika kita mencatatnya ke browser, kita bisa melihat obyek dengan dua properti

  1. nilai: Ini memegang nilai berikutnya dari objek iterator.
  2. selesai: Bendera yang menunjukkan bahwa item dalam objek iterable tidak lengkap dalam proses iterasi.
//main.js

let dances = ['Robot', 'Hip-hop','break'];
let mj = dances[Symbol.iterator]();
console.log(mj.next().value); 

Keluaran

Robot 
//main.js

let dances = ['Robot', 'Hip-hop','break'];
let mj = dances[Symbol.iterator]();
console.log(mj.next().done); 

Keluaran

false
 
//main.js

let dances = ['Robot', 'Hip-hop','break'];
let mj = dances[Symbol.iterator]();
console.log(mj.next());
console.log(mj.next());
console.log(mj.next());
console.log(mj.next()); 

Keluaran

Object {value: "Robot", done: false}
Object {value: "Hip-hop", done: false}
Object {value: "break", done: false}
Object {value: undefined, done: true} 

Jika Anda memperhatikan dengan cermat, objek terakhir memiliki nilainya tidak terdefinisi , yang BENAR. Itu berarti bahwa array kami hanya memiliki tiga item, dan hingga 3 item selesai salah karena kompiler tidak tahu apakah nilai berikutnya ada, jadi itu memberikan selesai = false.

Setelah itu, ketika nilai berikutnya tidak ada, itu akan memberikan nilai = tidak terdefinisi dan selesai = benar.

Bagaimana kita bisa mendefinisikan iterator?

Agar suatu objek atau array dapat diulang, ia perlu menerapkan protokol iterable , artinya objek harus memiliki properti dengan a Simbol.iterator kunci. Dalam contoh sebelumnya, kami telah menggunakan protokol ini.

//main.js

let mj = dances[Symbol.iterator](); 

Kami telah menggunakan array tarian, dan untuk membuatnya iterable, Kami telah menggunakan Simbol. Protokol Iterator untuk membuatnya iterable.

Kita dapat uji variabelnya, apakah itu array atau Sebuah Objek itu adalah iterable atau tidak, dengan kode berikut.

//main.js

function itemIterable(item) {
    return typeof item[Symbol.iterator] == "function";
} 

Dalam contoh di atas, saat kita melewati Array MJ untuk ini Fungsi itemITERABLE (), kami akan mendapatkan hasil berikut.

//main.js

let dances = ['Robot', 'Hip-hop','break'];
let mj = dances[Symbol.iterator]();
function itemIterable(item) {
    return typeof item[Symbol.iterator] == "function";
}
let result = itemIterable(mj);
console.log(result); 

Keluaran

true 

JavaScript untuk Loop

Itu membuat loop iterasi di atas objek yang dapat diulang seperti array, objek, peta, set, set lemah, string, dan fitur barunya Es6

Sintaksis

for (var of iterable) {
  // statement
} 

var Pada setiap iterasi loop, nilai properti yang berbeda ditetapkan untuk variabel

iterable Objek yang propertinya diulang.

//main.js

let dances = ['Robot', 'Hip-hop','break'];
for (let value of dances){
    console.log(value);
} 

Keluaran

Robot
Hip-hop
break 
Iterators
Iterator dalam JavaScript

Jika kita ingin membuat iterator, lalu ambil objek pertama dan kemudian tambahkan Simbol.iterator protokol di dalamnya sehingga mengembalikan antarmuka di mana kita dapat memanggil metode berikutnya (), dan akhirnya, kita mendapatkan objek, yang memiliki 2 properti nilai dan selesai

Poin -poin penting dari iterator

  1. Iterator adalah fungsi yang menyediakan antarmuka melalui mana kita dapat menyebut metode seperti itu Berikutnya () dan, sebagai imbalannya, memberi kami sebuah obyek
  2. Iterator dibuat menggunakan iterable protokol yang memungkinkan iterable keberatan untuk menyesuaikan perilakunya. Misalnya, array bukan iterator Es6.
  3. Sebuah Iterator memungkinkan kami mengulang konten objek pada waktu tertentu.
  4. Sebuah Iterator menciptakan Struktur data yang dapat dilalui.

JavaScript iterable

Sebuah iterable adalah struktur data yang ingin membuat elemennya dapat diakses oleh publik. Ia melakukannya dengan menerapkan metode yang kuncinya adalah simbol. Iterator. Metode itu adalah pabrik untuk iterator . Artinya, itu akan membuat iterator

Sebuah Iterator adalah penunjuk untuk melintasi elemen struktur data.

Banyak hal yang dapat digunakan di JavaScript. Ini mungkin tidak terlihat segera, tetapi jika Anda memeriksanya dengan hati -hati, Iterable akan mulai ditampilkan.

Ini semua adalah iterable –

  • Array dan Typedarrays
  • String – mengulangi setiap karakter atau Unicode titik kode.
  • Peta -mengulangi pasangan bernilai kunci
  • Set – mengulangi elemen mereka
  • argumen -Variabel khusus seperti array dalam fungsi
  • Elemen dom (pekerjaan sedang berlangsung)

Kesimpulan

Anda dapat dengan mudah memahami bagaimana iterator bekerja dengan pengetahuan yang diperoleh dari artikel. Namun, logikanya mungkin agak sulit untuk diikuti.

Itu untuk tutorial ini.

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *