Cosa fa .map () in questa situazione?


95

Utilizzando la console Chrome, questo è il mio input e output:

[0].map(Array);

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

Cosa sta succedendo qui?

MODIFICARE

Il motivo per cui questo mi incuriosisce è perché qualcosa di simile

[0].map(String);

Sarà di ritorno

["0"];

E non

["0", "0", "String"]

34
Presumo perché ha sempre bisogno di alcuni WTF Javascript per sentirsi felice
npst

12
Oh, è solo una variante meno wtf-y di['10', '10', '10'].map(parseInt)
gronostaj

2
Un altro strano .map()comportamento: stackoverflow.com/questions/14528397/… In generale, devi stare attento quando usi .map()funzioni che richiedono più di un argomento.
Barmar

2
Basta fare[0].map(console.log)
Bergi

1
@Jacksonkr: grazie per la risposta. Penso che sia andata così: ho scritto un commento, spiegando che vedere JS WTF mi rende felice di non dover usare spesso la lingua. Qualcuno ha chiesto perché dovrei guardare le domande di JS se non mi piace la lingua. npst ha risposto e i primi due commenti sono stati eliminati. È divertente che il suo commento venga ancora votato, sì.
Eric Duminil

Risposte:


123

La .map()funzione chiama la Array()funzione con tre argomenti, il valore dell'elemento dell'array che è 0, anche l'indice di quell'elemento 0e un riferimento all'intero array.

Quindi è come fare questo:

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

L'array restituito da Array()allora diventa il primo elemento dell'array che .map()crea, da qui il livello extra di nidificazione nel [[0, 0, [0]]]risultato.

EDIT per quanto riguarda la tua modifica: quando dici [0].map(String);che risulta String()essere chiamato con gli stessi tre argomenti come String(a[index], index, a), ma la String()funzione ignora tutti tranne il primo argomento, mentre Array()usa tutti gli argomenti forniti.


39

In primo luogo , Arraypotrebbe essere utilizzato come funzione per creare array:

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

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

In secondo luogo , mappassa tre parametri al suo callback: l'elemento, il suo indice dall'array e l'array stesso.

Quindi , poiché il tuo array contiene un elemento, la riga:

[0].map(Array);

è equivalente a:

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

6

Dopo aver aggiornato la domanda. Altre risposte forniscono informazioni sulla mappa

Per rispondere al motivo per cui array e string differiscono, guarda ai costruttori

Il costruttore di stringhe accetta 1 parametro String (cosa) mentre array new Array (element0, element1 [, ... [, elementN]])


2
È lo stesso motivo per cui .map(Number)converte ogni articolo in un numero invece di restituire qualcosa come [3, 2, [4, 1, 3]]per ogni articolo.
user4642212

@Xufox sì la risposta è nei costruttori :)
Volodymyr Bilyachat

4

Questa chiamata

[0].map(Array);

ti dà lo stesso risultato come se avessi scritto qualcosa del genere:

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

La funzione Map chiama la funzione Array con tre parametri: valore dell'elemento, indice dell'elemento e intero array. Questa chiamata a Arrayrestituisce un array con 3 elementi: valore (numero 0), indice (numero 0), intero array ( [0]).

E questo nuovo array è avvolto nell'array originale, perché hai mappato l'elemento originale (numero 0) al nuovo elemento (array di 3 elementi)

Nota: potresti essere abituato a utilizzare solo il primo parametro come in

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

o usarne solo due per ottenere anche index

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

Ma devi ricordare che mapfornisce ancora 3 parametri che devi semplicemente ignorare nella tua funzione di callback. Questo è anche il motivo per cui il codice come:

[0].map(String);

ritorna

["0"]

È perché la funzione String si interessa solo del primo parametro e ignora gli altri parametri passati. Se chiami

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

otterrai ancora

"11"
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.