Comment initialiser la longueur d'un tableau en JavaScript?

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

Après avoir utilisé cette syntaxe généreusement dans mes fichiers js, j'ai exécuté l'un des fichiers via jsLint , et cela a paniqué:

Erreur: problème à la ligne 1, caractère 22: «)» attendu et à la place «4».
var test = nouveau tableau (4);
Problème à la ligne 1, caractère 23: attendu ";" et a vu à la place ')'.
var test = nouveau tableau (4);
Problème à la ligne 1, caractère 23: attend un identifiant et voit à la place ')'.

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

J'ai donc quelques questions:

D'abord pourquoi? Suis-je en train de courir un risque en utilisant la new Array()syntaxe à la place? Existe-t-il des incompatibilités de navigateur dont je devrais être conscient?

Et deuxièmement, si je passe à la syntaxe entre crochets, existe-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;

1. Pourquoi voulez-vous initialiser la longueur? Théoriquement, cela n'est pas nécessaire. Cela peut même entraîner un comportement déroutant, car tous les tests qui utilisent le lengthpour savoir si un tableau est vide ou non signaleront que le tableau n'est pas vide.
   Certains tests montrent que la définition de la longueur initiale des grands tableaux peut être plus efficace si le tableau est rempli par la suite, mais le gain de performances (le cas échéant) semble différer 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' .

Concernant votre commentaire: Dans JS, vous n'avez pas besoin d'initialiser la longueur du tableau. Il se développe 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());
}

• Array(5) vous donne un tableau de longueur 5 mais sans valeur, vous ne pouvez donc pas le parcourir.

• Array.apply(null, Array(5)).map(function () {}) vous donne un tableau de longueur 5 et non défini comme des valeurs, maintenant il peut être itéré.

• Array.apply(null, Array(5)).map(function (x, i) { return i; }) vous donne un tableau de longueur 5 et de valeurs 0,1,2,3,4.

• Array(5).forEach(alert)ne fait rien, Array.apply(null, Array(5)).forEach(alert)vous donne 5 alertes

• ES6nous donne Array.frommaintenant vous pouvez également utiliserArray.from(Array(5)).forEach(alert)

• Si vous souhaitez initialiser avec une certaine valeur, celles-ci sont bonnes à savoir ...
  Array.from('abcde'), Array.from('x'.repeat(5))
  ouArray.from({length: 5}, (v, i) => i) // gives [0, 1, 2, 3, 4]

Avec ES2015,.fill() vous pouvez maintenant simplement faire:

// `n` is the size you want to initialize your array
// `0` is what the array will be filled with (can be any other value)
Array(n).fill(0)

Ce qui est beaucoup plus concis que Array.apply(0, new Array(n)).map(i => value)

Il est possible de laisser tomber le 0dans .fill()et exécuter sans arguments, qui remplira le tableau avec undefined. ( Cependant, cela échouera dans Typescript )

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

OU

Array(6).fill(0);
// [0, 0, 0, 0, 0, 0]

Remarque: vous ne pouvez pas boucler des emplacements vides, c.-à-d. Array(4).forEach(() => …)

OU

( sûr dactylographié )

Array(6).fill(null).map((_, i) => i);
// [0, 1, 2, 3, 4, 5]

OU

