Ein leeres Objekt in JavaScript mit {} oder new Object () erstellen?

370

Es gibt zwei verschiedene Möglichkeiten, ein leeres Objekt in JavaScript zu erstellen:

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

Gibt es einen Unterschied darin, wie die Skript-Engine damit umgeht? Gibt es einen Grund, einen über den anderen zu verwenden?

In ähnlicher Weise ist es auch möglich, ein leeres Array mit unterschiedlicher Syntax zu erstellen:

var arrayA = []
var arrayB = new Array()
Jonas Pegerfalk
quelle
6
Warnung: Es gibt einen kleinen Unterschied, der sehr irritierende Fehler verursachen kann! Das Erstellen eines leeren Objekts, das in einem Objektprototyp "{}" zugewiesen wird, ist dieselbe Objektinstanz in jeder Objektinstanz, die von einem "neuen" Operator erstellt wurde. Während Sie "neues Objekt ({})" verwenden, haben Sie verschiedene Instanzen.
Peter
Erwähnenswert ist, dass es zusätzlich zu var objectA = {} var objectB = new Object()einem dritten Konstrukt das gleiche Ergebnis gibt:var objectC = Object.create(Object.prototype);
Kalitsov
{}und [] Verwenden Sie {}anstelle von new Object(). Verwenden Sie []anstelle von new Array(). Verwenden Sie Arrays, wenn die Mitgliedsnamen sequentielle Ganzzahlen sind. Verwenden Sie Objekte, wenn die Mitgliedsnamen beliebige Zeichenfolgen oder Namen sind. Quelle
Ilgaar
new Object()und {}sind nicht ganz leere Objekte, sondern Objekte mit dem Object.prototype. Sie können Object.create(null)für ein wirklich leeres Objekt verwenden (zumindest gemäß den Mozilla-Dokumenten: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… )

Antworten:

459

Objekte

Es gibt keinen Nutzen zu verwenden new Object();- während {};können Sie den Code kompakter und besser lesbar machen.

Für die Definition leerer Objekte sind sie technisch gleich. Die {}Syntax ist kürzer, übersichtlicher (weniger Java-artig) und ermöglicht es Ihnen, das Objekt sofort inline zu füllen - wie folgt:

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

Arrays

Bei Arrays hat die Verwendung von new Array();Over fast keinen Vorteil [];- mit einer kleinen Ausnahme:

var emptyArray = new Array(100);

Erstellt ein 100 Elemente langes Array mit allen Slots, die enthalten undefined- was in bestimmten Situationen (z. B. (new Array(9)).join('Na-Na ') + 'Batman!') hilfreich sein kann .

Meine Empfehlung

  1. Niemals benutzen new Object();- es ist klobiger als {};und sieht albern aus.
  2. Immer verwenden [];- außer wenn Sie schnell ein "leeres" Array mit einer vordefinierten Länge erstellen müssen.
Már Örlygsson
quelle
22
Selbst wenn Sie die Array (100) -Syntax verwenden, ist dasselbe Array an der 101. Position undefiniert. Das einzige, was diese Zahl wirklich tut, ist den Wert der Eigenschaft length zu ändern.
Jason Bunting
6
@Pablo gibt es nichts ungültiges new Array(100). Lesen Sie die Literatur: developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…
Már Örlygsson
9
@Pablo Ich habe keine Ahnung, was dein Argument ist. Wie Douglas Crockford empfehle ich die Verwendung []. Kein Argument da. Sie haben jedoch argumentiert, dass dies new Array(100)irgendwie "ungültig" ist, was nicht wahr ist.
Már Örlygsson
10
Beachten Sie auch, dass new Array(1,2,3)Ergebnisse in [1,2,3], aber new Array(1)nicht nicht zur Folge [1]; Daher ist die Semantik von Arrayinkonsistent und unnötig verwirrend.
Dancrumb
3
Ich würde hinzufügen, dass Object.create(null)dies nützlich sein kann, um ein leeres Objekt zu erstellen, während es { }vom Objektprototyp erbt.
Miau
90

