Quelle est la façon la plus efficace de créer un tableau rempli de longueur arbitraire en JavaScript?

ES6 présente Array.prototype.fill. Il peut être utilisé comme ceci:

new Array(len).fill(0);

Je ne sais pas si c'est rapide, mais je l'aime parce qu'il est court et auto-descriptif.

Ce n'est toujours pas dans IE ( vérifiez la compatibilité ), mais il existe un polyfill disponible .

Bien que ce soit un vieux fil, je voulais y ajouter mes 2 cents. Je ne sais pas à quel point c'est lent / rapide, mais c'est une doublure rapide. Voici ce que je fais:

Si je veux pré-remplir un numéro:

Array.apply(null, Array(5)).map(Number.prototype.valueOf,0);
// [0, 0, 0, 0, 0]

Si je veux pré-remplir avec une chaîne:

Array.apply(null, Array(3)).map(String.prototype.valueOf,"hi")
// ["hi", "hi", "hi"]

D'autres réponses ont suggéré:

new Array(5+1).join('0').split('')
// ["0", "0", "0", "0", "0"]

mais si vous voulez 0 (le nombre) et non "0" (zéro dans une chaîne), vous pouvez faire:

new Array(5+1).join('0').split('').map(parseFloat)
// [0, 0, 0, 0, 0]

Manière élégante de remplir un tableau avec des valeurs précalculées

Voici une autre façon de le faire en utilisant ES6 que personne n'a mentionné jusqu'à présent:

> Array.from(Array(3), () => 0)
< [0, 0, 0]

Il fonctionne en passant une fonction de carte comme deuxième paramètre de Array.from.

Dans l'exemple ci-dessus, le premier paramètre alloue un tableau de 3 positions remplies avec la valeur undefined, puis la fonction lambda mappe chacun d'eux à la valeur 0.

Bien que ce Array(len).fill(0)soit plus court, cela ne fonctionne pas si vous devez remplir le tableau en faisant d'abord du calcul (je sais que la question ne l'a pas demandé, mais beaucoup de gens se retrouvent ici à le chercher) .

Par exemple, si vous avez besoin d'un tableau avec 10 nombres aléatoires:

> Array.from(Array(10), () => Math.floor(10 * Math.random()))
< [3, 6, 8, 1, 9, 3, 0, 6, 7, 1]

C'est plus concis (et élégant) que l'équivalent:

const numbers = Array(10);
for (let i = 0; i < numbers.length; i++) {
    numbers[i] = Math.round(10 * Math.random());
}

Cette méthode peut également être utilisée pour générer des séquences de nombres en tirant parti du paramètre d'index fourni dans le rappel:

