Différence entre Array (n) et Array (n) .fill?

J'ai remarqué que si je fais:

Array(n).map(() => console.log('test'))

Cependant, si je le fais:

 Array(n).fill().map(() => console.log('test'))

Je reçois un test imprimé n fois.

pourquoi est-ce le cas? Si je fais Array(n).length je reviens n .

Je remarque dans le REPL que Array(5) retourne:

[ , , , , ]

Alors que Array(5).fill() retourne:

[ undefined, undefined, undefined, undefined, undefined ]

Dans les deux cas, typeof n'importe quel élément dans le tableau === undefined .

Alors que se passe-t-il?

map ne fonctionne que sur des propriétés entières définies d'un tableau. Array(n) ne définit pas les propriétés entières, alors que Array(n).fill() fait. Il existe une différence entre une propriété qui n'existe pas et une propriété existante dont la valeur est undefined .

Array(n) définit la propriété length du tableau, mais il ne définit aucune propriété. L'objet array n'a pas de propriétés entières.

.fill définit toutes les propriétés entières pour un tableau de zéro à un moins de length . Lorsque vous créez Array(n) vous définissez la propriété length de la nouvelle aray, puis .fill() définit et définit chaque propriété entière jusqu'à n-1 . Le tableau créé par Array(n).fill() possède des propriétés définies jusqu'à la length - 1 . (Les propriétés sont définies comme undefined , car vous n'avez pas passé un argument à fill , mais ils existent.)

En termes pratiques, vous pouvez voir la différence si vous faites Object.keys(Array(4)) (tableau vide) par rapport à Object.keys(Array(4).fill()) (une liste de chaînes "0" à "3" ). Dans le premier cas, les propriétés n'existent pas; Dans le second cas, ils le font.

Array(n) crée un nouveau tableau de taille n, le contenu n'a pas été défini.

Array(n).fill() crée un tableau de taille n où chaque élément est défini sur tout ce que vous avez passé dans fill ou undefined dans votre cas, car vous n'avez passé rien.

Array(n).fill('test') crée un tableau de taille n rempli de 'test'.