Question Quelle est la différence entre "Array ()" et "[]" lors de la déclaration d'un tableau JavaScript?


Quelle est la vraie différence entre déclarer un tableau comme ceci:

var myArray = new Array();

et

var myArray = [];

679
2018-05-31 11:23


origine


Réponses:


Il y a une différence, mais il n'y a pas de différence dans cet exemple.

En utilisant la méthode plus verbeuse: new Array() a une option supplémentaire dans les paramètres: si vous passez un nombre au constructeur, vous obtiendrez un tableau de cette longueur:

x = new Array(5);
alert(x.length); // 5

Pour illustrer les différentes façons de créer un tableau:

var a = [],            // these are the same
    b = new Array(),   // a and b are arrays with length 0

    c = ['foo', 'bar'],           // these are the same
    d = new Array('foo', 'bar'),  // c and d are arrays with 2 strings

    // these are different:
    e = [3]             // e.length == 1, e[0] == 3
    f = new Array(3),   // f.length == 3, f[0] == undefined

;

782
2018-05-31 11:25



La différence entre la création d'un tableau avec le tableau implicite et le constructeur du tableau est subtile mais importante.

Lorsque vous créez un tableau en utilisant

var a = [];

Vous demandez à l'interpréteur de créer un nouveau tableau d'exécution. Aucun traitement supplémentaire nécessaire du tout. Terminé.

Si tu utilises:

var a = new Array();

Vous dites à l'interprète, je veux appeler le constructeur "Array"et générer un objet.Il regarde ensuite à travers votre contexte d'exécution pour trouver le constructeur à appeler, et l'appelle, la création de votre tableau.

Vous pouvez penser "Eh bien, cela n'a pas d'importance du tout, ils sont pareils!". Malheureusement, vous ne pouvez pas le garantir.

Prenons l'exemple suivant:

function Array() {
    this.is = 'SPARTA';
}

var a = new Array();
var b = [];

alert(a.is);  // => 'SPARTA'
alert(b.is);  // => undefined
a.push('Woa'); // => TypeError: a.push is not a function
b.push('Woa'); // => 1 (OK)

Dans l'exemple ci-dessus, le premier appel alertera «SPARTA» comme prévu. La seconde ne le sera pas. Vous finirez par voir indéfini. Vous remarquerez également que b contient toutes les fonctions de l'objet Array natif telles que push, où l'autre ne le fait pas.

Alors que vous pouvez vous attendre à ce que cela se produise, cela illustre juste le fait que [] n'est pas la même chose que new Array().

Il est probablement préférable de simplement utiliser [] si vous savez que vous voulez juste un tableau. Je ne suggère pas non plus de contourner et redéfinir Array ...


706
2017-08-13 19:00



Assez curieusement, new Array(size) est presque 2x plus rapide que [] dans Chrome, et à peu près la même chose dans FF et IE (mesurée en créant et en remplissant un tableau). Cela n'a d'importance que si vous connaissez la taille approximative du tableau. Si vous ajoutez plus d'éléments que la longueur que vous avez donnée, l'amélioration des performances est perdue.


40
2018-06-28 12:35



Pour plus d'informations, la page suivante décrit pourquoi vous n'avez jamais besoin d'utiliser new Array()

Vous n'avez jamais besoin d'utiliser new Object() dans   JavaScript. Utilisez l'objet littéral {}   au lieu. De même, n'utilisez pas new Array(),   utiliser le tableau littéral []   au lieu. Tableaux dans le travail JavaScript   rien de tel que les tableaux de Java, et   l'utilisation de la syntaxe Java-like   vous confondre.

Ne pas utiliser new Number, new String, ou    new Boolean. Ces formes produisent   wrappers d'objet inutiles. Juste utiliser   à la place, des littéraux simples.

Consultez également les commentaires - le new Array(length) Le formulaire ne sert à rien (au moins dans les implémentations actuelles de JavaScript).


33
2018-05-31 16:29



Il y a une énorme différence que personne n'a mentionnée.

Vous pourriez penser que le new Array(2) est équivalent à [undefined, undefined] avant parce que nous avons

new Array(2).length           // 2
new Array(2)[0] === undefined // true
new Array(2)[1] === undefined // true

MAIS CE N'EST PAS!

Essayons map():

[undefined, undefined].map(e => 1)  // [1, 1]
new Array(2).map(e => 1)            // "(2) [undefined × 2]" in Chrome

Voir? C'est différent! Mais pourquoi est-ce?

