Saya menemukan jalan pintas yang rapi ini untuk mengubah DOM NodeList menjadi array biasa, tetapi harus saya akui, saya tidak sepenuhnya mengerti cara kerjanya:
[].slice.call(document.querySelectorAll('a'), 0)
Jadi itu dimulai dengan array kosong []
, lalu slice
digunakan untuk mengkonversi hasil call
ke array baru ya?
Bagian yang saya tidak mengerti adalah call
. Bagaimana cara mengonversi document.querySelectorAll('a')
dari NodeList ke array biasa?
javascript
arrays
call
slice
Yansky
sumber
sumber
Array.prototype.slice.call(document.querySelectorAll('a'));
adalah cara yang tepat untuk menulis potongan kode yang Anda tulis.Array.from
. Jadi misalnya ini akan melakukan hal yang sama: Array.from (document.querySelectorAll ('a'));Jawaban:
Apa yang terjadi di sini adalah bahwa Anda memanggil
slice()
seolah-olah itu adalah fungsiNodeList
menggunakancall()
. Apa yangslice()
dilakukan dalam kasus ini adalah membuat array kosong, kemudian beralih melalui objek yang sedang berjalan (awalnya array, sekarang aNodeList
) dan terus menambahkan elemen objek ke array kosong yang dibuatnya, yang akhirnya dikembalikan. Inilah artikel tentang ini .EDIT:
Itu tidak benar.
[].slice
mengembalikan objek fungsi. Objek fungsi memiliki fungsicall()
yang memanggil fungsi yang menetapkan parameter pertama daricall()
tothis
; dengan kata lain, membuat fungsi berpikir bahwa itu dipanggil dari parameter (yangNodeList
dikembalikan olehdocument.querySelectorAll('a')
) daripada dari array.sumber
Array.prototype.slice.call(...)
, ia sebenarnya instantiate objek array ([]
) hanya untuk mengakses metode slice prototipe-nya. Itu adalah contoh yang sia-sia. MengatakanArray.prototype.slice.call(...)
sebaliknya lebih bersih, meskipun Anda menambahkan beberapa karakter ke JS jika Anda menghitung ...NodeList
s[]
lebih dapat diandalkan karenaArray
dapat ditimpa dengan sesuatu yang lain. Jika Anda perlu menggunakan kembaliArray#slice
, itu ide yang baik untuk menyimpannya.var array = []; var push = array.push; var slice = array.slice; var splice = array.splice;
Apakah dia melakukan ini untuk masalah keamanan @MathiasBynens menyebutkan?Dalam JavaScript, metode suatu objek dapat terikat ke objek lain saat runtime. Singkatnya, javascript memungkinkan suatu objek untuk "meminjam" metode objek lain:
Metode
call
danapply
objek fungsi (dalam JavaScript, fungsi juga objek) memungkinkan Anda melakukan ini. Jadi, dalam kode Anda, Anda bisa mengatakan bahwa NodeList meminjam metode slice array..slice()
mengembalikan array lain sebagai hasilnya, yang akan menjadi array "dikonversi" yang kemudian dapat Anda gunakan.sumber
call
fungsiArray.prototype
alias[].prototype
diri Anda sendiri.Ini mengambil
slice
fungsi dariArray
. Ini kemudian memanggil fungsi itu, tetapi menggunakan hasildocument.querySelectorAll
sebagaithis
objek bukan array yang sebenarnya.sumber
Ini adalah teknik untuk mengkonversi objek mirip array ke array nyata.
Beberapa objek ini termasuk:
arguments
dalam fungsiIni melayani banyak tujuan, misalnya objek dilewatkan dengan referensi sedangkan array dilewatkan oleh nilai.
Perhatikan juga argumen pertama
0
bisa dihilangkan, penjelasan menyeluruh di sini .Dan demi kelengkapan, ada juga jQuery.makeArray () .
sumber
Ini adalah kode yang kami miliki,
Mari kita bongkar dulu,
Langkah: 1 Eksekusi
call
fungsicall
, selain darithisArg
, sisa argumen akan ditambahkan ke daftar argumen.slice
akan dipanggil dengan mengikatthis
nilainya sebagaithisArg
(array seperti objek berasaldocument.querySelector
) dan dengan daftar argumen. yaitu] argumenstart
yang berisi0
Langkah: 2 Eksekusi
slice
fungsi dipanggil dalamcall
start
akan ditugaskan ke variabels
sebagai0
end
iniundefined
,this.length
akan disimpan die
a
Setelah membuat pengaturan di atas, iterasi berikut akan terjadi
a
akan dikembalikan sebagai hasilnya.PS Untuk memahami skenario kami dengan lebih baik, beberapa langkah yang diperlukan untuk konteks kami telah diabaikan dari algoritme panggilan dan slice yang asli .
sumber
sumber
Dari ES6: Cukup buat array dengan Array.from (element.children) atau Array.from ({length: 5})
sumber