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

370

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()
Jonas Pegerfalk
fonte
6
Aviso: há uma pequena diferença que pode causar bugs muito irritantes! Criar um objeto vazio atribuindo-o a "{}" em um protótipo de Objeto será a mesma instância de Objeto em todas as instâncias de Objeto criadas por um operador "novo". Enquanto você usa "new Object ({})", você terá instâncias diferentes.
peterh - Restabelece Monica 16/01
Vale a pena mencionar que, para além var objectA = {} var objectB = new Object()existe uma terceira construção que irá produzir o mesmo resultado:var objectC = Object.create(Object.prototype);
kalitsov
{}e [] use em {}vez de new Object(). Use em []vez de new Array(). Use matrizes quando os nomes dos membros forem inteiros seqüenciais. Use objetos quando os nomes dos membros forem sequências ou nomes arbitrários. fonte
ilgaar
new Object()e {}não são objetos completamente vazios, são objetos que possuem o Object.prototype. Você pode usar Object.create(null)para um objeto realmente vazio (pelo menos de acordo com os docs Mozilla: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/... )

Respostas:

459

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.
Már Örlygsson
fonte
22
Mesmo se você usar a sintaxe Matriz (100), essa mesma matriz, na posição 101, não terá definição nela; a única coisa que esse número realmente faz é alterar o valor da propriedade length.
Jason Bunting
6
@ Pablo não há nada de inválido new Array(100). Leia a literatura: developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…
Már Örlygsson
9
@ Pablo Eu não tenho idéia de qual é o seu argumento. Como Douglas Crockford, eu recomendo usar []. Não há argumento lá. Você, no entanto, argumentou que isso new Array(100)é "inválido", o que é falso.
23411 Már Örlygsson
10
Além disso, estar ciente de que new Array(1,2,3)resulta em [1,2,3], mas new Array(1)não não resultam em [1]; assim, a semântica de Arrayé inconsistente e desnecessariamente confusa.
21414 Dancrumb
3
Eu acrescentaria que Object.create(null)pode ser útil para criar um objeto em branco, enquanto { }herda do protótipo de objeto.
Miau
90

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.

Guillermo Snipe
fonte
A notação literal é de fato mais legível e concisa para criar objetos de dados dinâmicos.
Sid
12

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.

Jason Bunting
fonte
8

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 ...

bobince
fonte
11
Netscape 3? Cara, isso foi no século anterior ! :-D
Tomalak
8
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.

Bobby Jack
fonte
11
Mais rápido para executar ou apenas mais rápido para digitar?
Hippietrail
Bem, na verdade, eu quis dizer "para digitar", mas, dado o tempo de análise extra, provavelmente cada tão-pouco mais rápida execução-wise, também :-)
Bobby Jack
2
Além disso, os literais geralmente são criados no momento da análise, enquanto new Objectdevem ser executados no tempo de execução.
Phrogz
8

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.

Thedric Walker
fonte
7

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.

K - A toxicidade no SO está crescendo.
fonte
arr = new Array(x)é equivalente a arr = []; arr.length = x;, não atribuir o x-1índice com undefined.
Bergi
2

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

Tomalak
fonte
Talvez eu esteja me aprofundando muito em javascript aqui, mas eles são iguais? O {proto} de não Objecté nulo, enquanto o {proto} de {}é 'Object.prototype'?
Izhaki
@ Izhaki O protótipo de Objecté nulo, está correto. Isso porque Objecttermina a cadeia de protótipos. As instâncias de objeto, no entanto, não têm um protótipo, apenas os construtores têm um. E (new Object()).constructor === ({}).constructor->true
Tomalak
Então isso está incorreto?
Izhaki
Aqui está o meu ponto: new Object()produz uma instância de objeto em branco. {}gera uma instância de objeto em branco. Ambas as instâncias são absolutamente indistinguíveis. O exemplo ao qual você vincula faz outra coisa (modifica a cadeia de protótipos) e realmente não se aplica aqui - ou eu não entendo seu argumento.
Tomalak
1

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!

Alireza
fonte
você é Dezfooli? No Irã?
Ehsan
Oi Ehsan, sim, mas eu não estou morando no Irã, companheiro, você tem um ótimo perfil aqui! Prazer em conhecê-lo ...
Alireza
posso salvar o seu número de telefone e obter ajuda sobre programação?
Ehsan
Vejo você usar telegrama.
Ehsan
Sim, claro, podemos compartilhar algum conhecimento sobre telegrama, com certeza! ___
Alireza