Quelle est la vraie différence entre déclarer un tableau comme celui-ci:
var myArray = new Array();
et
var myArray = [];
Quelle est la vraie différence entre déclarer un tableau comme celui-ci:
var myArray = new Array();
et
var myArray = [];
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
;
Une autre différence est que lorsque new Array()
vous utilisez, vous pouvez définir la taille du tableau, ce qui affecte la taille de la pile. Cela peut être utile si vous obtenez des débordements de pile ( Performances d'Array.push vs Array.unshift ), ce qui se produit lorsque la taille du tableau dépasse la taille de la pile, et il doit être recréé. Il peut donc en fait, selon le cas d'utilisation, augmenter les performances lors de l'utilisation new Array()
car vous pouvez empêcher le débordement de se produire.
Comme indiqué dans cette réponse , new Array(5)
n'ajoutera pas réellement cinq undefined
éléments au tableau. Il ajoute simplement de l'espace pour cinq éléments. Sachez que l'utilisation de Array
cette méthode rend difficile la fiabilité array.length
des calculs.
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 à l'aide de
var a = [];
Vous dites à l'interpréteur de créer un nouveau tableau d'exécution. Aucun traitement supplémentaire nécessaire. 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 recherche ensuite dans votre contexte d'exécution pour trouver le constructeur à appeler et l'appelle, 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. Le second ne le sera pas. Vous finirez par voir indéfini. Vous remarquerez également que b contient toutes les fonctions natives de l'objet Array telles que push
, là où l'autre ne le fait pas.
Bien que vous puissiez vous attendre à ce que cela se produise, cela illustre simplement le fait que ce []
n'est pas la même chose que new Array()
.
Il est probablement préférable d'utiliser simplement []
si vous savez que vous voulez juste un tableau. Je ne suggère pas non plus de faire le tour et de redéfinir Array ...
Il y a une différence importante qu'aucune réponse n'a encore mentionnée.
De ceci:
new Array(2).length // 2
new Array(2)[0] === undefined // true
new Array(2)[1] === undefined // true
Vous pourriez penser que le new Array(2)
est équivalent à [undefined, undefined]
, mais ce n'est PAS!
Essayons avec map()
:
[undefined, undefined].map(e => 1) // [1, 1]
new Array(2).map(e => 1) // "(2) [undefined × 2]" in Chrome
Voir? La sémantique est totalement différente! Alors pourquoi ça?
Selon la spécification ES6 22.1.1.2, le travail de Array(len)
consiste simplement à créer un nouveau tableau dont la propriété length
est définie sur l'argument len
et c'est tout, ce qui signifie qu'il n'y a aucun élément réel à l' intérieur de ce tableau nouvellement créé.
La fonction map()
, selon la spécification 22.1.3.15 vérifierait d'abord HasProperty
puis rappellerait , mais il s'avère que:
new Array(2).hasOwnProperty(0) // false
[undefined, undefined].hasOwnProperty(0) // true
Et c'est pourquoi vous ne pouvez pas vous attendre à ce que les fonctions d'itération fonctionnent comme d'habitude sur les tableaux créés à partir denew Array(len)
.
BTW, Safari et Firefox ont une bien meilleure "impression" dans cette situation:
// 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 à Chromium et je leur demande de corriger cette impression déroutante: https://bugs.chromium.org/p/chromium/issues/detail?id=732021
MISE À JOUR: C'est déjà corrigé. Chrome désormais imprimé comme:
new Array(2) // (2) [empty × 2]
[...Array(2)]
ce qui est équivalent [undefined, undefined]
du point de vue des résultats.
undefined
comme d'habitude.
Curieusement, il new Array(size)
est presque 2x plus rapide que []
dans Chrome, et à peu près le même dans FF et IE (mesuré 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 indiquée, l'augmentation des performances est perdue.
Plus précisément: il Array(
s'agit d'une opération à temps constant rapide qui n'alloue aucune mémoire, tandis qu'il []
s'agit d'une opération à temps linéaire qui définit le type et la valeur.
new Array(length)
sur 0 <= taille <= ~ 1000, sur la taille> ~ 1000 victoires[]
Pour plus d'informations, la page suivante explique pourquoi vous n'avez jamais besoin d'utilisernew Array()
Vous n'avez jamais besoin d'utiliser
new Object()
en JavaScript. Utilisez{}
plutôt le littéral objet . De même, n'utilisez pasnew Array()
, utilisez[]
plutôt le littéral du tableau . Les tableaux en JavaScript ne fonctionnent en rien comme les tableaux en Java, et l'utilisation de la syntaxe de type Java vous confondra.Ne pas utiliser
new Number
,new String
ounew Boolean
. Ces formulaires produisent des wrappers d'objets inutiles. Utilisez simplement des littéraux simples à la place.
Consultez également les commentaires - le new Array(length)
formulaire ne sert à rien (au 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 sur Windows 7.
Array(3)
ou différentes new Array(3)
de [3]
.
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.
var array = [5]
utilisant les crochets mais pas en utilisant le constructeur car cela var array = Array(5)
fait un tableau vide de 5 éléments.
Je peux expliquer d'une manière plus spécifique en commençant par cet exemple qui est basé sur le bon 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);
Je viens d'ajouter une autre valeur aux tableaux, et j'ai fait quatre alertes: La première et la seconde doivent nous donner la valeur stockée dans chaque tableau, pour être sûr des valeurs. Ils reviendront les mêmes! Maintenant, essayez le troisième, il renvoie faux, c'est parce que
JS traite test1 comme une VARIABLE avec un type de données de tableau , et il traite test2 comme un OBJET 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, 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, lorsque nous appelons test2, il appelle la fonction Array () , puis il stocke nos valeurs "Pushed" dans sa propriété "Value" , et il en va de même lorsque nous alertons test2, il renvoie la propriété "Value" de l'objet tableau.
Ainsi, lorsque 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 en être sûr, essayez la 4ème alerte, avec la valeur ajoutée. cela reviendra vrai. Dans ce cas, nous disons à JS "Sans tenir compte du type de conteneur, que ce soit une fonction ou une variable, veuillez comparer 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 clairement dit l'idée derrière cela, et désolé pour mon mauvais anglais.
[]
et new Array()
est identique; .value
sera undefined
dans les deux cas, et les comparer sera toujours faux.
array.value
. et les deux typeof []
et typeof new Array()
revenir object
. C'est l'une des raisons pour lesquelles il existe une fonction appeléeArray.isArray
Il n'y a aucune différence lorsque vous initialisez un tableau sans aucune longueur. Donc var a = []
& var b = new Array()
c'est pareil.
Mais si vous initialisez un tableau avec une longueur comme var b = new Array(1);
, il fixera la longueur de l'objet tableau à 1. Donc son équivalent à var b = []; b.length=1;
.
Ce sera problématique chaque fois que vous faites array_object.push, il ajoute un élément après le dernier élément et augmente 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
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 deuxième tableau est utilisé lors de la création de valeurs statiques
var array = [red, green, blue, yellow, white]; // this array will contain values.
Il n'y a pas de grande différence, ils font essentiellement la même chose mais les font 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'est pas nécessaire d'utiliser new Array ().
Pour la simplicité, la lisibilité et la vitesse d'exécution, utilisez la première (la méthode littérale du tableau).
Mais en même temps, créer un nouveau tableau en utilisant une new Array
syntaxe considérée comme une mauvaise pratique:
Évitez les nouveaux tableaux ()
Il n'est pas nécessaire d'utiliser le nouveau constructeur de tableaux intégré de JavaScript, Array ().
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 toutes les deux 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 nouveau mot-clé ne fait que compliquer le code. Cela peut également produire des résultats inattendus:
var points = new Array(40, 100); // Creates an array with two elements (40 and 100)
Et si je supprime l'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, il y a aussi une différence mineure, vous pouvez passer la longueur à new Array(length)
aimer cela, ce qui n'est pas non plus recommandé.
new Array(40).fill(123)
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 le problème de vitesse - le moyen le plus rapide actuellement , google chrome
c'est le deuxième.
Mais faites attention, ces choses ont tendance à changer beaucoup avec les mises à jour. De plus, le temps d'exécution variera entre les différents navigateurs.
Par exemple - la 2ème option que j'ai mentionnée, fonctionne à 2 millions [ops / seconde] chrome
, mais si vous l'essayez, mozilla dev.
vous obtiendrez un taux étonnamment plus élevé de 23 millions.
Quoi qu'il en soit, je vous suggère de le vérifier, de temps en temps, sur différents navigateurs (et machines), en utilisant le site en tant que tel
Comme je sais que la diference u peut trouver la tranche (ou les autres funcitons de Array) comme code1 .and code2 afficher u tableau 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 voir []
et new Array()
créer une nouvelle instance de Array. Et ils obtiennent tous les fonctions prototypes deArray.prototype
Ce ne sont que des instances différentes de Array, ce qui explique pourquoi
[] != []
:)
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 trouvé que lorsque les champs sont initialisés avec, []
ils seraient 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 des objets ( {}
vs new Object()
)
TBH Je ne sais pas si c'est un problème avec le framework que nous utilisions ( Dojo )
Il y a plus que cela à l'œil nu. La plupart des autres réponses sont correctes MAIS AUSSI ..
new Array(n)
n
éléments[1, 2, 3] || []
delete
ou la [1,,3]
syntaxe)for ..
, forEach
, map
, etc.)Ce n'est probablement pas le cas pour les anciennes versions de navigateur / navigateurs.
J'ai trouvé une différence entre les deux constructions qui me mordait assez fort.
Disons que j'ai:
function MyClass(){
this.property1=[];
this.property2=new Array();
};
var MyObject1=new MyClass();
var MyObject2=new MyClass();
Dans la vraie vie, si je fais ça:
MyObject1.property1.push('a');
MyObject1.property2.push('b');
MyObject2.property1.push('c');
MyObject2.property2.push('d');
Je me retrouve avec ceci:
MyObject1.property1=['a','c']
MyObject1.property2=['b']
MyObject2.property1=['a','c']
MyObject2.property2=['d']
Je ne sais pas ce que la spécification de langage dit censé se produire, mais si je veux que mes deux objets aient des tableaux de propriétés uniques dans mes objets, je dois utiliser new Array()
.
[]
et du new Array()
constructeur, ce qui donne un élément par tableau par propriété. Vous devez avoir quelque chose d'autre en cours dans votre code pour vous retrouver avec le résultat que vous montrez ci-dessus.
var property1static=[];
function MyClass(){ this.property1=property1static; this.property2=new Array(); };
L'utilisation du constructeur Array crée un nouveau tableau de la longueur souhaitée et remplit chacun des indices avec undefined, le tableau affecté à une variable crée les indices pour lesquels vous lui donnez des informations.
[]
jeton:ARRAY_INIT
;new Array
jetons:NEW, IDENTIFIER
;new Array()
jetons:NEW, IDENTIFIER, CALL