Ja, es gibt einen Unterschied, sie sind nicht gleich. Es ist wahr, dass Sie die gleichen Ergebnisse erzielen, aber die Engine funktioniert für beide unterschiedlich. Einer von ihnen ist ein Objektliteral und der andere ist ein Konstruktor, zwei verschiedene Arten, ein Objekt in Javascript zu erstellen.

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

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

In JS ist alles ein Objekt, aber Sie sollten bei new Object () Folgendes beachten: Es kann einen Parameter empfangen und abhängig von diesem Parameter wird eine Zeichenfolge, eine Zahl oder nur ein leeres Objekt erstellt.

Beispiel: new Object(1)Gibt eine Nummer zurück. new Object("hello")Wenn eine Zeichenfolge zurückgegeben wird, bedeutet dies, dass der Objektkonstruktor - abhängig vom Parameter - die Objekterstellung an andere Konstruktoren wie Zeichenfolge, Nummer usw. delegieren kann. Dies ist sehr wichtig, wenn Sie dynamische Daten verwalten Objekte erstellen ..

Viele Autoren empfehlen, den Objektkonstruktor nicht zu verwenden, wenn Sie stattdessen eine bestimmte Literalnotation verwenden können, bei der Sie sicher sein werden, dass das, was Sie erstellen, das ist, was Sie in Ihrem Code erwarten.

Ich empfehle Ihnen, die Unterschiede zwischen der wörtlichen Notation und den Konstruktoren in Javascript weiter zu lesen, um weitere Einzelheiten zu erfahren.

Guillermo Snipe
quelle
Die Literalnotation ist in der Tat lesbarer und prägnanter, um dynamische Datenobjekte zu erstellen.
Sid
12

Diese haben das gleiche Endergebnis, aber ich möchte einfach hinzufügen, dass die Verwendung der Literal-Syntax dazu beitragen kann, sich an die Syntax von JSON (eine string-ified-Teilmenge der JavaScript-Literal-Objekt-Syntax) zu gewöhnen .

Eine andere Sache: Sie können subtile Fehler haben, wenn Sie vergessen, den newOperator zu verwenden. Die Verwendung von Literalen hilft Ihnen also, dieses Problem zu vermeiden.

Letztendlich wird es sowohl von der Situation als auch von den Vorlieben abhängen.

Jason Bunting
quelle
8

Die Literal-Syntax {} / [] für Objekte und Arrays wurde in JavaScript 1.2 eingeführt und ist daher in Versionen von Netscape Navigator vor 4.0 nicht verfügbar (und führt zu einem Syntaxfehler).

Meine Finger sagen immer noch standardmäßig neues Array (), aber ich bin ein sehr alter Mann. Zum Glück ist Netscape 3 kein Browser, den viele Menschen heute jemals in Betracht ziehen müssen ...

Bobince
quelle
11
Netscape 3? Mann, das war im vorigen Jahrhundert ! :-D
Tomalak
8
var objectA = {}

ist viel schneller und wird meiner Erfahrung nach häufiger verwendet, daher ist es wahrscheinlich am besten, den 'Standard' zu übernehmen und etwas Tipparbeit zu sparen.

Bobby Jack
quelle
1
Schneller zu laufen oder nur schneller zu tippen?
Hippietrail
Zugegeben, ich wollte "tippen", aber angesichts der zusätzlichen Analysezeit wahrscheinlich auch in Bezug auf die Ausführung etwas schneller :-)
Bobby Jack
2
Außerdem werden Literale normalerweise zur Analysezeit erstellt, während new Objectsie zur Laufzeit ausgeführt werden müssen.
Phrogz
8

Ich glaube, {}wurde in einem der Javascript-Videos hier als gute Codierungskonvention empfohlen . newist für die pseudoklassische Vererbung notwendig. Der var obj = {};Weg erinnert Sie daran, dass dies keine klassische objektorientierte, sondern eine prototypische Sprache ist. Das einzige Mal, das Sie wirklich brauchen würden, newist, wenn Sie Konstruktorfunktionen verwenden. Zum Beispiel:

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

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

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

Dann wird es so verwendet:

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

