Créer un objet vide en JavaScript avec {} ou un nouvel objet ()?

370

Il y a deux différents façons de créer un objet vide en JavaScript:

var objectA = {}
var objectB = new Object()

Y a-t-il une différence dans la façon dont le moteur de script les gère? Y a-t-il une raison d'utiliser l'un sur l'autre?

De même, il est également possible de créer un tableau vide en utilisant une syntaxe différente:

var arrayA = []
var arrayB = new Array()
Jonas Pegerfalk
la source
6
Attention: il y a une petite différence qui pourrait provoquer des bugs très irritants! La création d'un objet vide en l'attribuant à "{}" dans un prototype d'objet sera la même instance d'objet dans chaque instance d'objet créée par un "nouvel" opérateur. Alors que vous utilisez "nouvel objet ({})", vous aurez différentes instances.
peterh
À noter qu'en plus var objectA = {} var objectB = new Object()il y a une troisième construction qui produira le même résultat:var objectC = Object.create(Object.prototype);
kalitsov
{}et [] utiliser à la {}place de new Object(). Utilisez []au lieu de new Array(). Utilisez des tableaux lorsque les noms des membres sont des entiers séquentiels. Utilisez des objets lorsque les noms de membres sont des chaînes ou des noms arbitraires. source
ilgaar
new Object()et {}ne sont pas des objets tout à fait vides, ce sont des objets qui ont le Object.prototype. Vous pouvez utiliser Object.create(null)pour un objet vraiment vide (au moins selon les documents mozilla: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… )

Réponses:

459

Objets

Il n'y a aucun avantage à utiliser new Object();- alors qu'il {};peut rendre votre code plus compact et plus lisible.

Pour définir des objets vides, ils sont techniquement les mêmes. le{} syntaxe est plus courte, plus nette (moins Java-ish), et vous permet de remplir instantanément l'objet en ligne - comme ceci:

var myObject = {
        title:  'Frog',
        url:    '/img/picture.jpg',
        width:  300,
        height: 200
      };

Tableaux

Pour les tableaux, il n'y a de même presque aucun avantage à utiliser new Array();Over [];- à une exception près:

var emptyArray = new Array(100);

crée un tableau de 100 éléments avec tous les emplacements contenant undefined- ce qui peut être agréable / utile dans certaines situations (comme (new Array(9)).join('Na-Na ') + 'Batman!').

Ma recommandation

  1. N'utilisez jamais new Object();- c'est plus maladroit que {};et semble idiot.
  2. Utilisez toujours [];- sauf lorsque vous devez créer rapidement un tableau "vide" avec une longueur prédéfinie.
Már Örlygsson
la source
22
Même si vous utilisez la syntaxe Array (100), ce même tableau, à la 101e position, n'est pas défini; la seule chose que ce nombre fait vraiment est de changer la valeur de la propriété length.
Jason Bunting
6
@Pablo, il n'y a rien d'invalide new Array(100). Lisez la littérature: developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…
Már Örlygsson
9
@Pablo Je n'ai aucune idée de votre argument. Comme Douglas Crockford, je recommande d'utiliser []. Aucun argument là-bas. Vous, cependant, avez soutenu que new Array(100)c'est en quelque sorte "invalide", ce qui est faux.
Már Örlygsson
10
De plus, sachez que les new Array(1,2,3)résultats en [1,2,3], mais new Array(1)ne pas entraîner [1]; ainsi, la sémantique de Arrayest incohérente et prête à confusion inutilement.
Dancrumb
3
J'ajouterais que cela Object.create(null)peut être utile pour créer un objet vide, alors qu'il { }hérite du prototype d'objet.
Meow
90

Oui, il y a une différence, ce ne sont pas les mêmes. Il est vrai que vous obtiendrez les mêmes résultats mais le moteur fonctionne de manière différente pour les deux. L'un d'eux est un objet littéral, et l'autre est un constructeur, deux façons différentes de créer un objet en javascript.

var objectA = {} //This is an object literal

var objectB = new Object() //This is the object constructor

Dans JS, tout est un objet, mais vous devez être conscient de la chose suivante avec new Object (): il peut recevoir un paramètre, et en fonction de ce paramètre, il créera une chaîne, un nombre ou simplement un objet vide.

Par exemple new Object(1):, renverra un nombre. new Object("hello")retournera une chaîne, cela signifie que le constructeur d'objet peut déléguer - en fonction du paramètre - la création d'objet à d'autres constructeurs comme la chaîne, le nombre, etc ... Il est très important de garder cela à l'esprit lorsque vous gérez des données dynamiques à créer des objets ..

De nombreux auteurs recommandent de ne pas utiliser le constructeur d'objet lorsque vous pouvez utiliser une certaine notation littérale à la place, où vous serez sûr que ce que vous créez est ce que vous attendez d'avoir dans votre code.

Je vous suggère de faire une lecture supplémentaire sur les différences entre la notation littérale et les constructeurs sur javascript pour trouver plus de détails.

Guillermo Snipe
la source
La notation littérale est en fait plus lisible et concise pour créer des objets de données dynamiques.
Sid
12

Ceux-ci ont le même résultat final, mais j'ajouterais simplement que l'utilisation de la syntaxe littérale peut aider à s'habituer à la syntaxe de JSON (un sous-ensemble de chaînes de syntaxe d'objet littéral JavaScript), il pourrait donc être une bonne pratique d'entrer dans .

Une autre chose: vous pourriez avoir des erreurs subtiles si vous oubliez d'utiliser l' newopérateur. Ainsi, l'utilisation de littéraux vous aidera à éviter ce problème.

En fin de compte, cela dépendra de la situation ainsi que des préférences.

Jason Bunting
la source
8

