Penjelasan mendetail tentang prinsip implementasi array kelas JavaScript dan objek yang dapat diubah

[Rekomendasi terkait: Tutorial video JavaScript, front-end web]

objek yang dapat diubah

adalah objek khusus, dan perbedaannya dari objek biasa bukan hanya pada akses berurutan dan penyimpanan elemen. Perbedaan penting lainnya adalah bahwa array dapat diubah, yaitu, Anda dapat menggunakan pernyataan for ... of untuk mengakses (mengulangi) semua elemen.

Kita cukup melakukan percobaan kecil:

let arr = [1,2,3,4,5]for(let val of arr){
    

hasil eksekusi kode

console.log(val)}

Kode di atas hanya menggunakan fitur iterasi dari array. Saat kita mengakses elemen array, kita tidak perlu menggunakan subskrip dari elemen tersebut.

Apa yang terjadi jika kita menggunakan pernyataan for ... of pada objek normal?

misalkan obj = {
    nama:'xiaoming',
    age:12,}for(let para of obj){ //Kode akan melaporkan kesalahan console.log(para)}

Efek eksekusinya adalah sebagai berikut:

Ini membuktikan bahwa ada kesenjangan yang dapat diubah antara objek biasa dan array. Kita menyebut objek dengan fungsi berulang sebagai objek yang dapat diubah .

Symbol.iterator

Jika kita ingin suatu objek dapat diiterasi, kita harus menambahkan metode yang disebut Symbol.iterator ke objek tersebut ( Symbol bawaan yang secara khusus membuat objek dapat diubah).

Fungsi metode meliputi:

1. Saat menggunakan perulangan for ... of untuk mengulangi suatu objek, metode Symbol.iterator akan dipanggil, dan metode ini harus mengembalikan sebuah iterator (objek dengan metode next() ).
2. Setelah mendapatkan iterator, for ... of akan terus memanggil metode next() dari iterator untuk mendapatkan elemen berikutnya.
3. Konten yang dikembalikan oleh metode next() harus sesuai dengan format: {done:Boolean,value:any} . Ketika done:true , perulangan berakhir, jika tidak, value adalah nilai berikutnya.

Iterator: Iterator

adalah konsep yang dipinjam dari bahasa seperti C++ . Prinsip iterator seperti sebuah penunjuk, ia menunjuk ke suatu elemen dalam kumpulan data untuk mendapatkan elemen lainnya. Iterator mirip dengan perluasan subskrip dalam array. Berbagai struktur data, seperti daftar tertaut ( List ), set ( Set ), dan peta ( Map ), memiliki iterator yang sesuai.

Iterator di JS dirancang khusus untuk operasi ini. Iterator yang diperoleh setiap kali selalu menunjuk ke elemen pertama pada awalnya, dan iterator hanya memiliki perilaku next() hingga elemen terakhir dari kumpulan data diperoleh. Kita tidak bisa secara fleksibel memindahkan posisi iterator, sehingga tugas iterator adalah melintasi elemen-elemen dalam kumpulan data dalam urutan tertentu .

Menerapkan objek yang dapat diubah:

let obj = {
    dari:1,
    ke:5,}obj[Simbol.iterator] = fungsi(){
    //Kembalikan iterator return {
        saat ini:ini.dari,
        terakhir:ini.untuk,
        Berikutnya(){
            if(ini.saat ini<ini.terakhir){
                kembalikan {selesai: salah, nilai: ini.saat ini++}
            }kalau tidak{
                kembalikan {selesai: benar}//akhir iterasi}
        }
    }}untuk(biarkan para dari objek){
    console.log(para)}

efek eksekusi kode:

Perhatikan bahwa meskipun objek di atas dapat diiterasi, material yang digunakan untuk iterasi bukanlah objek, melainkan iterator (juga objek) yang dikembalikan oleh Symbol.iterator .

Membangun objek itu sendiri menjadi sebuah iterator

Kode di atas membangun fungsi bawaan Symbol.iterator() , yang mengembalikan objek iterator. Kita juga dapat menggunakan cara lain untuk mengimplementasikan iterator: menjadikan objek itu sendiri sebagai iterator:

let obj = {
    dari:1,
    ke:5,
    [Simbol.iterator](){
        ini.saat ini = ini.dari;
        kembalikan ini;//Kembalikan objek itu sendiri},
    next(){//Tambahkan metode selanjutnya ke objek if(this.current<this.to){
            kembalikan {selesai: salah, nilai: ini.saat ini++}
        }kalau tidak{
            kembalikan {selesai: benar}
        }
    }}untuk(biarkan para dari objek){
    console.log(para)}

Efek eksekusi kodenya sama seperti gambar di atas.

Meskipun kode lebih ringkas dengan melakukan ini, karena tidak ada objek iterable baru yang dihasilkan, kita tidak dapat mengeksekusi dua perulangan for ... of untuk mengulangi objek yang sama pada waktu yang sama, tetapi dua iterasi paralel berada pada objek yang sama langka.

Kita dapat meringkas konsep objek yang dapat diubah:

yang disebut objek yang dapat diubah adalah objek biasa yang memiliki satu metode lagi yang disebut Symbol.iterator daripada objek biasa.

Alternatifnya, sebuah objek dengan Symbol.iterator dan metode next juga merupakan objek yang dapat diubah.

String juga dapat diubah.

Array dan string juga dapat diubah. Kita dapat dengan mudah menggunakan pernyataan for...of untuk mengulangi elemen karakter dalam array:

let str = '123'for(let c of str){
    console.log(c)}

Ini juga berlaku untuk pasangan pengganti (karakter tambahan UTF-16 ):

let str = '...'for(let c of str){
    console.log(c)}

Efek eksekusinya adalah sebagai berikut:

Iterator string

tidak hanya for...of pernyataan yang dapat menggunakan iterator, kita juga dapat memanggil iterator secara eksplisit:

let str = '12345'let itr = str[Symbol.iterator]() while(true){
    biarkan hasil = itr.next()
    if(hasil.selesai)break;
    console.log(result.value)}

efek eksekusi kode:

Kode di atas melakukan operasi melintasi karakter string. Tidakkah menurut Anda objek yang dapat diubah sudah tidak begitu misterius lagi!

Objek seperti array dan objek yang dapat diubah

Objek seperti array dan objek yang dapat diubah sangat mirip dalam hal fungsi traversal. Keduanya dapat dengan mudah mengakses elemen internal, namun masih ada perbedaan yang jelas antara keduanya:

1. objek yang iterable : objek yang mengimplementasikan Symbol.iterator ;
2. objek mirip array-like : memiliki indeks numerik dan memiliki atribut length ;

string adalah objek yang dapat diubah meskipun merupakan objek mirip array.

Objek yang dapat diubah dan mirip array biasanya bukan array. Jika kita ingin mengubah objek yang dapat diubah atau mirip array menjadi array, kita perlu menggunakan metode Array.from .

Array.from

Gunakan Array.from untuk mengubah string menjadi array:

let str = '123' let arr = Array.from(str)console.log(arr)

Efek eksekusi kode adalah sebagai berikut:

Ubah objek seperti array khusus menjadi array:

let obj = {
    0:'0',
    1:'1',
    2:'2',
    length:3}let arr = Array.from(obj)console.log(arr)

hasil eksekusi kode:

Sintaks lengkap dari Array.from :

Array.from(obj[, mapFunc, thisArg])

Metode mapFunc akan dipanggil pada setiap elemen yang dapat diubah atau mirip array sebelum membuat array. Jika mapFunc adalah metode anggota, Anda dapat menggunakan thisArg untuk memberikan penunjuk this .

Contoh:

let str = '12345'let arr = Array.from(str,itm=>+itm)console.log(arr)

hasil eksekusi kode:

Di sini, fungsi pemetaan digunakan untuk mengubah array karakter yang harus dihasilkan menjadi array numerik.

Ringkasan

1. Objek yang dapat menggunakan sintaks for...of disebut objek iterable.
2. Objek Iterable adalah objek yang mengimplementasikan metode Symbol.iterator berdasarkan objek biasa.
3. Metode Symbol.iterator mengembalikan iterator
4. yang berisi metode next , metode ini mengembalikan nilai elemen berikutnya;

5. Array.from

6. kembalian dari metode next harus memenuhi format {done:Boolean,value:nextVal} . Ketika done:true , iterasi berakhir

7. objek yang dapat diubah menjadi array. ;

[Rekomendasi terkait: tutorial video JavaScript, front-end web]

Di atas adalah penjelasan rinci tentang prinsip implementasi array kelas JavaScript dan objek yang dapat diubah jaringan kode sumber!