¿Crear un objeto vacío en JavaScript con {} o un nuevo Object ()?

Hay dos formas diferentes de crear un objeto vacío en JavaScript:

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

¿Hay alguna diferencia en cómo los maneja el motor de script? ¿Hay alguna razón para usar uno sobre el otro?

Del mismo modo, también es posible crear una matriz vacía utilizando una sintaxis diferente:

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

Objetos

El uso no tiene ningún beneficio new Object();, mientras que {};puede hacer que su código sea más compacto y más legible.

Para definir objetos vacíos son técnicamente iguales. La {}sintaxis es más corta, más ordenada (menos Java-ish) y le permite llenar instantáneamente el objeto en línea, de esta manera:

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

Matrices

Para las matrices, de manera similar, casi no hay ningún beneficio al usar en new Array();exceso [];, con una pequeña excepción:

var emptyArray = new Array(100);

crea una matriz larga de 100 elementos con todas las ranuras que contienen undefined, lo que puede ser agradable / útil en ciertas situaciones (como (new Array(9)).join('Na-Na ') + 'Batman!').

Mi recomendación

1. Nunca lo use new Object();: es más grueso que {};y parece tonto.
2. Utilice siempre [];, excepto cuando necesite crear rápidamente una matriz "vacía" con una longitud predefinida.

Sí, hay una diferencia, no son lo mismo. Es cierto que obtendrá los mismos resultados, pero el motor funciona de manera diferente para ambos. Uno de ellos es un objeto literal, y el otro es un constructor, dos formas diferentes de crear un objeto en javascript.

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

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

En JS todo es un objeto, pero debe tener en cuenta lo siguiente con el nuevo Object (): puede recibir un parámetro y, según ese parámetro, creará una cadena, un número o simplemente un objeto vacío.

Por ejemplo:, new Object(1)devolverá un Número. new Object("hello")devolverá una cadena, significa que el constructor del objeto puede delegar -dependiendo del parámetro- la creación del objeto a otros constructores como cadena, número, etc. Es muy importante tener esto en cuenta cuando administra datos dinámicos para crear objetos ..

Muchos autores recomiendan no usar el constructor de objetos cuando puede usar una cierta notación literal en su lugar, donde estará seguro de que lo que está creando es lo que espera tener en su código.

Le sugiero que lea más sobre las diferencias entre la notación literal y los constructores en JavaScript para encontrar más detalles.

Estos tienen el mismo resultado final, pero simplemente agregaría que usar la sintaxis literal puede ayudar a uno a acostumbrarse a la sintaxis de JSON (un subconjunto de sintaxis literal de sintaxis de JavaScript), por lo que podría ser una buena práctica entrar .

Otra cosa: es posible que tenga errores sutiles si olvida usar el newoperador. Entonces, usar literales lo ayudará a evitar ese problema.

En última instancia, dependerá de la situación y de las preferencias.

La sintaxis literal de objeto y matriz {} / [] se introdujo en JavaScript 1.2, por lo que no está disponible (y producirá un error de sintaxis) en las versiones de Netscape Navigator anteriores a 4.0.

Mis dedos todavía prefieren decir nuevo Array (), pero soy un hombre muy viejo. Afortunadamente, Netscape 3 no es un navegador que muchas personas tienen que considerar hoy ...

var objectA = {}

es mucho más rápido y, en mi experiencia, se usa más comúnmente, por lo que probablemente sea mejor adoptar el 'estándar' y guardar algo de escritura.

Creo que {}fue recomendado en uno de los videos Javascript aquí como una buena convención de codificación. newEs necesario para la herencia pseudoclásica. el var obj = {};camino ayuda a recordarle que este no es un lenguaje clásico orientado a objetos sino un prototipo. Por lo tanto, el único momento que realmente necesitaría newes cuando está utilizando funciones de constructores. Por ejemplo:

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

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

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

Luego se usa así:

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

Otra ventaja de usar {}como opuesto a new Objectes que puede usarlo para hacer literales de objetos de estilo JSON.

Rendimiento de instanciación de matriz

Si desea crear una matriz sin longitud:

var arr = []; es más rápido que var arr = new Array();

Si desea crear una matriz vacía con una cierta longitud:

var arr = new Array(x);es más rápido que var arr = []; arr[x-1] = undefined;

Para puntos de referencia, haga clic en lo siguiente: https://jsfiddle.net/basickarl/ktbbry5b/

Sin embargo, no conozco la huella de memoria de ambos, me imagino que new Array()ocupa más espacio.

Esto es esencialmente lo mismo. Use lo que le parezca más conveniente.

OK , ¡solo hay 2 formas diferentes de hacer lo mismo! ¡Uno llamado object literaly el otro es una función constructor!

Pero sigue leyendo, hay un par de cosas que me gustaría compartir:

El uso {}hace que su código sea más legible, al tiempo que crea instancias Objectu otras funciones integradas no recomendadas ...

Además, la función Object obtiene parámetros ya que es una función, como Object(params)... pero {}es una forma pura de iniciar un objeto en JavaScript ...

El uso de objetos literales hace que su código se vea mucho más limpio y fácil de leer para otros desarrolladores y está en línea con las mejores prácticas en JavaScript ...

Si bien Object en Javascript puede ser casi cualquier cosa, {}solo apunta a objetos javascript, para probar cómo funciona, haga lo siguiente en su código o consola javascript:

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

Sorprendentemente, ¡está creando un Número!

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

¡Y esto está creando una 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"}

y este extraño resultado para String!

Entonces, si está creando un objeto, se recomienda usar un objeto literal, para tener un código estándar y evitar cualquier accidente de código como el anterior, ¡también el uso inteligente en cuanto al rendimiento {}es mejor en mi experiencia!