La syntaxe littérale objet et tableau {} / [] a été introduite dans JavaScript 1.2, elle n'est donc pas disponible (et produira une erreur de syntaxe) dans les versions de Netscape Navigator antérieures à 4.0.

Mes doigts par défaut continuent de dire new Array (), mais je suis un très vieil homme. Heureusement, Netscape 3 n'est pas un navigateur que beaucoup de gens doivent considérer aujourd'hui ...

bobince
la source
11
Netscape 3? Mec, c'était au siècle précédent ! :-D
Tomalak
8
var objectA = {}

est beaucoup plus rapide et, selon mon expérience, plus communément utilisé, il est donc préférable d'adopter le «standard» et d'économiser de la frappe.

Bobby Jack
la source
1
Plus rapide à exécuter ou simplement plus rapide à taper?
hippietrail
Eh bien, certes, je voulais dire "taper" mais, étant donné le temps d'analyse supplémentaire, probablement aussi un peu plus rapide en termes d'exécution :-)
Bobby Jack
2
De plus, les littéraux sont généralement créés au moment de l'analyse, tandis qu'ils new Objectdoivent être exécutés au moment de l'exécution.
Phrogz
8

Je crois que cela a {}été recommandé dans l'une des vidéos Javascript ici comme une bonne convention de codage. newest nécessaire pour l'héritage pseudoclassique. le var obj = {};chemin permet de vous rappeler qu'il ne s'agit pas d'un langage classique orienté objet mais d'un langage prototypique. Ainsi, le seul moment dont vous auriez vraiment besoin newest lorsque vous utilisez des fonctions constructeurs. Par exemple:

var Mammal = function (name) {
  this.name = name;
};

Mammal.prototype.get_name = function () {
  return this.name;
}

Mammal.prototype.says = function() {
  return this.saying || '';
}

Ensuite, il est utilisé comme suit:

var aMammal = new Mammal('Me warm-blooded');
var name = aMammal.get_name();

Un autre avantage à utiliser {}comme opposé new Objectest que vous pouvez l'utiliser pour faire des littéraux d'objet de style JSON.

Thedric Walker
la source
7

Performances d'instanciation de la baie

Si vous souhaitez créer un tableau sans longueur:

var arr = []; est plus rapide que var arr = new Array();

Si vous souhaitez créer un tableau vide d'une certaine longueur:

var arr = new Array(x);est plus rapide que var arr = []; arr[x-1] = undefined;

Pour les repères, cliquez sur ce qui suit: https://jsfiddle.net/basickarl/ktbbry5b/

Je ne connais cependant pas l'empreinte mémoire des deux, je peux imaginer que cela new Array()prend plus de place.

K - La toxicité du SO augmente.
la source
arr = new Array(x)équivaut à arr = []; arr.length = x;ne pas affecter l' x-1index avec undefined.
Bergi
2

C'est essentiellement la même chose. Utilisez ce que vous trouvez plus pratique.

Tomalak
la source
Peut-être que j'explore trop profondément le javascript ici, mais sont-ils les mêmes? Le {proto} de Objectn'est-il pas nul, tandis que le {proto} de {}est 'Object.prototype'?
Izhaki
@Izhaki Le prototype de Objectest nul, c'est correct. C'est parce que Objectmet fin à la chaîne de prototypes. Les instances d' objets n'ont cependant pas de prototype, seuls les constructeurs en ont un. Et (new Object()).constructor === ({}).constructor->true
Tomalak
Donc , c'est incorrect alors?
Izhaki
Voici mon point: new Object()donne une instance d'objet vide. {}renvoie une instance d'objet vide. Ces deux cas sont absolument indiscernables. L'exemple auquel vous vous connectez fait autre chose (il modifie la chaîne du prototype) et ne s'applique pas vraiment ici - ou je ne comprends pas votre argument.
Tomalak
1

OK , il n'y a que 2 façons différentes de faire la même chose! L'un appelé object literalet l'autre est une fonction constructor!

Mais lisez la suite, il y a quelques choses que je voudrais partager:

L'utilisation {}rend votre code plus lisible, tout en créant des instances de Objectou d'autres fonctions intégrées non recommandées ...

De plus, la fonction Object obtient des paramètres car c'est une fonction, comme Object(params)... mais {}est un moyen pur de démarrer un objet en JavaScript ...

L'utilisation du littéral objet rend votre code beaucoup plus propre et plus facile à lire pour les autres développeurs et il est conforme aux meilleures pratiques en JavaScript ...

Alors que Object en Javascript peut être presque n'importe quoi, {}ne pointe que vers des objets javascript, pour tester son fonctionnement, faites ci-dessous dans votre code javascript ou votre console:

var n = new Object(1); //Number {[[PrimitiveValue]]: 1}

Étonnamment, cela crée un numéro!

var a = new Object([1,2,3]); //[1, 2, 3]

Et cela crée un tableau!

var s = new Object('alireza'); //String {0: "a", 1: "l", 2: "i", 3: "r", 4: "e", 5: "z", 6: "a", length: 7, [[PrimitiveValue]]: "alireza"}

et ce résultat bizarre pour String!

Donc, si vous créez un objet, il est recommandé d'utiliser le littéral objet, d'avoir un code standard et d'éviter tout accident de code comme ci-dessus, également en termes de performances, {}c'est mieux selon mon expérience!

Alireza
la source
tu es Dezfooli? en Iran?
Ehsan
Salut Ehsan, oui, mais je ne vis pas en Iran, tu as un bon profil ici! Ravi de vous rencontrer ...
Alireza
puis-je enregistrer votre numéro de téléphone et obtenir de l'aide de votre part sur la programmation?
Ehsan
Je vois que vous utilisez un télégramme.
Ehsan
Oui, bien sûr, nous pouvons partager certaines connaissances sur le télégramme à coup sûr! ___
Alireza