Dalam pengembangan harian kami, pengoperasian dan konversi array adalah operasi yang sangat umum. Mari kita lihat contoh:
Salinan kode adalah sebagai berikut:
var descolors = [],
srccolors = [
{r: 255, g: 255, b: 255}, // putih
{r: 128, g: 128, b: 128}, // abu -abu
{r: 0, g: 0, b: 0} // hitam
];
untuk (var i = 0, ilen = srccolors.length; i <ilen; i ++) {
var color = srccolors [i],
format = fungsi (warna) {
return math.round (warna / 2);
};
descolors.push ({
R: Format (Color.R),
G: Format (Color.g),
B: Format (Color.B)
});
}
// output:
// [
// {r: 128, g: 128, b: 128},
// {r: 64, g: 64, b: 64},
// {r: 0, g: 0, b: 0}
//];
Console.log (Descolors);
Dari contoh di atas, kita dapat melihat bahwa semua operasi memiliki tingkat pengulangan yang relatif tinggi. Bagaimana cara mengoptimalkannya? Untungnya, Ecmascript 5 memberi kita metode peta, yang dapat kita gunakan untuk mengoptimalkan contoh di atas:
Salinan kode adalah sebagai berikut:
var srccolors = [
{r: 255, g: 255, b: 255}, // putih
{r: 128, g: 128, b: 128}, // abu -abu
{r: 0, g: 0, b: 0} // hitam
],
descolors = srccolors.map (function (val) {
var format = function (color) {
return math.round (warna/2);
};
kembali {
R: Format (Val.R),
G: Format (Val.G),
B: Format (Val.B)
}
});
// output:
// [
// {r: 128, g: 128, b: 128},
// {r: 64, g: 64, b: 64},
// {r: 0, g: 0, b: 0}
//];
Console.log (Descolors);
Dari contoh di atas, kita dapat melihat bahwa kita menggunakan peta untuk mengganti bagian loop, sehingga kita hanya perlu peduli dengan logika implementasi dari setiap elemen itu sendiri. Untuk detail tentang metode peta, silakan klik di sini.
1. Peta Definisi Dasar:
array.map (callback [, thisarg]);
Metode peta memanggil fungsi callback sekali agar untuk setiap elemen dalam array asli. Callback Nilai pengembalian setelah setiap eksekusi digabungkan untuk membentuk array baru. Fungsi callback hanya akan dipanggil pada indeks dengan nilai; Indeks yang belum pernah ditetapkan nilai atau dihapus dengan Delete tidak akan dipanggil.
Fungsi callback akan secara otomatis diteruskan dalam tiga parameter: elemen array, indeks elemen, dan array asli itu sendiri.
Jika parameter ThisArg memiliki nilai, ini akan menunjukkan objek ini pada parameter ThisArg setiap kali fungsi panggilan balik dipanggil. Jika parameter ThisArg dihilangkan, atau nilainya ditetapkan untuk nol atau tidak terdefinisi, ini menunjuk ke objek global.
Peta tidak memodifikasi array asli itu sendiri yang menyebutnya (tentu saja, dapat mengubah array asli ketika panggilan balik dieksekusi).
Ketika array menjalankan metode peta, panjang array ditentukan sebelum metode panggilan balik pertama dipanggil. Selama seluruh operasi metode peta, tidak peduli apakah operasi dalam fungsi callback menambah atau menghapus elemen ke array asli. Metode peta tidak akan tahu. Jika elemen array meningkat, elemen yang baru ditambahkan tidak akan dilalui oleh peta. Jika elemen array berkurang, metode MAP juga akan berpikir bahwa panjang array asli tidak berubah, menghasilkan akses array ke outbound. Jika elemen dalam array diubah atau dihapus, nilai yang mereka lewati menjadi panggilan balik adalah nilai metode peta yang melintasi momen mereka.
2.Map Instance:
Salinan kode adalah sebagai berikut:
// Contoh 1: Metode peta panggilan pada string
var result = array.prototype.map.call ("hello world", function (x, index, arr) {
// string {0: "h", 1: "e", 2: "l", 3: "l", 4: "o", 5: "", 6: "w", 7: "o", 8: "r", 9: "l", 10: "d", panjang: 11}
console.log (arr);
return x.charcodeat (0);
});
// Output: [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]
console.log (hasil);
Contoh di atas menunjukkan menggunakan metode peta pada string untuk mendapatkan array kode ASCII yang sesuai dengan setiap karakter dalam string. Harap perhatikan hasil cetak Console.log (ARR) yang dicetak.
Salinan kode adalah sebagai berikut:
// Contoh 2: Apa hasil dari operasi berikut?
var result = ["1", "2", "3"]. Map (parseInt);
// output: [1, nan, nan]
console.log (hasil);
Mungkin Anda akan memiliki pertanyaan, mengapa tidak [1,2,3]? Kita tahu bahwa metode ParseInt dapat menerima dua parameter. Parameter pertama adalah nilai yang perlu dikonversi, dan parameter kedua adalah jumlah biner. Jika Anda tidak mengerti, Anda dapat mengklik di sini. Ketika kami menggunakan metode MAP, fungsi callback menerima tiga parameter, sedangkan Parseint hanya dapat menerima dua parameter paling banyak, sehingga parameter ketiga secara langsung dibuang. Pada saat yang sama, ParseInt menggunakan nilai indeks yang diteruskan sebagai nomor biner, sehingga mengembalikan NAN. Lihatlah hasil output berikut:
Salinan kode adalah sebagai berikut:
// ouputs: 1
console.log (parseInt ("1", 0));
// ouputs: 1
console.log (parseint ("1", tidak terdefinisi));
// ouputs: nan
console.log (parseInt ("2", 1));
// ouputs: nan
console.log (parseint ("3", 2));
Dua yang terakhir mudah dimengerti, tetapi mengapa dua yang pertama kembali 1? Untuk menjelaskan masalah ini, mari kita lihat deskripsi resmi:
Jika radix tidak terdefinisi atau 0 (atau tidak ada), JavaScript mengasumsikan berikut:
a) Jika string input dimulai dengan "0x" atau "0x", radix adalah 16 (hexadecimal) dan sisa string diuraikan.
b) Jika string input dimulai dengan “0 ″, Radix adalah delapan (oktal) atau 10 (desimal). Tepatnya radix dipilih yang bergantung pada implementasi. Spesifikasi ecmascript 5 bahwa 10 (desimal) digunakan, tetapi tidak semua browser mendukung ini. Untuk alasan ini selalu menentukan radix saat menggunakan parseint.
c) Jika string input dimulai dengan nilai lain, radix adalah 10 (desimal).
Pada poin ketiga, ketika string adalah nilai lain, standarnya adalah 10.
Jadi bagaimana kita memodifikasinya untuk membuat contoh output di atas secara normal? Lihat contoh berikut:
Salinan kode adalah sebagai berikut:
var result = ["1", "2", "3"]. Map (function (val) {
mengembalikan parseint (val, 10);
});
// output: [1, 2, 3]
console.log (hasil);
3. Kompatibilitas metode peta:
Metode peta tidak didukung di IE8 dan di bawah browser. Jika Anda ingin kompatibel dengan versi browser yang lebih lama, Anda dapat:
a) Jangan gunakan map .b) Gunakan sesuatu seperti ES5-shim untuk membuat map dukungan IE yang lebih tua .c) Gunakan metode _.map di garis bawah atau lodash untuk fungsi utilitas yang setara.
Di atas adalah pemahaman metode peta. Saya berharap ini akan membantu bagi pemula. Jika ada poin yang tidak pantas dalam artikel ini, saya harap Anda dapat memperbaikinya!