Comment initialiser la longueur d'un tableau en JavaScript ?

Question

La plupart des tutoriels que j'ai lus sur les tableaux en JavaScript (notamment w3schools et devguru ) suggèrent que vous pouvez initialiser un tableau avec une certaine longueur en passant un entier au constructeur Array en utilisant l'attribut var test = new Array(4); la syntaxe.

Après avoir utilisé cette syntaxe à profusion dans mes fichiers js, j'ai fait passer l'un des fichiers par jsLint et il a flippé :

Erreur : Problème à la ligne 1, caractère 22 : on attendait ')' et on a vu '4' à la place.
var test = new Array(4) ;
Problème à la ligne 1, caractère 23 : on attendait ';' et on a vu ')'.
var test = new Array(4) ;
Problème à la ligne 1, caractère 23 : on attendait un identifiant et on a vu ')' à la place.

Après avoir lu L'explication de jsLint sur son comportement il semble que jsLint n'aime pas vraiment l'élément new Array() et préfère la syntaxe [] lors de la déclaration des tableaux.

J'ai donc quelques questions :

Tout d'abord, pourquoi ? Est-ce que je cours un risque en utilisant le new Array() Existe-t-il des incompatibilités de navigateur dont je dois être conscient ?

Deuxièmement, si je passe à la syntaxe des crochets, y a-t-il un moyen de déclarer un tableau et de définir sa longueur sur une seule ligne, ou dois-je faire quelque chose comme ceci ?

var test = [];
test.length = 4;

Answer 1

1. Pourquoi voulez-vous initialiser la longueur ? Théoriquement, il n'y a pas besoin de le faire. Cela peut même donner lieu à un comportement confus, car tous les tests qui utilisent l'élément length pour savoir si un tableau est vide ou non rapportera que le tableau n'est pas vide.
   Quelques tests montrent que fixer la longueur initiale des grands tableaux peut est plus efficace si le tableau est rempli après coup, mais le gain de performance (s'il y en a un) semble varier d'un navigateur à l'autre.

2. jsLint n'aime pas new Array() parce que le constructeur est ambigu.

   new Array(4);

   crée un tableau vide de longueur 4. Mais

   new Array('4');

   crée un tableau contenant la valeur '4' .

En ce qui concerne votre commentaire : En JS, vous n'avez pas besoin d'initialiser la longueur du tableau. Elle croît dynamiquement. Vous pouvez simplement stocker la longueur dans une variable, par exemple

var data = [];
var length = 5; // user defined length

for(var i = 0; i < length; i++) {
    data.push(createSomeObject());
}

Answer 2

Ceci initialisera la propriété de la longueur à 4 :

var x = [,,,,];

Answer 3

Je suis surpris qu'une solution fonctionnelle n'ait pas été proposée, permettant de définir la longueur en une seule ligne. Ce qui suit est basé sur UnderscoreJS :

var test = _.map(_.range(4), function () { return undefined; });
console.log(test.length);

Pour les raisons mentionnées ci-dessus, j'éviterais de faire cela à moins de vouloir initialiser le tableau à une valeur spécifique. Il est intéressant de noter qu'il existe d'autres bibliothèques qui implémentent l'intervalle, notamment Lo-dash et Lazy, qui peuvent avoir des caractéristiques de performance différentes.

Answer 4

(c'était probablement mieux comme commentaire, mais c'est devenu trop long)

Après avoir lu cet article, je me suis demandé si la pré-affectation était réellement plus rapide, car en théorie, elle devrait l'être. Cependant, ce blog donne quelques conseils à ce sujet. http://www.html5rocks.com/en/tutorials/speed/v8/ .

N'étant toujours pas sûr, je l'ai testé. Et il s'avère qu'il semble en fait être plus lent.

var time = Date.now();
var temp = [];
for(var i=0;i<100000;i++){
    temp[i]=i;
}
console.log(Date.now()-time);

var time = Date.now();
var temp2 = new Array(100000);
for(var i=0;i<100000;i++){
    temp2[i] = i;
}
console.log(Date.now()-time); 

Ce code donne les résultats suivants après quelques essais occasionnels :

$ node main.js 
9
16
$ node main.js 
8
14
$ node main.js 
7
20
$ node main.js 
9
14
$ node main.js 
9
19

Answer 5

La raison pour laquelle vous ne devriez pas utiliser new Array est démontré par ce code :

var Array = function () {};

var x = new Array(4);

alert(x.length);  // undefined...

Un autre code pourrait jouer avec la variable Array. Je sais que c'est un peu tiré par les cheveux que quelqu'un écrive un tel code, mais quand même...

De plus, comme l'a dit Felix King, l'interface est un peu incohérente et pourrait conduire à des bugs très difficiles à localiser.

Si vous vouliez un tableau avec longueur = x, rempli d'indéfini (comme new Array(x) ferait), vous pourriez faire ceci :

var x = 4;
var myArray = [];
myArray[x - 1] = undefined;

alert(myArray.length); // 4