> Array.from(Array(10), (d, i) => i)
< [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Réponse bonus: remplir un tableau à l'aide de String repeat()

Étant donné que cette réponse reçoit beaucoup d'attention, je voulais également montrer ce truc cool. Bien que pas aussi utile que ma réponse principale, présentera la repeat()méthode String encore peu connue, mais très utile . Voici l'astuce:

> "?".repeat(10).split("").map(() => Math.floor(10 * Math.random()))
< [5, 6, 3, 5, 0, 8, 2, 7, 4, 1]

Cool hein? repeat()est une méthode très utile pour créer une chaîne qui est la répétition de la chaîne d'origine un certain nombre de fois. Après cela, split()crée un tableau pour nous, qui est ensuite map()suivi des valeurs que nous voulons. Décomposer en plusieurs étapes:

> "?".repeat(10)
< "??????????"

> "?".repeat(10).split("")
< ["?", "?", "?", "?", "?", "?", "?", "?", "?", "?"]

> "?".repeat(10).split("").map(() => Math.floor(10 * Math.random()))
< [5, 6, 3, 5, 0, 8, 2, 7, 4, 1]

En bref

Solution la plus rapide

let a = new Array(n); for (let i=0; i<n; ++i) a[i] = 0;

Solution la plus courte (pratique) (3 fois plus lente pour les petites baies, légèrement plus lente pour les grandes (la plus lente sur Firefox))

Array(n).fill(0)

Détails

Aujourd'hui 2020.06.09, j'effectue des tests sur macOS High Sierra 10.13.6 sur les navigateurs Chrome 83.0, Firefox 77.0 et Safari 13.1. Je teste les solutions choisies pour deux cas de test

• petit tableau - avec 10 éléments - vous pouvez effectuer le test ICI
• grands tableaux - avec 1M d'éléments - vous pouvez effectuer le test ICI

Conclusions

• La solution basée sur new Array(n)+for(N) est la solution la plus rapide pour les petites baies et les grandes baies (sauf Chrome mais toujours très rapide là-bas) et elle est recommandée comme solution multi-navigateur rapide
• la solution basée sur new Float32Array(n)(I) renvoie un tableau non typique (par exemple, vous ne pouvez pas l'appeler push(..)) donc je ne compare pas ses résultats avec d'autres solutions - cependant cette solution est environ 10-20x plus rapide que les autres solutions pour les grands tableaux sur tous les navigateurs
• les solutions basées sur for(L, M, N, O) sont rapides pour les petits tableaux
• les solutions basées sur fill(B, C) sont rapides sur Chrome et Safari mais étonnamment plus lentes sur Firefox pour les grands tableaux. Ils sont moyennement rapides pour les petits tableaux
• solution basée sur Array.apply(P) génère une erreur pour les grands tableaux

  Afficher l'extrait de code

  function P(n) {
    return Array.apply(null, Array(n)).map(Number.prototype.valueOf,0);
  }
  
  
  try {
    P(1000000);
  } catch(e) { 
    console.error(e.message);
  }

  Exécuter l'extrait de codeMasquer les résultats

  Développer l'extrait

Code et exemple

Le code ci-dessous présente les solutions utilisées dans les mesures

function A(n) {
  return [...new Array(n)].fill(0);
}

function B(n) {
  return new Array(n).fill(0);
}

function C(n) {
  return Array(n).fill(0);
}

function D(n) {
  return Array.from({length: n}, () => 0);
}

function E(n) {
  return [...new Array(n)].map(x => 0);
}

// arrays with type

function F(n) {
  return Array.from(new Int32Array(n));
}

function G(n) {
  return Array.from(new Float32Array(n));
}

function H(n) {
  return Array.from(new Float64Array(n)); // needs 2x more memory than float32
}

function I(n) {
  return new Float32Array(n); // this is not typical array
}

function J(n) {
  return [].slice.apply(new Float32Array(n));
}

// Based on for

function K(n) {
  let a = [];
  a.length = n;
  let i = 0;
  while (i < n) {
    a[i] = 0;
    i++;
  }
  return a;
}

function L(n) {
  let a=[]; for(let i=0; i<n; i++) a[i]=0;
  return a;
}

function M(n) {
  let a=[]; for(let i=0; i<n; i++) a.push(0);
  return a;
}

function N(n) {
  let a = new Array(n); for (let i=0; i<n; ++i) a[i] = 0;
  return a;
}

function O(n) {
  let a = new Array(n); for (let i=n; i--;) a[i] = 0;
  return a;
}

// other

function P(n) {
  return Array.apply(null, Array(n)).map(Number.prototype.valueOf,0);
}

function Q(n) {
  return "0".repeat( n ).split("").map( parseFloat );
}

function R(n) {
  return new Array(n+1).join('0').split('').map(parseFloat)
}


// ---------
// TEST
// ---------

[A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R].forEach(f => {
  let a = f(10); 
  console.log(`${f.name} length=${a.length}, arr[0]=${a[0]}, arr[9]=${a[9]}`)
});

This snippets only present used codes

Exemple de résultats pour Chrome

La méthode de remplissage ES 6 déjà mentionnée s'en occupe bien. La plupart des navigateurs de bureau modernes prennent déjà en charge les méthodes de prototype de baie requises à ce jour (Chromium, FF, Edge et Safari) [ 1 ]. Vous pouvez rechercher des détails sur MDN . Un exemple d'utilisation simple est

a = new Array(10).fill(0);

Compte tenu de la prise en charge actuelle du navigateur, vous devez être prudent si vous n'êtes pas sûr que votre public utilise des navigateurs de bureau modernes.

Note ajoutée août 2013, mise à jour février 2015: La réponse ci-dessous de 2009 concerne le Arraytype générique de JavaScript . Il ne concerne pas les plus récents typés tableaux définis dans ES2015 [et disponible maintenant dans de nombreux navigateurs], comme Int32Arrayet autres. Notez également que ES2015 ajoute une fillméthode aux tableaux et aux tableaux typés , ce qui est probablement le moyen le plus efficace de les remplir ...

En outre, cela peut faire une grande différence pour certaines implémentations dans la façon dont vous créez le tableau. Le moteur V8 de Chrome, en particulier, essaie d'utiliser un tableau de mémoire contiguë très efficace s'il le pense, en ne basculant sur le tableau basé sur les objets que lorsque cela est nécessaire.

Avec la plupart des langues, il s'agirait d'une pré-allocation, puis d'un remplissage nul, comme ceci:

function newFilledArray(len, val) {
    var rv = new Array(len);
    while (--len >= 0) {
        rv[len] = val;
    }
    return rv;
}

Mais , les tableaux JavaScript ne sont pas vraiment des tableaux , ce sont des cartes clé / valeur comme tous les autres objets JavaScript, donc il n'y a pas de "pré-allocation" à faire (la définition de la longueur n'alloue pas autant d'emplacements à remplir), ni y a-t-il une raison de croire que l'avantage du compte à rebours à zéro (qui est juste de rendre la comparaison rapide dans la boucle) n'est pas contrebalancé par l'ajout des clés dans l'ordre inverse alors que la mise en œuvre pourrait bien avoir optimisé leur gestion des clés liés aux tableaux sur la théorie, vous les ferez généralement dans l'ordre.

En fait, Matthew Crumley a souligné que le décompte est nettement plus lent sur Firefox que le décompte, un résultat que je peux confirmer - c'est la partie du tableau (le bouclage jusqu'à zéro est toujours plus rapide que le bouclage jusqu'à une limite dans une var). Apparemment, l'ajout des éléments au tableau dans l'ordre inverse est une opération lente sur Firefox. En fait, les résultats varient beaucoup selon l'implémentation de JavaScript (ce qui n'est pas si surprenant). Voici une page de test rapide et sale (ci-dessous) pour les implémentations de navigateur (très sale, ne cède pas pendant les tests, fournit donc un retour minimal et ne respectera pas les limites de temps du script). Je recommande de rafraîchir entre les tests; FF (au moins) ralentit les tests répétés si vous ne le faites pas.

La version assez compliquée qui utilise Array # concat est plus rapide qu'un init direct sur FF entre 1 000 et 2 000 tableaux d'éléments. Cependant, sur le moteur V8 de Chrome, l'initialisation droite l'emporte à chaque fois ...

Voici la page de test ( copie en direct ):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Zero Init Test Page</title>
<style type='text/css'>
body {
    font-family:    sans-serif;
}
#log p {
    margin:     0;
    padding:    0;
}
.error {
    color:      red;
}
.winner {
    color:      green;
    font-weight:    bold;
}
</style>
<script type='text/javascript' src='prototype-1.6.0.3.js'></script>
<script type='text/javascript'>
var testdefs = {
    'downpre':  {
        total:  0,
        desc:   "Count down, pre-decrement",
        func:   makeWithCountDownPre
    },
    'downpost': {
        total:  0,
        desc:   "Count down, post-decrement",
        func:   makeWithCountDownPost
    },
    'up':       {
        total:  0,
        desc:   "Count up (normal)",
        func:   makeWithCountUp
    },
    'downandup':  {
        total:  0,
        desc:   "Count down (for loop) and up (for filling)",
        func:   makeWithCountDownArrayUp
    },
    'concat':   {
        total:  0,
        desc:   "Concat",
        func:   makeWithConcat
    }
};

document.observe('dom:loaded', function() {
    var markup, defname;

    markup = "";
    for (defname in testdefs) {
        markup +=
            "<div><input type='checkbox' id='chk_" + defname + "' checked>" +
            "<label for='chk_" + defname + "'>" + testdefs[defname].desc + "</label></div>";
    }
    $('checkboxes').update(markup);
    $('btnTest').observe('click', btnTestClick);
});

function epoch() {
    return (new Date()).getTime();
}

function btnTestClick() {

    // Clear log
    $('log').update('Testing...');

    // Show running
    $('btnTest').disabled = true;

    // Run after a pause while the browser updates display
    btnTestClickPart2.defer();
}
function btnTestClickPart2() {

    try {
        runTests();
    }
    catch (e) {
        log("Exception: " + e);
    }

    // Re-enable the button; we don't yheidl
    $('btnTest').disabled = false;
}

function runTests() {
    var start, time, counter, length, defname, def, results, a, invalid, lowest, s;

    // Get loops and length
    s = $F('txtLoops');
    runcount = parseInt(s);
    if (isNaN(runcount) || runcount <= 0) {
        log("Invalid loops value '" + s + "'");
        return;
    }
    s = $F('txtLength');
    length = parseInt(s);
    if (isNaN(length) || length <= 0) {
        log("Invalid length value '" + s + "'");
        return;
    }

    // Clear log
    $('log').update('');

    // Do it
    for (counter = 0; counter <= runcount; ++counter) {

        for (defname in testdefs) {
            def = testdefs[defname];
            if ($('chk_' + defname).checked) {
                start = epoch();
                a = def.func(length);
                time = epoch() - start;
                if (counter == 0) {
                    // Don't count (warm up), but do check the algorithm works
                    invalid = validateResult(a, length);
                    if (invalid) {
                        log("<span class='error'>FAILURE</span> with def " + defname + ": " + invalid);
                        return;
                    }
                }
                else {
                    // Count this one
                    log("#" + counter + ": " + def.desc + ": " + time + "ms");
                    def.total += time;
                }
            }
        }
    }

    for (defname in testdefs) {
        def = testdefs[defname];
        if ($('chk_' + defname).checked) {
            def.avg = def.total / runcount;
            if (typeof lowest != 'number' || lowest > def.avg) {
                lowest = def.avg;
            }
        }
    }

    results =
        "<p>Results:" +
        "<br>Length: " + length +
        "<br>Loops: " + runcount +
        "</p>";
    for (defname in testdefs) {
        def = testdefs[defname];
        if ($('chk_' + defname).checked) {
            results += "<p" + (lowest == def.avg ? " class='winner'" : "") + ">" + def.desc + ", average time: " + def.avg + "ms</p>";
        }
    }
    results += "<hr>";
    $('log').insert({top: results});
}

function validateResult(a, length) {
    var n;

    if (a.length != length) {
        return "Length is wrong";
    }
    for (n = length - 1; n >= 0; --n) {
        if (a[n] != 0) {
            return "Index " + n + " is not zero";
        }
    }
    return undefined;
}

function makeWithCountDownPre(len) {
    var a;

    a = new Array(len);
    while (--len >= 0) {
        a[len] = 0;
    }
    return a;
}

function makeWithCountDownPost(len) {
    var a;

    a = new Array(len);
    while (len-- > 0) {
        a[len] = 0;
    }
    return a;
}

function makeWithCountUp(len) {
    var a, i;

    a = new Array(len);
    for (i = 0; i < len; ++i) {
        a[i] = 0;
    }
    return a;
}

function makeWithCountDownArrayUp(len) {
    var a, i;

    a = new Array(len);
    i = 0;
    while (--len >= 0) {
        a[i++] = 0;
    }
    return a;
}

function makeWithConcat(len) {
    var a, rem, currlen;

    if (len == 0) {
        return [];
    }
    a = [0];
    currlen = 1;
    while (currlen < len) {
        rem = len - currlen;
        if (rem < currlen) {
            a = a.concat(a.slice(0, rem));
        }
        else {
            a = a.concat(a);
        }
        currlen = a.length;
    }
    return a;
}

function log(msg) {
    $('log').appendChild(new Element('p').update(msg));
}
</script>
</head>
<body><div>
<label for='txtLength'>Length:</label><input type='text' id='txtLength' value='10000'>
<br><label for='txtLoops'>Loops:</label><input type='text' id='txtLoops' value='10'>
<div id='checkboxes'></div>
<br><input type='button' id='btnTest' value='Test'>
<hr>
<div id='log'></div>
</div></body>
</html>

Par défaut Uint8Array, Uint16Arrayet les Uint32Arrayclasses conservent les zéros comme valeurs, vous n'avez donc pas besoin de techniques de remplissage complexes, faites simplement:

var ary = new Uint8Array(10);

tous les éléments du tableau aryseront des zéros par défaut.

Si vous utilisez ES6, vous pouvez utiliser Array.from () comme ceci:

Array.from({ length: 3 }, () => 0);
//[0, 0, 0]

A le même résultat que

Array.from({ length: 3 }).map(() => 0)
//[0, 0, 0]

Parce que

Array.from({ length: 3 })
//[undefined, undefined, undefined]

function makeArrayOf(value, length) {
  var arr = [], i = length;
  while (i--) {
    arr[i] = value;
  }
  return arr;
}

makeArrayOf(0, 5); // [0, 0, 0, 0, 0]

makeArrayOf('x', 3); // ['x', 'x', 'x']

Notez que whileest généralement plus efficace que for-in, forEachetc.

en utilisant la notation d'objet

var x = [];

zéro rempli? comme...

var x = [0,0,0,0,0,0];

rempli de 'indéfini' ...

var x = new Array(7);

notation obj avec des zéros

var x = [];
for (var i = 0; i < 10; i++) x[i] = 0;

En remarque, si vous modifiez le prototype d'Array, les deux

var x = new Array();

et

var y = [];

aura ces modifications de prototype

En tout cas, je ne serais pas trop préoccupé par l'efficacité ou la vitesse de cette opération, il y a beaucoup d'autres choses que vous ferez probablement qui sont beaucoup plus inutiles et coûteuses que l'instanciation d'un tableau de longueur arbitraire contenant des zéros.

J'ai testé toutes les combinaisons de boucles de pré-allocation / non pré-allocation, de comptage / décroissement et pour / pendant dans IE 6/7/8, Firefox 3.5, Chrome et Opera.

Les fonctions ci-dessous étaient systématiquement les plus rapides ou extrêmement proches dans Firefox, Chrome et IE8, et pas beaucoup plus lentes que les plus rapides dans Opera et IE 6. C'est aussi la plus simple et la plus claire à mon avis. J'ai trouvé plusieurs navigateurs où la version de la boucle while est légèrement plus rapide, donc je l'inclus aussi pour référence.

function newFilledArray(length, val) {
    var array = [];
    for (var i = 0; i < length; i++) {
        array[i] = val;
    }
    return array;
}

ou

function newFilledArray(length, val) {
    var array = [];
    var i = 0;
    while (i < length) {
        array[i++] = val;
    }
    return array;
}

Si vous devez créer de nombreux tableaux remplis de zéro de longueurs différentes pendant l'exécution de votre code, le moyen le plus rapide que j'ai trouvé pour y parvenir est de créer une fois un tableau zéro , en utilisant l'une des méthodes mentionnées sur ce sujet, d'une longueur que vous savez ne sera jamais dépassé, puis découpez ce tableau si nécessaire.

Par exemple (en utilisant la fonction de la réponse choisie ci-dessus pour initialiser le tableau), créez un tableau rempli de zéro de longueur maxLength , comme une variable visible par le code qui a besoin de zéro tableaux:

var zero = newFilledArray(maxLength, 0);

Tranchez maintenant ce tableau à chaque fois que vous avez besoin d'un tableau rempli de zéro de longueur requiredLength < maxLength :

zero.slice(0, requiredLength);

Je créais des tableaux remplis de zéro des milliers de fois pendant l'exécution de mon code, ce qui a considérablement accéléré le processus.

function zeroFilledArray(size) {
    return new Array(size + 1).join('0').split('');
}

Je n'ai rien contre:

Array.apply(null, Array(5)).map(Number.prototype.valueOf,0);
new Array(5+1).join('0').split('').map(parseFloat);

suggéré par Zertosh, mais dans un nouveau tableau ES6 , les extensions vous permettent de le faire en natif avec la fillméthode. Maintenant, IE edge, Chrome et FF le prennent en charge, mais vérifiez le tableau de compatibilité

new Array(3).fill(0)vous donnera [0, 0, 0]. Vous pouvez remplir le tableau avec n'importe quelle valeur comme new Array(5).fill('abc')(même des objets et d'autres tableaux).

En plus de cela, vous pouvez modifier les tableaux précédents avec fill:

arr = [1, 2, 3, 4, 5, 6]
arr.fill(9, 3, 5)  # what to fill, start, end

ce qui vous donne: [1, 2, 3, 9, 9, 6]

La façon dont je le fais habituellement (et c'est incroyablement rapide) utilise Uint8Array. Par exemple, créer un vecteur rempli de zéro d'éléments 1M:

  var zeroFilled = [].slice.apply(new Uint8Array(1000000))

Je suis un utilisateur Linux et j'ai toujours travaillé pour moi, mais une fois qu'un ami utilisant un Mac avait des éléments différents de zéro. Je pensais que sa machine fonctionnait mal, mais voici toujours le moyen le plus sûr que nous avons trouvé pour le réparer:

  var zeroFilled = [].slice.apply(new Uint8Array(new Array(1000000)) 

Édité

Chrome 25.0.1364.160

1. Frederik Gottlieb - 6,43
2. Sam Barnum - 4,83
3. Eli - 3,68
4. Joshua 2.91
5. Mathew Crumley - 2,67
6. bduran - 2,55
7. Allen Rice - 2.11
8. kangax - 0,68
9. Tj. Crowder - 0,67
10. zertosh - ERREUR

Firefox 20.0

1. Allen Rice - 1,85
2. Josué - 1,82
3. Mathew Crumley - 1,79
4. bduran - 1,37
5. Frederik Gottlieb - 0,67
6. Sam Barnum - 0,63
7. Eli - 0,59
8. kagax - 0,13
9. Tj. Crowder - 0,13
10. zertosh - ERREUR

Il manque le test le plus important (du moins pour moi): celui de Node.js. Je le soupçonne proche du benchmark Chrome.

Utiliser lodash ou underscore

_.range(0, length - 1, 0);

Ou si vous avez un tableau existant et que vous voulez un tableau de la même longueur

array.map(_.constant(0));

Solution ES6:

[...new Array(5)].map(x => 0); // [0, 0, 0, 0, 0]

Depuis ECMAScript2016 , il y a un choix clair pour les grands tableaux.

Étant donné que cette réponse apparaît toujours en haut sur les recherches Google, voici une réponse pour 2017.

Voici un jsbench actuel avec quelques dizaines de méthodes populaires, dont beaucoup ont été proposées jusqu'à présent sur cette question. Si vous trouvez une meilleure méthode, veuillez ajouter, bifurquer et partager.

Je veux noter qu'il n'y a pas de véritable moyen le plus efficace de créer un tableau rempli de longueur arbitraire. Vous pouvez optimiser la vitesse ou la clarté et la maintenabilité - l'un ou l'autre peut être considéré comme le choix le plus efficace en fonction des besoins du projet.

Lors de l'optimisation de la vitesse, vous souhaitez: créer le tableau à l'aide de la syntaxe littérale; définissez la longueur, initialisez la variable d'itération et parcourez le tableau à l'aide d'une boucle while. Voici un exemple.

const arr = [];
arr.length = 120000;
let i = 0;
while (i < 120000) {
  arr[i] = 0;
  i++;
}

Une autre mise en œuvre possible serait:

(arr = []).length = n;
let i = 0;
while (i < n) {
    arr[i] = 0;
    i++;
}

Mais je déconseille fortement d'utiliser cette deuxième implantation dans la pratique car elle est moins claire et ne vous permet pas de maintenir la portée du bloc sur votre variable de tableau.

Celles-ci sont nettement plus rapides que le remplissage avec une boucle for, et environ 90% plus rapides que la méthode standard de

const arr = Array(n).fill(0);

Mais cette méthode de remplissage reste le choix le plus efficace pour les petits tableaux en raison de sa clarté, de sa concision et de sa maintenabilité. La différence de performances ne vous tuera probablement pas à moins que vous ne fabriquiez beaucoup de tableaux avec des longueurs de l'ordre de milliers ou plus.

Quelques autres notes importantes. La plupart des guides de style vous recommandent de ne plus utiliser varsans raison très spéciale lors de l'utilisation d'ES6 ou d'une version ultérieure. À utiliser constpour les variables qui ne seront pas redéfinies et letpour les variables qui le seront. Le MDN et le Airbnb's Style Guide sont d'excellents endroits où aller pour plus d'informations sur les meilleures pratiques. Les questions ne portaient pas sur la syntaxe, mais il est important que les nouveaux utilisateurs de JS connaissent ces nouvelles normes lorsqu'ils recherchent parmi ces rames d'anciennes et de nouvelles réponses.

Pour créer un tout nouveau tableau

new Array(arrayLength).fill(0);

Pour ajouter des valeurs à la fin d'un tableau existant

[...existingArray, ...new Array(numberOfElementsToAdd).fill(0)]

Exemple

//**To create an all new Array**

console.log(new Array(5).fill(0));

//**To add some values at the end of an existing Array**

let existingArray = [1,2,3]

console.log([...existingArray, ...new Array(5).fill(0)]);

Je n'ai pas vu cette méthode dans les réponses, alors voici:

"0".repeat( 200 ).split("").map( parseFloat )

En conséquence, vous obtiendrez un tableau de valeur nulle de longueur 200:

[ 0, 0, 0, 0, ... 0 ]

Je ne suis pas sûr des performances de ce code, mais cela ne devrait pas être un problème si vous l'utilisez pour des tableaux relativement petits.

Cette concatversion est beaucoup plus rapide dans mes tests sur Chrome (2013-03-21). Environ 200 ms pour 10 000 000 d'éléments contre 675 pour une init droite.

function filledArray(len, value) {
    if (len <= 0) return [];
    var result = [value];
    while (result.length < len/2) {
        result = result.concat(result);
    }
    return result.concat(result.slice(0, len-result.length));
}

Bonus: si vous voulez remplir votre tableau avec des chaînes, c'est une façon concise de le faire (pas aussi vite que concatsi):

function filledArrayString(len, value) {
    return new Array(len+1).join(value).split('');
}

Je testais la grande réponse de TJ Crowder, et j'ai proposé une fusion récursive basée sur la solution concat qui surpasse n'importe laquelle dans ses tests dans Chrome (je n'ai pas testé d'autres navigateurs).

function makeRec(len, acc) {
    if (acc == null) acc = [];
    if (len <= 1) return acc;
    var b = makeRec(len >> 1, [0]);
    b = b.concat(b);
    if (len & 1) b = b.concat([0]);
    return b;
},

appelez la méthode avec makeRec(29).

Et alors new Array(51).join('0').split('')?

Il convient peut-être de le signaler, qui Array.prototype.fillavait été ajouté dans le cadre de la proposition ECMAScript 6 (Harmony) . Je préfère aller avec le polyfill écrit ci-dessous, avant d'envisager d'autres options mentionnées sur le fil.

if (!Array.prototype.fill) {
  Array.prototype.fill = function(value) {

    // Steps 1-2.
    if (this == null) {
      throw new TypeError('this is null or not defined');
    }

    var O = Object(this);

    // Steps 3-5.
    var len = O.length >>> 0;

    // Steps 6-7.
    var start = arguments[1];
    var relativeStart = start >> 0;

    // Step 8.
    var k = relativeStart < 0 ?
      Math.max(len + relativeStart, 0) :
      Math.min(relativeStart, len);

    // Steps 9-10.
    var end = arguments[2];
    var relativeEnd = end === undefined ?
      len : end >> 0;

    // Step 11.
    var final = relativeEnd < 0 ?
      Math.max(len + relativeEnd, 0) :
      Math.min(relativeEnd, len);

    // Step 12.
    while (k < final) {
      O[k] = value;
      k++;
    }

    // Step 13.
    return O;
  };
}

Le plus court pour le code de boucle

a=i=[];for(;i<100;)a[i++]=0;

edit:
for(a=i=[];i<100;)a[i++]=0;
or
for(a=[],i=100;i--;)a[i]=0;

Version var sûre

var a=[],i=0;for(;i<100;)a[i++]=0;

edit:
for(var i=100,a=[];i--;)a[i]=0;

Ma fonction la plus rapide serait:

function newFilledArray(len, val) {
    var a = [];
    while(len--){
        a.push(val);
    }
    return a;
}

var st = (new Date()).getTime();
newFilledArray(1000000, 0)
console.log((new Date()).getTime() - st); // returned 63, 65, 62 milliseconds

L'utilisation du push and shift natif pour ajouter des éléments au tableau est beaucoup plus rapide (environ 10 fois) que de déclarer la portée du tableau et de référencer chaque élément pour définir sa valeur.

fyi: J'obtiens constamment des temps plus rapides avec la première boucle, qui compte à rebours, lorsque je l'exécute dans firebug (extension firefox).

var a = [];
var len = 1000000;
var st = (new Date()).getTime();
while(len){
    a.push(0);
    len -= 1;
}
console.log((new Date()).getTime() - st); // returned 863, 894, 875 milliseconds
st = (new Date()).getTime();
len = 1000000;
a = [];
for(var i = 0; i < len; i++){
    a.push(0);
}
console.log((new Date()).getTime() - st); // returned 1155, 1179, 1163 milliseconds

J'aimerais savoir ce que TJ Crowder en fait? :-)

Je savais que j'avais ce proto quelque part :)

Array.prototype.init = function(x,n)
{
    if(typeof(n)=='undefined') { n = this.length; }
    while (n--) { this[n] = x; }
    return this;
}

var a = (new Array(5)).init(0);

var b = [].init(0,4);

Edit: tests

En réponse à Joshua et à d'autres méthodes, j'ai effectué mon propre benchmarking et je vois des résultats complètement différents de ceux rapportés.

Voici ce que j'ai testé:

//my original method
Array.prototype.init = function(x,n)
{
    if(typeof(n)=='undefined') { n = this.length; }
    while (n--) { this[n] = x; }
    return this;
}

//now using push which I had previously thought to be slower than direct assignment
Array.prototype.init2 = function(x,n)
{
    if(typeof(n)=='undefined') { n = this.length; }
    while (n--) { this.push(x); }
    return this;
}

//joshua's method
function newFilledArray(len, val) {
    var a = [];
    while(len--){
        a.push(val);
    }
    return a;
}

//test m1 and m2 with short arrays many times 10K * 10

var a = new Date();
for(var i=0; i<10000; i++)
{
    var t1 = [].init(0,10);
}
var A = new Date();

var b = new Date();
for(var i=0; i<10000; i++)
{
    var t2 = [].init2(0,10);
}
var B = new Date();

//test m1 and m2 with long array created once 100K

var c = new Date();
var t3 = [].init(0,100000);
var C = new Date();

var d = new Date();
var t4 = [].init2(0,100000);
var D = new Date();

//test m3 with short array many times 10K * 10

var e = new Date();
for(var i=0; i<10000; i++)
{
    var t5 = newFilledArray(10,0);
}
var E = new Date();

//test m3 with long array created once 100K

var f = new Date();
var t6 = newFilledArray(100000, 0)
var F = new Date();

Résultats:

IE7 deltas:
dA=156
dB=359
dC=125
dD=375
dE=468
dF=412

FF3.5 deltas:
dA=6
dB=13
dC=63
dD=8
dE=12
dF=8

Donc, à mon avis, la poussée est en effet plus lente en général, mais fonctionne mieux avec des tableaux plus longs dans FF mais pire dans IE, ce qui est nul en général (quelle surprise).

Fonction anonyme:

(function(n) { while(n-- && this.push(0)); return this; }).call([], 5);
// => [0, 0, 0, 0, 0]

Un peu plus court avec for-loop:

(function(n) { for(;n--;this.push(0)); return this; }).call([], 5);
// => [0, 0, 0, 0, 0]

Fonctionne avec tout Object, changez simplement ce qu'il y a à l'intérieurthis.push() .

Vous pouvez même enregistrer la fonction:

function fill(size, content) {
  for(;size--;this.push(content));
  return this;
}

Appelez-le en utilisant:

var helloArray = fill.call([], 5, 'hello');
// => ['hello', 'hello', 'hello', 'hello', 'hello']

Ajout d'éléments à un tableau déjà existant:

var helloWorldArray = fill.call(helloArray, 5, 'world');
// => ['hello', 'hello', 'hello', 'hello', 'hello', 'world', 'world', 'world', 'world', 'world']

Performances: http://jsperf.com/zero-filled-array-creation/25