Penjelasan terperinci tentang Array.prototype.map() dalam pengetahuan Javascript_Basic

Dalam pembangunan harian kami, mengendalikan dan menukar tatasusunan ialah operasi yang sangat biasa

Salin kod Kod adalah seperti berikut:

var desColors = [],
srcColors = [
{r: 255, g: 255, b: 255}, // Putih
{r: 128, g: 128, b: 128}, // Kelabu
{r: 0, g: 0, b: 0} // Hitam
];
untuk (var i = 0, ilen = srcColors.length; i var color = srcColors[i],
format = fungsi(warna) {
               kembalikan Math.round(warna / 2);
        };
desColors.push( {

r: format(warna.r),
g: format(warna.g),
           b: format(warna.b)
});
}

// Output:

// [
// {r: 128, g: 128, b: 128},
// {r: 64, g: 64, b: 64 },
// {r: 0, g: 0, b: 0 }
// ];
console.log(desColors);

Seperti yang dapat dilihat daripada contoh di atas, kadar pengulangan semua operasi adalah agak tinggi Bagaimana untuk mengoptimumkannya, Ecmascript 5 menyediakan kami kaedah peta, yang boleh kami gunakan untuk mengoptimumkan contoh di atas:

Salin kod Kod adalah seperti berikut:

var srcColors = [

{r: 255, g: 255, b: 255}, // Putih
{r: 128, g: 128, b: 128}, // Kelabu
{r: 0, g: 0, b: 0} // Hitam
],
DesColors = srcColors.map(function(val) {
         format var = fungsi(warna) {
               kembalikan 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);

Seperti yang dapat dilihat daripada contoh di atas, kami menggunakan peta untuk menggantikan bahagian gelung for, jadi kami hanya perlu mengambil berat tentang logik pelaksanaan setiap elemen itu sendiri. Untuk butiran mengenai kaedah peta, sila klik di sini.

1. definisi asas peta:
array.map(panggilan balik[, thisArg]);

Kaedah peta akan memanggil fungsi panggil balik sekali untuk setiap elemen dalam tatasusunan asal dalam urutan. Nilai pulangan selepas setiap pelaksanaan panggilan balik digabungkan untuk membentuk tatasusunan baharu. Fungsi panggil balik hanya akan dipanggil pada indeks yang mempunyai nilai indeks yang tidak pernah diberikan nilai atau dipadam menggunakan padam tidak akan dipanggil.

Fungsi panggil balik secara automatik akan dihantar dalam tiga parameter: elemen tatasusunan, indeks elemen dan tatasusunan asal itu sendiri.

Jika parameter thisArg mempunyai nilai, setiap kali fungsi panggil balik dipanggil, ini akan menunjuk ke objek pada parameter thisArg. Jika parameter thisArg diabaikan, atau diberikan nilai null atau undefined, ini menunjuk ke objek global.

peta tidak mengubah suai tatasusunan asal itu sendiri (sudah tentu tatasusunan asal boleh ditukar apabila panggilan balik dilaksanakan).

Apabila kaedah peta dijalankan pada tatasusunan, panjang tatasusunan ditentukan sebelum kaedah panggil balik pertama dipanggil. Semasa keseluruhan proses menjalankan kaedah peta, tidak kira sama ada operasi dalam fungsi panggil balik menambah atau memadam elemen pada tatasusunan asal. Kaedah peta tidak akan mengetahui bahawa jika elemen tatasusunan meningkat, elemen yang baru ditambah tidak akan dilalui oleh peta Jika elemen tatasusunan berkurangan, kaedah peta juga akan berfikir bahawa panjang tatasusunan asal tidak berubah, mengakibatkan akses tatasusunan di luar sempadan. Jika elemen dalam tatasusunan diubah atau dipadamkan, nilainya yang dihantar ke panggilan balik adalah nilai pada saat itu apabila kaedah peta melintasinya.

2.contoh peta:

Salin kod Kod adalah seperti berikut:

//Contoh 1: Memanggil kaedah peta pada rentetan
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);
Kembalikan x.charCodeAt(0);
});
//Output: [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]
console.log(hasil);

Contoh di atas menunjukkan menggunakan kaedah peta pada String untuk mendapatkan tatasusunan yang terdiri daripada kod ASCII yang sepadan dengan setiap aksara dalam rentetan. Sila beri perhatian kepada keputusan yang dicetak oleh console.log(arr).

Salin kod Kod adalah seperti berikut:

//Contoh 2: Apakah hasil daripada operasi berikut?
var result = ["1", "2", "3"].map(parseInt);
//Output: [1, NaN, NaN]
console.log(hasil);

Mungkin anda mempunyai soalan, mengapa tidak [1,2,3]? Kami tahu bahawa kaedah parseInt boleh menerima dua parameter Parameter pertama ialah nilai yang perlu ditukar, dan parameter kedua ialah nombor asas Jika anda tidak faham, anda boleh klik di sini. Apabila kami menggunakan kaedah peta, fungsi panggil balik menerima tiga parameter, manakala parseInt hanya boleh menerima paling banyak dua parameter, supaya parameter ketiga dibuang terus Pada masa yang sama, parseInt menganggap nilai indeks yang diluluskan sebagai nombor asas gunakan. Dengan itu mengembalikan NaN. Lihat output di bawah:

Salin kod Kod adalah seperti berikut:

//Keluaran: 1
console.log(parseInt("1", 0));
//Keluaran: 1
console.log(parseInt("1", undefined));
//Pengeluaran: NaN
console.log(parseInt("2", 1));
//Pengeluaran: NaN
console.log(parseInt("3", 2));

Dua yang terakhir mudah difahami, tetapi mengapa dua yang pertama mengembalikan 1? Untuk menerangkan masalah ini, mari kita lihat penerangan rasmi:
Jika radix tidak ditakrifkan atau 0 (atau tiada), JavaScript menganggap perkara berikut:
a) Jika rentetan input bermula dengan “0x” atau “0X”, radix ialah 16 (heksadesimal) dan baki rentetan dihuraikan.
b) Jika rentetan input bermula dengan "0", radix ialah lapan (oktal) atau 10 (perpuluhan yang dipilih adalah bergantung kepada pelaksanaan ECMAScript 5 menentukan bahawa 10 (perpuluhan) digunakan, tetapi tidak semua penyemak imbas menyokong ini lagi. Atas sebab ini, sentiasa nyatakan radix apabila menggunakan parseInt.
c) Jika rentetan input bermula dengan sebarang nilai lain, radix ialah 10 (perpuluhan).
Dalam titik ketiga, apabila rentetan adalah nilai lain, asas lalai kepada 10.

Jadi bagaimana kita boleh mengubah suainya untuk menjadikan contoh di atas keluaran secara normal? Lihat contoh berikut:

Salin kod Kod adalah seperti berikut:

var result = ["1", "2", "3"].map(function(val) {
Kembalikan parseInt(val, 10);
});
//Output: [1, 2, 3]
console.log(hasil);

3.Keserasian kaedah peta:
Kaedah peta tidak disokong dalam pelayar IE8 dan ke bawah Untuk serasi dengan versi pelayar yang lebih lama, anda boleh:

a) Jangan gunakan <font face="NSimsun">map</font>.b) Gunakan sesuatu seperti es5-shim untuk membuat sokongan IE yang lebih lama <font face="NSimsun">map</font>.c) Gunakan kaedah <font face="NSimsun">_.map</font> dalam Underscore atau Lodash untuk fungsi utiliti yang setara.

Di atas adalah pemahaman saya tentang kaedah peta. Saya harap ia dapat membantu pemula.