Crie um objeto vazio no JavaScript com {} ou o novo Object ()?

Existem duas maneiras diferentes de criar um objeto vazio no JavaScript:

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

Existe alguma diferença em como o mecanismo de script lida com eles? Existe algum motivo para usar um sobre o outro?

Da mesma forma, também é possível criar uma matriz vazia usando sintaxe diferente:

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

Objetos

Não há nenhum benefício em usar new Object();- o que {};pode tornar seu código mais compacto e mais legível.

Para definir objetos vazios, eles são tecnicamente iguais. A {}sintaxe é mais curta, mais limpa (menos Java-ish) e permite que você preencha instantaneamente o objeto em linha - da seguinte maneira:

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

Matrizes

Para matrizes, da mesma forma quase não há benefício em usar new Array();demais [];- com uma pequena exceção:

var emptyArray = new Array(100);

cria uma matriz de 100 itens com todos os slots que contêm undefined- o que pode ser bom / útil em determinadas situações (como (new Array(9)).join('Na-Na ') + 'Batman!').

Minha recomendação

1. Nunca use new Object();- é mais desajeitado {};e parece bobo.
2. Sempre use [];- exceto quando você precisar criar rapidamente uma matriz "vazia" com um comprimento predefinido.

Sim, há uma diferença, eles não são os mesmos. É verdade que você obterá os mesmos resultados, mas o mecanismo funcionará de maneira diferente para os dois. Um deles é um objeto literal e o outro é um construtor, duas maneiras diferentes de criar um objeto em javascript.

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

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

No JS, tudo é um objeto, mas você deve estar ciente do seguinte com o novo Object (): Ele pode receber um parâmetro e, dependendo desse parâmetro, criará uma string, um número ou apenas um objeto vazio.

Por exemplo new Object(1):, retornará um número. new Object("hello")retornará uma string, significa que o construtor de objetos pode delegar - dependendo do parâmetro - a criação do objeto para outros construtores como string, número, etc ... É altamente importante manter isso em mente ao gerenciar dados dinâmicos para criar objetos ..

Muitos autores recomendam não usar o construtor de objetos quando você pode usar uma certa notação literal, onde você terá certeza de que o que está criando é o que espera ter no seu código.

Eu sugiro que você faça uma leitura adicional sobre as diferenças entre notação literal e construtores em javascript para encontrar mais detalhes.

Eles têm o mesmo resultado final, mas eu simplesmente acrescentaria que o uso da sintaxe literal pode ajudar a se acostumar com a sintaxe do JSON (um subconjunto com sequências de caracteres da sintaxe do objeto literal do JavaScript), portanto, pode ser uma boa prática entrar em .

Outra coisa: você pode ter erros sutis se esquecer de usar o newoperador. Portanto, o uso de literais ajudará a evitar esse problema.

Por fim, isso dependerá da situação e também da preferência.

A sintaxe literal do objeto e da matriz {} / [] foi introduzida no JavaScript 1.2, portanto, não está disponível (e produzirá um erro de sintaxe) nas versões do Netscape Navigator anteriores à 4.0.

Meus dedos ainda usam o novo Array (), mas sou um homem muito velho. Felizmente, o Netscape 3 não é um navegador que muitas pessoas consideram hoje ...

var objectA = {}

é muito mais rápido e, na minha experiência, mais comumente usado, por isso é provavelmente melhor adotar o 'padrão' e salvar algumas digitações.

Acredito que {}foi recomendado em um dos vídeos em Javascript aqui como uma boa convenção de codificação. newé necessário para a herança pseudoclássica. o var obj = {};caminho ajuda a lembrá-lo de que essa não é uma linguagem clássica orientada a objetos, mas prototípica. Portanto, o único momento em que você realmente precisa newé quando estiver usando funções de construtores. Por exemplo:

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

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

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

Então é usado assim:

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

Outra vantagem de usar {}em oposição new Objecté que você pode usá-lo para executar literais de objetos no estilo JSON.

Desempenho de instanciação de matriz

Se você deseja criar uma matriz sem tamanho:

var arr = []; é mais rápido que var arr = new Array();

Se você deseja criar uma matriz vazia com um determinado comprimento:

var arr = new Array(x);é mais rápido que var arr = []; arr[x-1] = undefined;

Para benchmarks, clique no seguinte: https://jsfiddle.net/basickarl/ktbbry5b/

No entanto, não conheço a pegada de memória de ambos, posso imaginar que new Array()ocupa mais espaço.

Isso é essencialmente a mesma coisa. Use o que achar mais conveniente.

OK , existem apenas 2 maneiras diferentes de fazer a mesma coisa! Um chamado object literale o outro é uma função constructor!

Mas continue lendo, há algumas coisas que eu gostaria de compartilhar:

O uso {}torna seu código mais legível, enquanto Objectnão é recomendável criar instâncias ou outras funções internas ...

Além disso, a função Object obtém parâmetros como uma função, como Object(params)... mas {}é uma maneira pura de iniciar um objeto em JavaScript ...

Usar literal de objeto faz com que seu código pareça muito mais limpo e fácil de ler para outros desenvolvedores e está alinhado com as práticas recomendadas em JavaScript ...

Enquanto Object em Javascript pode ser quase qualquer coisa, {}apenas aponta para objetos javascript, para o teste de como ele funciona, faça abaixo no seu código javascript ou console:

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

Surpreendentemente, está criando um número!

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

E isso está criando uma matriz!

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 esse resultado estranho para String!

Portanto, se você estiver criando um objeto, é recomendável usar literal de objeto, ter um código padrão e evitar qualquer acidente de código como o descrito acima, também o desempenho {}é melhor na minha experiência!