Méthode classique utilisant une fonction (fonctionne dans n'importe quel navigateur)

function NewArray(size) {
    var x = [];
    for (var i = 0; i < size; ++i) {
        x[i] = i;
        return x;
    }
}

var a = NewArray(10);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Création de tableaux imbriqués

Lorsque vous créez un tableau 2D avec fillintuitivement, vous devez créer de nouvelles instances. Mais ce qui va réellement se passer, c'est que le même tableau sera stocké comme référence.

var a = Array(3).fill([6]);
// [  [6], [6], [6]  ]

a[0].push(9);
// [  [6, 9], [6, 9], [6, 9]  ]

Solution

var a = [...Array(3)].map(x => []);

a[0].push(4, 2);
// [  [4, 2], [], []  ]

Un tableau 3x2 ressemblera donc à ceci:

[...Array(3)].map(x => Array(2).fill(0));
// [  [0, 0], [0, 0], [0, 0]  ]

Tableau à N dimensions

function NArray(...dimensions) {
    var index = 0;
    function NArrayRec(dims) {
        var first = dims[0], next = dims.slice().splice(1); 
        if(dims.length > 1) 
            return Array(dims[0]).fill(null).map((x, i) => NArrayRec(next ));
        return Array(dims[0]).fill(null).map((x, i) => (index++));
    }
    return NArrayRec(dimensions);
}

var arr = NArray(3, 2, 4);
// [   [  [ 0,  1,  2,  3 ] , [  4,  5,  6,  7]  ],
//     [  [ 8,  9,  10, 11] , [ 12, 13, 14, 15]  ],
//     [  [ 16, 17, 18, 19] , [ 20, 21, 22, 23]  ]   ]

Initialiser un échiquier

var Chessboard = [...Array(8)].map((x, j) => {
    return Array(8).fill(null).map((y, i) => {
        return `${String.fromCharCode(65 + i)}${8 - j}`;
    });
});

// [ [A8, B8, C8, D8, E8, F8, G8, H8],
//   [A7, B7, C7, D7, E7, F7, G7, H7],
//   [A6, B6, C6, D6, E6, F6, G6, H6],
//   [A5, B5, C5, D5, E5, F5, G5, H5],
//   [A4, B4, C4, D4, E4, F4, G4, H4],
//   [A3, B3, C3, D3, E3, F3, G3, H3],
//   [A2, B2, C2, D2, E2, F2, G2, H2],
//   [A1, B1, C1, D1, E1, F1, G1, H1] ]

Le plus court:

[...Array(1000)]

ES6 présente Array.fromce qui vous permet de créer un à Arraypartir de n'importe quel objet "semblable à un tableau" ou itérable :

Array.from({length: 10}, (x, i) => i);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Dans ce cas, {length: 10}représente la définition minimale d'un objet "de type tableau" : un objet vide avec juste une lengthpropriété définie.

Array.from permet à un deuxième argument de mapper sur le tableau résultant.

Cela initialisera la propriété length à 4:

var x = [,,,,];

Je suis surpris qu'aucune solution fonctionnelle n'ait été suggérée pour vous permettre de définir la longueur sur 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 le faire à moins que je veuille initialiser le tableau à une valeur spécifique. Il est intéressant de noter qu'il existe d'autres bibliothèques qui implémentent la gamme, notamment Lo-dash et Lazy, qui peuvent avoir des caractéristiques de performances différentes.

S'il vous plaît, les gens n'abandonnent pas encore leurs anciennes habitudes. Il y a une grande différence de vitesse entre allouer une fois la mémoire puis travailler avec les entrées de ce tableau (comme dans l'ancien) et l'allouer plusieurs fois au fur et à mesure qu'un tableau grandit (ce qui est inévitablement ce que le système fait sous le capot avec d'autres méthodes suggérées) .

Rien de tout cela n'a d'importance bien sûr, jusqu'à ce que vous vouliez faire quelque chose de cool avec des tableaux plus grands. Ensuite, c'est le cas.

Étant donné qu'il ne semble toujours pas y avoir d'option dans JS pour définir la capacité initiale d'une baie, j'utilise ce qui suit ...

var newArrayWithSize = function(size) {
  this.standard = this.standard||[];
  for (var add = size-this.standard.length; add>0; add--) {
   this.standard.push(undefined);// or whatever
  }
  return this.standard.slice(0,size);
}

Il y a des compromis à faire:

• Cette méthode prend autant de temps que les autres pour le premier appel à la fonction, mais très peu de temps pour les appels ultérieurs (à moins de demander un tableau plus grand).
• La standardbaie réserve en permanence autant d'espace que la plus grande baie que vous ayez demandée.

Mais si cela correspond à ce que vous faites, il peut y avoir un gain. Le timing informel met

for (var n=10000;n>0;n--) {var b = newArrayWithSize(10000);b[0]=0;}

à assez rapide (environ 50 ms pour le 10000 étant donné qu'avec n = 1000000 il a fallu environ 5 secondes), et

for (var n=10000;n>0;n--) {
  var b = [];for (var add=10000;add>0;add--) {
    b.push(undefined);
  }
}

à bien plus d'une minute (environ 90 secondes pour le 10000 sur la même console chromée, soit environ 2000 fois plus lentement). Ce ne sera pas seulement l'allocation, mais aussi les 10000 push, pour la boucle, etc.

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

Donc, après avoir lu ceci, j'étais curieux de savoir si la pré-allocation était en fait plus rapide, car en théorie elle devrait l'être. Cependant, ce blog a donné quelques conseils le déconseillant http://www.html5rocks.com/en/tutorials/speed/v8/ .

Donc, toujours incertain, je l'ai mis à l'épreuve. Et il s'avère que cela semble en fait 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 exécutions occasionnelles:

$ 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

var arr=[];
arr[5]=0;
alert("length="+arr.length); // gives 6

Voici une autre solution

var arr = Array.apply( null, { length: 4 } );
arr;  // [undefined, undefined, undefined, undefined] (in Chrome)
arr.length; // 4

Le premier argument de apply()est une liaison de cet objet, dont nous ne nous soucions pas ici, nous le définissons donc null.

Array.apply(..)appelle la Array(..)fonction et répartit la { length: 3 }valeur de l' objet comme arguments.

Le constructeur du tableau a une syntaxe ambiguë , et JSLint fait juste mal à vos sentiments après tout.

En outre, votre exemple de code est cassé, la deuxième varinstruction soulèvera un SyntaxError. Vous définissez la propriété lengthdu tableau test, il n'y a donc pas besoin d'un autre var.

En ce qui concerne vos options, array.lengthc'est la seule "propre". La question est, pourquoi avez-vous besoin de définir la taille en premier lieu? Essayez de refactoriser votre code pour vous débarrasser de cette dépendance.

En supposant que la longueur du tableau est constante. En Javascript, voici ce que nous faisons:

const intialArray = new Array(specify the value);

Comme expliqué ci-dessus, l'utilisation new Array(size)est quelque peu dangereuse. Au lieu de l'utiliser directement, placez-le dans une "fonction de création de tableau". Vous pouvez facilement vous assurer que cette fonction est exempte de bogues et vous évitez le danger d'appeler new Array(size)directement. Vous pouvez également lui donner une valeur initiale par défaut facultative. Cette createArrayfonction fait exactement cela:

function createArray(size, defaultVal) {
    var arr = new Array(size);
    if (arguments.length == 2) {
        // optional default value
        for (int i = 0; i < size; ++i) {
            arr[i] = defaultVal;
        }
    }
    return arr;
}

Dans la plupart des réponses, il est recommandé au filltableau car sinon "vous ne pouvez pas le parcourir" , mais ce n'est pas vrai. Vous pouvez parcourir un tableau vide, mais pas avec forEach. Les boucles while, for of et i fonctionnent parfaitement.

const count = Array(5);

Ne marche pas.

console.log('---for each loop:---');
count.forEach((empty, index) => {
    console.log(`counting ${index}`);
});

Ces travaux:

console.log('---for of loop:---');
for (let [index, empty] of count.entries()) {
  console.log(`counting for of loop ${index}`);
}

console.log('---for i loop:---');
for (let i = 0, il = count.length; i < il; ++i) {
  console.log(`counting for i loop ${i}`);
}

console.log('---while loop:---');
let index = 0;
while (index < count.length) { 
  console.log(`counting while loop ${index}`); 
  index++; 
}

Vérifiez ce violon avec les exemples ci-dessus.

Les angulaires *ngForfonctionnent également très bien avec un tableau vide:

<li *ngFor="let empty of count; let i = index" [ngClass]="
  <span>Counting with *ngFor {{i}}</span>
</li>

Vous pouvez définir la longueur du tableau à l'aide de array.length = youValue

Ce serait donc

var myArray = [];
myArray.length = yourValue;

La raison pour laquelle vous ne devez pas utiliser new Arrayest illustrée par ce code:

var Array = function () {};

var x = new Array(4);

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

Un autre code pourrait perturber la variable Array. Je sais que c'est un peu tiré par les cheveux que n'importe qui é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 entraîner des bogues très difficiles à localiser.

Si vous vouliez un tableau de longueur = x, rempli d'indéfini (comme le new Array(x)ferait), vous pouvez le faire:

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

alert(myArray.length); // 4