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 = [];
Il y a une différence, mais il n'y a pas de différence dans cet exemple.
En utilisant la méthode la plus détaillée: 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 manières 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
;
La différence entre créer un tableau avec le tableau implicite et le constructeur de tableau est subtile mais importante.
Lorsque vous créez un tableau en utilisant
var a = [];
Vous dites à l'interprète 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 que je veux appeler le constructeur "Array" et générer un objet. Il examine ensuite votre contexte d’exécution pour rechercher le constructeur à appeler et l’appelle en créant votre tableau.
Vous pouvez penser "Eh bien, cela n'a pas d'importance du tout. Ce sont les mêmes!". Malheureusement, vous ne pouvez pas garantir cela.
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 sera pas. Vous finirez par voir indéfini. Vous remarquerez également que b contient toutes les fonctions d’objet Array natives telles que Push, contrairement à l’autre.
Bien que vous puissiez vous attendre à ce que cela se produise, cela illustre simplement le fait que [] n'est pas la même chose que new Array().
Il vaut probablement mieux utiliser [] si vous savez que vous voulez juste un tableau. Je ne suggère pas non plus de circuler et de redéfinir Array.
Il y a une énorme différence que personne n'a mentionnée.
Vous pourriez penser que new Array(2) est équivalent à [undefined, undefined] avant car 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 ça?
Selon la spécification ES6 22.1.1.2, Array(len) crée uniquement un nouveau tableau avec length défini sur len et rien de plus. Ainsi, il n’ya pas d’élément réel dans le nouveau tableau.
Alors que la fonction map(), conformément à la spécification 22.1.3.15, vérifie d’abord HasProperty puis appelle 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 normalement avec un tableau créé à partir de new Array(len).
BTW, Safari et Firefox ont une bien meilleure expression à cela:
// 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 à Chrome pour lui demander de corriger ce journal source de confusion: https://bugs.chromium.org/p/chromium/issues/detail?id=732021
UPDATE: C'est déjà corrigé. Chrome se connecte maintenant en tant que
new Array(2) // (2) [empty × 2]
Curieusement, new Array(size) est presque deux fois plus rapide que [] dans Chrome et à peu près identique en FF et IE (mesuré en créant et en remplissant un tableau). Ce n'est important que si vous connaissez la taille approximative du tableau. Si vous ajoutez plus d'éléments que la longueur que vous avez indiquée, l'amélioration des performances est perdue.
Plus précisément: Array( est une opération rapide dans le temps constant qui n’alloue aucune mémoire, alors que [] est une opération linéaire dans le temps qui définit le type et la valeur.
Pour plus d'informations, la page suivante explique 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 pasnew Array(), utilisez le tableau littéral[]au lieu. Les tableaux en JavaScript fonctionnent rien de tel que les tableaux de Java et l'utilisation de la syntaxe de type Java sera vous confondre.N'utilisez pas
new Number,new Stringounew Boolean. Ces formes produisent wrappers d'objets inutiles. Il suffit d'utiliser littéraux simples à la place.
Consultez également les commentaires - le formulaire new Array(length) ne sert à rien (du moins dans les implémentations actuelles de JavaScript).
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 sous Windows 7.
Le premier est l'appel de constructeur d'objet par défaut. Vous pouvez utiliser ses paramètres si vous voulez.
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.
Je peux expliquer de manière plus spécifique à partir de cet exemple basé sur le bon exemple 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 simplement ajouté une autre valeur aux tableaux et lancé quatre alertes: Les premières et deuxièmes ont pour but de nous donner la valeur stockée dans chaque tableau, pour être sûr des valeurs. Ils vont retourner le même! Maintenant, essayez le troisième, il retourne faux, c'est parce que
JS traite test1 en tant que VARIABLE avec un type de données de type tableau et traite test2 en tant que OBJECT avec la fonctionnalité d'un tableau , et il y a peu de légères différences ici.
La première différence est que lorsque nous appelons test1, elle appelle une variable sans y penser, elle renvoie simplement les valeurs stockées dans cette variable sans tenir compte de son type de données! Mais, lorsque nous appelons test2, elle appelle le Array () function et ensuite il stocke nos valeurs "Pushed" dans sa propriété "Value", et il en va de même lorsque nous alertons test2, il retourne la propriété "Value" de l'objet tableau.
Donc, lorsque nous vérifions si test1 est égal à test2, bien sûr, ils ne renverront jamais la valeur true, l’une est une fonction et l’autre est une variable (avec un type de tableau), même si elles ont la même valeur!
Pour être sûr de cela, essayez la 4ème alerte, avec la valeur. Ajoutée; cela reviendra vrai. Dans ce cas, nous disons à JS "En ignorant le type du 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 se passe.
J'espère que j'ai dit clairement l'idée derrière cela, et désolé pour mon mauvais anglais.
Il n'y a pas de grande différence, ils font fondamentalement la même chose mais en les faisant de différentes manières, mais lisez la suite, regardez cette déclaration au W3C:
var cars = ["Saab", "Volvo","BMW"];
et
var cars = new Array("Saab", "Volvo", "BMW");
Les deux exemples ci-dessus font exactement la même chose. Il n'y a pas besoin d'utiliser nouveau tableau ().
Pour plus de simplicité, de lisibilité et de rapidité d'exécution, utilisez le fichier premier (la méthode littérale de tableau).
Mais en même temps, créer un nouveau tableau en utilisant la syntaxe new Array est considéré comme une mauvaise pratique:
Eviter les nouveaux tableaux ()
Il n'est pas nécessaire d'utiliser le constructeur de tableau intégré de JavaScript nouveau tableau ().
Utilisez [] à la place.
Ces deux instructions différentes créent toutes deux un nouveau tableau vide nommé points:
var points = new Array(); // Bad
var points = []; // Good
Ces deux instructions différentes créent un nouveau tableau contenant 6 Nombres:
var points = new Array(40, 100, 1, 5, 25, 10); // Bad
var points = [40, 100, 1, 5, 25, 10]; // Good
Le mot-clé new ne fait que compliquer le code. Il peut aussi en produire résultats inattendus:
var points = new Array(40, 100); // Creates an array with two elements (40 and 100)
Et si je supprime un des éléments?
var points = new Array(40); // Creates an array with 40 undefined elements !!!!!
Donc, fondamentalement, ce n’est pas considéré comme la meilleure pratique, mais il existe également une différence mineure: vous pouvez passer de la longueur à new Array(length) comme ceci, ce qui n’est pas non plus une méthode recommandée.
Le premier est le constructeur de l'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.
La différence d'utilisation
var arr = new Array(size);
Ou
arr = [];
arr.length = size;
Comme cela a été suffisamment discuté dans cette question.
Je voudrais ajouter la question de la vitesse - la actuel moyen le plus rapide, le google chrome est le second.
Mais attention, ces choses ont tendance à beaucoup changer avec les mises à jour. En outre, le temps d'exécution sera différent entre les différents navigateurs.
Par exemple, la deuxième option mentionnée est de 2 millions [ops/second] sur chrome, mais si vous l'essayez sur mozilla dev., vous obtiendrez un taux étonnamment plus élevé, soit 23 millions.
Quoi qu'il en soit, je vous conseillerais de vérifier cela de temps en temps sur différents navigateurs (et machines), en utilisant le site en tant que tel
Comme je connais la différence, vous pouvez trouver la tranche (ou les autres fonctions de Array) comme code1. Et code2 show u Array et ses instances:
code1:
[].slice; // find slice here
var arr = new Array();
arr.slice // find slice here
Array.prototype.slice // find slice here
code2:
[].__proto__ == Array.prototype; // true
var arr = new Array();
arr.__proto__ == Array.prototype; // true
conclusion:
comme vous pouvez le voir, [] et new Array() créent une nouvelle instance de Array.Et ils ont tous les fonctions prototypes de Array.prototype
Ce ne sont que des exemples différents d’Array.so, cela explique pourquoi [] != []
:)
Il n'y a pas de différence lorsque vous initialisez un tableau sans aucune longueur. Donc, var a = [] & var b = new Array() est identique.
Mais si vous initialisez un tableau avec une longueur telle que var b = new Array(1);, il définira la longueur de l'objet tableau sur 1. Donc, son équivalent à var b = []; b.length=1;.
Ce sera problématique à chaque fois que vous ferez array_object.Push, cela ajoutera un élément après le dernier élément et augmentera la longueur.
var b = new Array(1);
b.Push("hello world");
console.log(b.length); // print 2
contre
var v = [];
a.Push("hello world");
console.log(b.length); // print 1
J'ai eu un comportement étrange en utilisant [].
Nous avons des "classes" de modèle avec des champs initialisés à une certaine valeur. Par exemple.:
require([
"dojo/_base/declare",
"dijit/_WidgetBase",
], function(declare, parser, ready, _WidgetBase){
declare("MyWidget", [_WidgetBase], {
field1: [],
field2: "",
function1: function(),
function2: function()
});
});
J'ai constaté que lorsque les champs sont initialisés avec [], ils sont partagés par tous les objets Model. Apporter des modifications à l'un affecte tous les autres.
Cela ne se produit pas en les initialisant avec new Array(). Idem pour l'initialisation d'objets ({} vs new Object())
TBH Je ne sais pas si c'est un problème avec le framework que nous utilisions ( Dojo )