Creare un oggetto vuoto in JavaScript con {} o nuovo Object ()?

Esistono due modi diversi per creare un oggetto vuoto in JavaScript:

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

C'è qualche differenza nel modo in cui il motore di script li gestisce? C'è qualche motivo per usarne uno sopra l'altro?

Allo stesso modo è anche possibile creare un array vuoto usando una sintassi diversa:

var arrayA = []
var arrayB = new Array()

Oggetti

Non vi è alcun vantaggio nell'utilizzare new Object();, mentre {};può rendere il codice più compatto e più leggibile.

Per definire oggetti vuoti sono tecnicamente uguali. La {}sintassi è più corta, più ordinata (meno Java-ish) e consente di popolare istantaneamente l'oggetto in linea, in questo modo:

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

Array

Allo stesso modo, per gli array non c'è quasi alcun vantaggio nell'usare new Array();over [];- con una piccola eccezione:

var emptyArray = new Array(100);

crea un array lungo 100 elementi con tutti gli slot contenenti undefined- che può essere utile / utile in determinate situazioni (come (new Array(9)).join('Na-Na ') + 'Batman!').

La mia raccomandazione

1. Non usare mai new Object();: è più ingombrante di {};e sembra sciocco.
2. Utilizzare sempre [];, tranne quando è necessario creare rapidamente un array "vuoto" con una lunghezza predefinita.

Sì, c'è una differenza, non sono la stessa cosa. È vero che otterrai gli stessi risultati ma il motore funziona in modo diverso per entrambi. Uno di questi è un oggetto letterale e l'altro è un costruttore, due modi diversi di creare un oggetto in javascript.

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

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

In JS tutto è un oggetto, ma con il nuovo Oggetto () dovresti essere consapevole delle seguenti cose: Può ricevere un parametro e, a seconda di quel parametro, creerà una stringa, un numero o solo un oggetto vuoto.

Ad esempio new Object(1):, restituirà un numero. new Object("hello")restituirà una stringa, significa che il costruttore di oggetti può delegare, in base al parametro, la creazione dell'oggetto ad altri costruttori come stringa, numero, ecc. È molto importante tenerlo presente quando si gestiscono dati dinamici su creare oggetti ..

Molti autori raccomandano di non usare il costruttore di oggetti quando invece puoi usare una certa notazione letterale, dove sarai sicuro che ciò che stai creando è ciò che ti aspetti di avere nel tuo codice.

Ti suggerisco di fare un'ulteriore lettura sulle differenze tra notazione letterale e costruttori su JavaScript per trovare maggiori dettagli.

Questi hanno lo stesso risultato finale, ma aggiungerei semplicemente che l'uso della sintassi letterale può aiutare ad abituarsi alla sintassi di JSON (un sottoinsieme di sintassi di oggetti letterali JavaScript), quindi potrebbe essere una buona pratica approfondire .

Un'altra cosa: potresti avere degli errori sottili se ti dimentichi di usare l' newoperatore. Quindi, l'uso dei letterali ti aiuterà a evitare questo problema.

In definitiva, dipenderà dalla situazione e dalle preferenze.

La sintassi letterale oggetto e array {} / [] è stata introdotta in JavaScript 1.2, quindi non è disponibile (e produrrà un errore di sintassi) nelle versioni di Netscape Navigator precedenti alla 4.0.

Le mie dita continuano a non dire nuovo Array (), ma sono un uomo molto anziano. Per fortuna Netscape 3 non è un browser che molte persone devono mai considerare oggi ...

var objectA = {}

è molto più veloce e, nella mia esperienza, più comunemente usato, quindi probabilmente è meglio adottare lo 'standard' e salvare un po 'di battitura.

Credo che sia {}stato raccomandato in uno dei video Javascript qui come una buona convenzione di codifica. newè necessario per l'eredità pseudoclassica. il var obj = {};modo in cui ti aiuta a ricordare che questo non è un linguaggio orientato agli oggetti classico ma prototipo. Quindi l'unica volta di cui avresti davvero bisogno newè quando stai usando le funzioni dei costruttori. Per esempio:

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

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

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

Quindi viene utilizzato in questo modo:

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

Un altro vantaggio dell'uso {}opposto new Objectè che è possibile utilizzarlo per eseguire letterali di oggetti in stile JSON.

Prestazioni di istanza di array

Se si desidera creare un array senza lunghezza:

var arr = []; è più veloce di var arr = new Array();

Se si desidera creare un array vuoto con una certa lunghezza:

var arr = new Array(x); è più veloce di var arr = []; arr[x-1] = undefined ;

Per i benchmark fare clic su: https://jsfiddle.net/basickarl/ktbbry5b/

Tuttavia non conosco l'impronta di memoria di entrambi, posso immaginare che new Array()occupi più spazio.

Questa è essenzialmente la stessa cosa. Usa quello che ritieni più conveniente.

OK , ci sono solo 2 modi diversi per fare la stessa cosa! Uno ha chiamato object literale l'altro è una funzione constructor!

Ma continua a leggere, ci sono un paio di cose che vorrei condividere:

L'uso {}rende il tuo codice più leggibile, durante la creazione di istanze di Objecto altre funzioni integrate sconsigliate ...

Inoltre, la funzione Oggetto ottiene parametri in quanto è una funzione, come Object(params)... ma{} è un modo puro per avviare un oggetto in JavaScript ...

L'utilizzo di object letteral rende il codice molto più pulito e facile da leggere per altri sviluppatori ed è in linea con le migliori pratiche in JavaScript ...

Mentre Object in Javascript può essere praticamente qualsiasi cosa, {}punta solo a oggetti javascript, per il test come funziona, fai di seguito nel tuo codice javascript o console:

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

Sorprendentemente, sta creando un numero!

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

E questo sta creando un 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"}

e questo strano risultato per String!

Quindi, se stai creando un oggetto, si consiglia di usare letterale oggetto, di avere un codice standard ed evitare qualsiasi incidente di codice come sopra, anche la {}mia esperienza in termini di prestazioni è migliore nella mia esperienza!