Ein weiterer Vorteil der Verwendung {}im Gegensatz zu new Objectist, dass Sie damit Objektliterale im JSON-Stil erstellen können.

Thedric Walker
quelle
7

Array-Instanziierungsleistung

Wenn Sie ein Array ohne Länge erstellen möchten:

var arr = []; ist schneller als var arr = new Array();

Wenn Sie ein leeres Array mit einer bestimmten Länge erstellen möchten:

var arr = new Array(x);ist schneller als var arr = []; arr[x-1] = undefined;

Für Benchmarks klicken Sie auf Folgendes: https://jsfiddle.net/basickarl/ktbbry5b/

Ich kenne jedoch nicht den Speicherbedarf von beiden, ich kann mir vorstellen, dass dies new Array()mehr Platz beansprucht.

K - Die Toxizität in SO nimmt zu.
quelle
arr = new Array(x)ist gleichbedeutend mit arr = []; arr.length = x;, den x-1Index nicht zuzuweisen mit undefined.
Bergi
2

Dies ist im Wesentlichen das gleiche. Verwenden Sie alles, was Sie bequemer finden.

Tomalak
quelle
Vielleicht beschäftige ich mich hier zu tief mit Javascript, aber sind sie gleich? Ist das {proto} von nicht Objectnull, während das {proto} von {}'Object.prototype' ist?
Izhaki
@Izhaki Der Prototyp von Objectist null, das ist richtig. Das liegt daran Object, dass die Prototypenkette beendet wird. Objektinstanzen jedoch nicht über einen Prototyp, haben nur Konstrukteure ein. Und (new Object()).constructor === ({}).constructor->true
Tomalak
Also dies ist falsch , dann?
Izhaki
Hier ist mein Punkt: new Object()ergibt eine leere Objektinstanz. {}ergibt eine leere Objektinstanz. Beide Fälle sind absolut nicht zu unterscheiden. Das Beispiel, auf das Sie verlinken, macht etwas anderes (es modifiziert die Prototypenkette) und trifft hier nicht wirklich zu - oder ich verstehe Ihr Argument nicht.
Tomalak
1

OK , es gibt nur zwei verschiedene Möglichkeiten, dasselbe zu tun! Einer heißt object literalund der andere ist eine Funktion constructor!

Aber lesen Sie weiter, es gibt einige Dinge, die ich gerne teilen möchte:

Durch {}die Verwendung wird Ihr Code besser lesbar, während Instanzen Objectoder andere integrierte Funktionen erstellt werden, die nicht empfohlen werden ...

Außerdem erhält die Objektfunktion Parameter, da es sich um eine Funktion handelt, wie Object(params)... aber es {}ist eine reine Möglichkeit, ein Objekt in JavaScript zu starten ...

Durch die Verwendung von Objektliteral sieht Ihr Code für andere Entwickler viel sauberer und leichter lesbar aus und entspricht den Best Practices in JavaScript ...

Während Objekt in Javascript fast alles sein kann, zeigt es {}nur auf Javascript-Objekte. Führen Sie für den Test, wie es funktioniert, die folgenden Schritte in Ihrem Javascript-Code oder in Ihrer Javascript-Konsole aus:

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

Überraschenderweise wird eine Zahl erstellt!

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

Und das schafft ein Array!

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

und dieses seltsame Ergebnis für String!

Wenn Sie also ein Objekt erstellen, wird empfohlen, ein Objektliteral zu verwenden, einen Standardcode zu verwenden und einen Codeunfall wie oben zu vermeiden. Auch die Verwendung {}in Bezug auf die Leistung ist meiner Erfahrung nach besser!

Alireza
quelle
Sie sind Dezfooli? in Iran?
Ehsan
Hallo Ehsan, ja, aber ich lebe nicht im Iran Kumpel, du hast hier ein tolles Profil! Schön, Sie kennenzulernen ...
Alireza
Kann ich Ihre Nummer speichern und Hilfe von Ihnen bezüglich der Programmierung erhalten?
Ehsan
Ich sehe, Sie verwenden Telegramm.
Ehsan
Ja, sicher, wir können sicher einige Kenntnisse über Telegramm teilen! ___
Alireza