Selon ES6 Spec 22.1.1.2, Array(len) crée uniquement un nouveau tableau avec length mis à lenEt rien de plus. Il n'y a donc pas d'élément réel à l'intérieur du nouveau tableau.

Alors que la fonction map(), selon la spécification 22.1.3.15 vérifierait d'abord HasProperty puis appelez le rappel, mais il s'avère que:

new Array(2).hasOwnProperty(0) // false
[undefined, undefined].hasOwnProperty(0) // true

C'est pourquoi vous ne pouvez pas vous attendre à ce que les fonctions d'itération fonctionnent comme d'habitude dans un tableau créé à partir de new Array(len).

BTW, Safari et Firefox ont une bien meilleure expression:

// Safari
new Array(2)             // [](2)
new Array(2).map(e => 1) // [](2) 
[undefined, undefined]   // [undefined, undefined] (2) 

// Firefox
new Array(2)             // Array [ <2 empty slots> ]
new Array(2).map(e => 1) // Array [ <2 empty slots> ]
[undefined, undefined]   // Array [ undefined, undefined ]

J'ai déjà soumis un problème à Google Chrome pour leur demander de corriger ce journal déroutant: https://bugs.chromium.org/p/chromium/issues/detail?id=732021

MISE À JOUR: C'est déjà réparé. Chrome se connecte maintenant sous

new Array(2)             // (2) [empty × 2]

28
2018-06-10 09:26



Afin de mieux comprendre [] et new Array():

> []
  []
> new Array()
  []
> [] == []
  false
> [] === []
  false
> new Array() == new Array()
  false
> new Array() === new Array()
  false
> typeof ([])
  "object"
> typeof (new Array())
  "object"
> [] === new Array()
  false
> [] == new Array()
  false

Le résultat ci-dessus provient de la console Google Chrome sur Windows 7.


8
2017-07-27 22:56



Le premier est l'appel par défaut du constructeur d'objet. Vous pouvez utiliser ses paramètres si vous le souhaitez.

var array = new Array(5); //initialize with default length 5

Le second vous donne la possibilité de créer un tableau non vide:

var array = [1, 2, 3]; // this array will contain numbers 1, 2, 3.

7
2018-05-31 11:53



Je peux expliquer de façon plus spécifique en commençant par cet exemple basé sur celui de Fredrik.

var test1 = [];
test1.push("value");
test1.push("value2");

var test2 = new Array();
test2.push("value");
test2.push("value2");

alert(test1);
alert(test2);
alert(test1 == test2);
alert(test1.value == test2.value);

J'ai juste ajouté une autre valeur aux tableaux, et fait quatre alertes: Le premier et le second sont de nous donner la valeur stockée dans chaque tableau, pour être sûr des valeurs. Ils reviendront pareil! Maintenant, essayez le troisième, il renvoie faux, c'est parce que

JS traite test1 comme un VARIABLE avec un type de tableauet ça traite test2 en tant que OBJET avec la fonctionnalité d'un tableau, et   il y a quelques légères différences ici.

La première différence est que lorsque nous appelons test1, il appelle une variable sans réfléchir, il renvoie simplement les valeurs qui sont stockées dans cette variable sans tenir compte de son type de données! Mais, quand nous appelons test2, il appelle le Array () fonction, puis il stocke notre "Poussé" valeurs dans son "Valeur" propriété, et la même chose se produit lorsque nous alertons test2, il renvoie la "Valeur" propriété de l'objet tableau.

Donc, quand nous vérifions si test1 est égal à test2, bien sûr, ils ne retourneront jamais vrai, l'un est une fonction et l'autre est une variable (avec un type de tableau), même s'ils ont la même valeur!

Pour être sûr de cela, essayez la 4ème alerte, avec la valeur ajoutée; ça reviendra vrai. Dans ce cas, nous disons à JS "En ne tenant pas compte du type de conteneur, qu'il s'agisse d'une fonction ou d'une variable, comparez les valeurs stockées dans chaque conteneur et dites-nous ce que vous avez vu!" c'est exactement ce qui arrive.

J'espère avoir dit l'idée derrière cela clairement, et désolé pour mon mauvais anglais.


4
2018-05-06 16:52



Le premier est le constructeur d'objet par défaut call.mostly utilisé pour les valeurs dynamiques.

var array = new Array(length); //initialize with default length

le second tableau est utilisé lors de la création de valeurs statiques

var array = [red, green, blue, yellow, white]; // this array will contain values.

2
2017-08-31 17:06