web-dev-qa-db-fra.com

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

Il existe deux façons différentes de créer un objet vide en JavaScript:

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

Existe-t-il une différence dans la façon dont le moteur de script les gère? Y at-il une raison pour 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()
javascriptarraysobjectjavascript-objectsnew-operator
353
Jonas Pegerfalk

Objets

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

Pour définir des objets vides, ils sont techniquement les mêmes. La syntaxe {} est plus courte, plus précise (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

De même, il n’ya pratiquement aucun avantage à utiliser new Array(); sur []; - avec une exception mineure:

var emptyArray = new Array(100);

crée un tableau long 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(); - il est plus encombrant que '{}' et a l'air idiot.
  2. Utilisez toujours []; - sauf lorsque vous devez créer rapidement un tableau "vide" de longueur prédéfinie.
443
Már Örlygsson

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 différemment pour les deux. L’un d’eux est un littéral d’objet, l’autre est un constructeur, deux manières 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 tout simplement un objet vide.

Par exemple: new Object(1), retournera un nombre. new Object("hello") renverra 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 tels que chaîne, nombre, etc. re gestion des données dynamiques pour 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, où vous serez sûr que ce que vous créez est ce que vous attendez de 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.

87
Guillermo Snipe

Celles-ci ont le même résultat final, mais j’aimerais simplement ajouter que l’utilisation de la syntaxe littérale peut aider l’utilisateur à s’habituer à la syntaxe de JSON (un sous-ensemble chaine de la syntaxe de l’objet littéral JavaScript). .

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

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

12
Jason Bunting

Je crois que {} a été recommandé dans l'une des vidéos Javascript sur ici comme bonne convention de codage. new est nécessaire pour l'héritage pseudoclassique. la méthode var obj = {}; aide à vous rappeler qu'il ne s'agit pas d'un langage classique orienté objet mais d'un prototype. Ainsi, le seul moment où vous auriez vraiment besoin de new est lorsque vous utilisez des fonctions de constructeur. 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 Object est que vous pouvez l'utiliser pour créer des littéraux d'objet de style JSON.

8
Thedric Walker
var objectA = {}

est beaucoup plus rapide et, selon mon expérience, plus couramment utilisé, il est donc probablement préférable d’adopter le "standard" et d’économiser du texte.

8
Bobby Jack

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

Mes doigts continuent toujours à dire new Array (), mais je suis un très vieil homme. Heureusement, Netscape 3 n'est pas un navigateur que beaucoup de gens doivent prendre en compte aujourd'hui ...

8
bobince

Performances d'instanciation de tableaux

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 tests de performance, cliquez sur les éléments suivants: https://jsfiddle.net/basickarl/ktbbry5b/

Cependant, je ne connais pas l’empreinte mémoire des deux, je peux imaginer que new Array() occupe plus d’espace.

7
Karl Morrison

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

2
Tomalak

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

Mais, lisez la suite, j'aimerais partager quelques points:

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

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

L'utilisation littérale d'objet donne à votre code une apparence 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, {} pointe uniquement sur des objets javascript. Pour le test de fonctionnement, procédez comme suit dans votre code javascript ou votre console:

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

Étonnamment, cela crée un nombre!

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 étrange pour String!

Donc, si vous créez un objet, il est recommandé d’utiliser littéral d’objet, d’avoir un code standard et d’éviter tout accident de code comme ci-dessus, ainsi que de performances en utilisant {} est préférable dans mon expérience!

1
Alireza