Apa yang dilakukan .map () dalam situasi ini?

95

Menggunakan Konsol Chrome, ini masukan dan keluaran saya:

[0].map(Array);

[[0, 0, [0]]]; // output

Apa yang terjadi disini?

EDIT

Alasan ini membuatku penasaran adalah karena sesuatu seperti

[0].map(String);

Akan kembali

["0"];

Dan tidak

["0", "0", "String"]
Jacksonkr
sumber
34
Saya berasumsi karena dia selalu membutuhkan beberapa Javascript WTF untuk merasa bahagia
npst
12
Oh, itu hanya varian yang kurang wtf-y['10', '10', '10'].map(parseInt)
gronostaj
2
.map()Perilaku aneh lainnya : stackoverflow.com/questions/14528397/… Secara umum, Anda harus berhati-hati saat menggunakan .map()fungsi yang membutuhkan lebih dari satu argumen.
Barmar
2
Lakukan saja[0].map(console.log)
Bergi
1
@ Jacksonkr: Terima kasih atas jawabannya. Saya pikir itu berjalan seperti ini: Saya menulis komentar, menjelaskan bahwa melihat JS WTF membuat saya senang, saya tidak harus sering menggunakan bahasa tersebut. Seseorang bertanya mengapa saya akan melihat pertanyaan JS jika saya tidak menyukai bahasanya. npst menjawab, dan dua komentar pertama dihapus. Lucu komentarnya masih mendapat suara positif, ya.
Eric Duminil

Jawaban:

123

The .map()Fungsi adalah memanggil Array()fungsi dengan tiga argumen, nilai dari elemen array yang 0, indeks elemen yang, juga 0, dan referensi ke seluruh array.

Jadi seperti melakukan ini:

var a = [0];
var index = 0
Array(a[index], index, a);   // create array with three elements

Larik yang dikembalikan Array()saat itu menjadi elemen pertama dari larik yang dibuat .map(), oleh karena itu merupakan tingkat tambahan bersarang dalam [[0, 0, [0]]]hasil Anda .

EDIT tentang pengeditan Anda: ketika Anda mengatakan [0].map(String);bahwa hasil String()dipanggil dengan tiga argumen yang sama seperti String(a[index], index, a), tetapi String()fungsi mengabaikan semua kecuali argumen pertama, sedangkan Array()menggunakan semua argumen yang disediakan.

nnnnnn
sumber
39

Pertama , Arraybisa digunakan sebagai fungsi untuk membuat array:

var arr = Array(1, 2, "Hello");

console.log(arr); // [1, 2, "Hello"]

Kedua , mapmeneruskan tiga parameter ke callback-nya: elemen, indeksnya dari larik dan larik itu sendiri.

Jadi , karena array Anda berisi satu elemen, baris:

[0].map(Array);

setara dengan:

[Array(0, 0, [0])];     // the element 0 in the original array will be mapped into Array(0, 0, [0])
ibrahim mahrir
sumber
6

Setelah Anda memperbarui pertanyaan. Jawaban lain memberi Anda info tentang peta

Untuk menjawab mengapa array dan string berbeda, lihat konstruktor

Konstruktor string menerima 1 parameter String (benda) sedangkan array baru Array (element0, element1 [, ... [, elementN]])

Volodymyr Bilyachat
sumber
2
Itu alasan yang sama mengapa .map(Number)mengubah setiap item menjadi angka daripada mengembalikan sesuatu seperti [3, 2, [4, 1, 3]]untuk setiap item.
pengguna4642212
@Xufox ya jawabannya ada di konstruktor :)
Volodymyr Bilyachat
4

Panggilan ini

[0].map(Array);

memberi Anda hasil yang sama seperti jika Anda menulis sesuatu seperti ini:

[0].map(function (value, index, array) {
    return Array(value, index, array);
})

Fungsi peta memanggil fungsi Array dengan tiga parameter: nilai elemen, indeks elemen dan seluruh array. Panggilan ini untuk Arraymengembalikan Anda array dengan 3 elemen: nilai (angka 0), indeks (angka 0), seluruh array ( [0]).

Dan array baru ini dibungkus dalam Array asli, karena Anda memetakan elemen asli (angka 0) ke elemen baru (array 3 elemen)

Catatan: Anda mungkin terbiasa menggunakan hanya parameter pertama seperti di

array.map(function (a) { return a * a; });

atau menggunakan hanya dua untuk mendapatkan indeks juga

array.map(function (item, index) { return "index=" + index + ", value=" + item; });

Namun perlu Anda ingat bahwa mapmasih menyediakan 3 parameter yang Anda abaikan saja di fungsi callback Anda. Itu juga alasan mengapa kode seperti:

[0].map(String);

kembali

["0"]

Itu karena fungsi String hanya peduli tentang parameter pertama dan mengabaikan parameter lain yang diteruskan. Jika Anda menelepon

String(11, "Some", "other", "ignored", "parameters")

kamu masih akan mendapatkan

"11"
Mariusz Pawelski
sumber