Comment initialiser rapidement un tableau avec js

balise (séparée par des espaces) : call apply

---

Note version

Lors de l'écriture de code, il est généralement nécessaire d'initialiser rapidement un tableau. Par exemple, nous avons besoin d'un <. similaire celui de matlab>Fonction, si ici nous devons générer un tableau de 0 à 23 pour représenter 24 heures par jour. zerosL'approche la plus basique est la suivante :

function(){
    let hours = [];    
    for(let k = 0; k < 24; k++ )
    hours.push(k);    
    return hours;
}

Réfléchissons à la manière de la mettre en œuvre de manière plus élégante.

Pensez à utiliser la méthode
+ new Array(24) pour y parvenir. mapLe code est le suivant :

Array(24).map((_, h) => h);

Notez que le deuxième paramètre de

ici est l'index, qui est rarement utilisé ici, l'index est utilisé comme valeur numérique. mapLes résultats ne sont pas à la hauteur des attentes, pourquoi ?
Après une brève recherche, j'ai découvert que cela était dû à la logique des tableaux clairsemés en js.
Jetons d'abord un coup d'œil au code suivant :

let a = [];
a[1000] = 2;
console.log(a.length);// 1000a.forEach(x => console.log("hello"));// only one "hello"

La logique de traitement de js consiste à traiter les "postes vacants" pour les postes qui ne sont pas activement attribués à des valeurs pour ces "postes vacants" qui sont inconnus. , l'itérateur ne l'oubliera pas, le but principal de cela est d'éviter les bogues causés par des opérations d'affectation déraisonnables.

Supposons qu'une telle logique n'existe pas et que nous écrivions
, ce qui amènera le système à créer un très grand tableau, mais en réalité ne stockera rien. new Array(Date.now()) Nous pouvons simplement comprendre ce que
fait comme le processus suivant : new Array(len)

function(len){
    let r = [];
    r.length = len;    
    return r;

C'est pourquoi appeler

ou new Array(len) sur map est incompatible avec les attentes. forEachComment résoudre ce problème ? En plus d'utiliser le formulaire de
, nous pouvons également utiliser la méthode d'écriture de new Array(len) pour initialiser le tableau, mais écrire de cette façon n'atteindra pas notre objectif d'écrire le tableau initialisé. . new Array(1,2,3)À ce moment-là, nous avons pensé à
. Le deuxième paramètre de cette fonction se trouve être un tableau, nous avons donc écrit le code suivant. apply

// 借用apply
Array.apply(null, Array(24)).map((_, h) => h);
// [0, 1, ..., 24]

Nous avons obtenu les résultats que nous espérions. Cela signifie que

est traité comme 24 valeurs lorsqu'il est utilisé comme paramètre dans Array(24), car cela garantit que la longueur finale du tableau est de 24. applyDans ce cas, bien sûr, nous pouvons également utiliser la fonction sœur de
apply. call

// 借用call
Array.call(null, ...Array(24)).map((_, h) => h);
// [0, 1... 23]

Cela confirme également une chose,

la déstructuration obtiendra Array(len) paramètres au lieu d'un paramètre. Bien sûr, len doit être utilisé dans un environnement qui prend en charge l'opérateur de déstructuration. call

Après nous être familiarisés avec les principes de

et call, nous pouvons écrire en outre le code suivant : apply

// Array本身
Array(...Array(24)).map((_, h) => h);
// [0, 1, ..., 24]

Cette forme est assez élégante.

De plus, dans
, ES6 fournit une nouvelle méthode Array, qui peut être utilisée pour remplir ces bits « vacants » afin de garantir que les opérations ultérieures puissent se dérouler sans problème. fillLe code spécifique est le suivant :

// 推荐
Array(24).fill(null).map((_, h) => h);

Maintenant, la dernière méthode d'écriture est également recommandée, cette méthode est aussi la plus intuitive.

Cependant, vous devez faire attention à l'utilisation de la méthode
, et vous devriez essayer d'éviter le remplissage aveugle, car cela provoquerait les bugs mentionnés ci-dessus que la logique "vide" de js est conçue pour éviter. fillSi vous êtes intéressé, vous pouvez essayer le code suivant :

// no-fillconsole.time("no-fill");let t = Array(5e7);console.timeEnd("no-fill");// fillconsole.time("fill");let q = Array(5e7).fill(null);console.timeEnd("fill");// => no-fill: 0.240ms// => fill: 3247.921ms

Si vous l'essayez dans le navigateur, le navigateur ne répondra pratiquement pas. Je n'ai pas défini une valeur plus grande pour éviter de recevoir un non. résultats. En supposant qu'un int occupe 4 octets de mémoire, ce remplissage occupera 200 Mo de mémoire et devra être bouclé 50 millions de fois. Cela occupera inévitablement une grande quantité de CPU et de mémoire, ce qui n'est absolument pas autorisé dans les js monothread.

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!