La vérité sur le « trou » : comprendre les tableaux clairsemés et les comportements inattendus de JavaScript

J'ai récemment perfectionné mes compétences en structures de données et en algorithmes, en particulier les algorithmes de tri ; et je me suis retrouvé dans une situation intéressante.

Comment créer un tableau aléatoire de longueur n de valeurs pour tester mon algorithme de tri ? On pourrait dire que c'est facile, et c'est vraiment le cas. Dans votre tête, vous avez probablement pensé à quelque chose comme ceci :

function randomArray(n) {
    const arrToReturn = [];

    for (let i = 0; i < n; i++) {
        arrToReturn.push(Math.floor(Math.random() * 10));
    }
    return arrToReturn;
}

Cela fonctionne définitivement comme prévu. Mais je cherchais quelque chose de beaucoup plus simple. De préférence un one-liner. Eh bien, la première pensée qui m'est venue à l'esprit a été d'utiliser new Array().

const randomArray = (n) => new Array(n).map(() => Math.floor(Math.random() * 10));

console.log(randomArray(5))

Qu'espérez-vous que cela enregistre ?

Eh bien, je m'attendais à ce que cela enregistre un tableau de 5 valeurs aléatoires. Si ce n’est pas le cas, bravo ! Vous savez de quoi je m'apprête à discuter :)

À ma grande surprise, ce n'est pas le cas. Il enregistre ceci dans le nœud 20 :
[ <5 éléments vides> ]

Hmmm... Déroutant !

Fait intéressant, console.log(randomArray(5).length) enregistre 5.

Alors, pourquoi cela arrive-t-il ? Eh bien, parlons des Sparse Arrays en Javascript !

Tableaux clairsemés

Les tableaux clairsemés sont des tableaux contenant un ou plusieurs emplacements vides. Par exemple :

new Array(2)
// [<2 empty items>]

[1, , , 3]
// [1, <2 empty items>, 3]

Alors, comment ça marche ?

Eh bien, lorsque vous créez un tableau en JS avec new Array(5), cela crée un tableau avec 5 emplacements non initialisés. Cela signifie qu’ils ne contiennent rien ; pas nul, pas indéfini.

D'accord, je comprends ça ! Mais ne pouvez-vous pas appeler .map sur ces "slots" ?

Eh bien, lorsque vous appelez des méthodes itératives telles que forEach, map, réduire et filtrer, etc... sur un tableau clairsemé, ces emplacements vides sont ignorés.

Regardons à nouveau notre fonction randomArray.

const randomArray = (n) => new Array(n).map(() => Math.floor(Math.random() * 10));

Nous créons un tableau de longueur n avec new Array(n) qui renvoie un tableau clairsemé [<5 éléments vides>]. Ensuite, nous appelons map sur ce tableau. Puisque tous les emplacements sont vides, ils ont tous sauté. D'où le résultat que nous avons obtenu !

Pourquoi l'appel de .length sur un tableau clairsemé renvoie-t-il alors une valeur ?

Cela est dû à la manière dont la méthode de tableau .length est implémentée dans JS. Pour obtenir la valeur de longueur, nous prenons l'index le plus grand et ajoutons simplement 1. Et comme les tableaux clairsemés sont indexés, nous obtiendrons la valeur de longueur comme prévu. Vous pouvez en savoir plus ici.

Corrigeons notre fonction buggy randomArray ci-dessus

Étant donné que les tableaux clairsemés contiennent des emplacements vides ou non initialisés, donc non itérables, nous pouvons résoudre ce problème en remplissant ces emplacements avec certaines valeurs. Nous pouvons y parvenir en utilisant la méthode du tableau .fill :

const randomArray = (n) => new Array(n).fill().map(() => Math.floor(Math.random() * 10));

console.log(randomArray(5))

Et maintenant, nous sommes prêts à partir !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!