Teman -teman yang telah menggunakan garis bawah tahu bahwa ia memiliki API yang sangat lengkap untuk memanggil traversal array (set), dan _.each () adalah salah satunya. Berikut adalah contoh sederhana:
var arr = [1, 2, 3, 4, 5]; _. masing -masing (arr, fungsi (el) {console.log (el);});Kode di atas akan menghasilkan 1, 2, 3, 4, 5 pada gilirannya. Bukankah itu sangat menarik? Anda bahkan tidak perlu menulis untuk loop sendiri. Metode _.each () sangat berguna untuk melintasi array, tetapi implementasinya tidak sulit sama sekali. Mari kita lihat bagaimana _.each () diimplementasikan. Sebelum ini, mari kita lihat API _.each (). _.each () umumnya disebut sebagai berikut:
_.each (arr, fn, konteks);
Itu menerima 3 parameter,
Yang pertama adalah array yang perlu dilalui (sebenarnya, juga dimungkinkan untuk menjadi objek, jadi mari kita bahas ini nanti);
Yang kedua adalah fungsi callback -nya (fungsi panggilan balik ini dapat melewati 3 parameter, seperti: fungsi (el, i, arr), yang merupakan elemen saat ini, indeks saat ini dan array asli, masing -masing);
Yang ketiga adalah konteks bahwa fungsi callback harus terikat, yaitu, menentukan nilai fungsi callback ini FN.
Oke, kebutuhannya sangat jelas, mari kita mulai bekerja!
Pertama -tama mari kita terapkan _.each () yang paling sederhana, yang tidak dapat memodifikasi konteks ini, dan menerima dua parameter. Kodenya adalah sebagai berikut:
var _ = {}; // Asumsikan bahwa itu adalah implementasi paling sederhana dari _.each method_.each = function (arr, fn) {untuk (var i = 0; i <arr.length; i ++) {fn (arr [i], i, arr); } return arr; // kembalikan array asli}Bagaimana dengan itu? Bukankah itu sangat sederhana? Cukup gunakan loop untuk dan terus memanggil fungsi callback. Ini dapat dilakukan hanya dalam beberapa baris kode. Saya percaya tidak ada teman yang bisa memahaminya! Mari kita mengujinya untuk melihat apakah itu berfungsi secara normal:
var arr = [1, 2, 3, 4, 5]; _. masing -masing (arr, fungsi (el, i, arr) {console.log (el);});Buka di browser dan konsol akan melihat output yang benar.
Kode sederhana seperti itu tidak memiliki arti sama sekali. Mari kita lihat contoh yang lebih menantang. Misalnya, Array ARR memiliki properti SUM. Kita perlu menyimpulkan semua elemen array dan menyimpannya dalam jumlah, sebagai berikut:
var arr = [1, 2, 3, 4, 5]; arr.sum = 0; // Atribut SUM digunakan untuk menyimpan jumlah elemen array_.each (arr, function (el, i, arr) {this.sum += el;});Pada saat ini, ini digunakan dalam fungsi callback. Jika tidak terikat, ini adalah jendela secara default. Ini bukan yang kita inginkan. Kami berharap ini terikat pada array arr. Panggilan atau Terapkan dapat mengimplementasikan fungsi ini, kodenya adalah sebagai berikut:
var _ = {}; // Misalkan ini adalah underscore // bind, terima dua parameter fn dan konteks // mengikat fn ke konteks var bind = fungsi (fn, konteks) {konteks = konteks || batal; fungsi pengembalian (el, i, arr) {fn.call (konteks, el, i, arr); }} // _.each_.each = function (arr, fn, konteks) {// Panggil metode bind dan mengikat fn ke konteks fn = bind (fn, konteks); untuk (var i = 0; i <arr.length; i ++) {fn (arr [i], i, arr); } return arr;} // test case: var arr = [1, 2, 3, 4, 5]; arr.sum = 0; // Atribut SUM digunakan untuk menyimpan jumlah elemen array_.each (arr, function (el, i, arr) {this.sum += el;}, arr); console.log (arr.sum); // 15OK, _.each () ini sudah cukup kuat untuk beralih melalui array secara normal, dan Anda juga dapat menentukan nilai ini sesuka hati untuk mengubah konteks fungsi callback. Namun, seperti yang kami sebutkan sebelumnya, _.each () Underscore juga dapat melintasi objek, dan implementasi ini tidak sulit. Nilai saja apakah parameter pertama yang dilewati adalah objek atau array. Jika itu adalah array, iterate Like Us. Kalau tidak, jika itu adalah objek, gunakan objek untuk ... di loop traversal. Jika Anda tertarik, Anda dapat mencobanya sendiri atau memeriksa kode sumber underscore.
Catatan: Karena standar ES5, array asli memiliki metode traversal seperti array.prototype.foreach, array.prototype.map, dll., Dan yang asli dapat digunakan dalam proyek.
Di atas adalah deskripsi lengkap dari analisis mendalam dari metode traversal array JS (disarankan) yang diperkenalkan oleh editor. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!