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

Question

Hay dos formas diferentes para 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 una sobre la otra?

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

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

Answer 1

Objetos

No es beneficioso utilizar 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 de {} es más corta, más ordenada (menos Java-ish) y le permite rellenar instantáneamente el objeto en línea, como por ejemplo:

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

Arrays

Para las matrices, casi no hay beneficios en el uso de new Array (); sobre []; , con una pequeña excepción:

var emptyArray = new Array(100);

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

Mi recomendación

1. Nunca uses new Object (); - es más desaliñado que '{}' y parece tonto.
2. Siempre use []; , excepto cuando necesite crear rápidamente un " vacío " matriz con una longitud predefinida.

Answer 2

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 debes tener en cuenta lo siguiente con el nuevo Objeto (): puede recibir un parámetro y, dependiendo de ese parámetro, creará una cadena, un número o simplemente un vacío. objeto.

Por ejemplo: new Object (1) , devolverá un Número. new Object (" hello ") devolverá una cadena, esto 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 administras datos dinámicos para crear objetos.

Muchos autores recomiendan no usar el constructor de objetos cuando puedes usar una cierta notación literal, en donde estarás seguro de que lo que estás creando es lo que esperas tener en tu código.

Le sugiero que haga una lectura adicional sobre las diferencias entre la notación literal y los constructores en javascript para encontrar más detalles.

Answer 3

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

Otra cosa: puede tener errores sutiles si olvida utilizar el operador new . Por lo tanto, usar literales te ayudará a evitar ese problema.

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

Answer 4

La sintaxis literal del objeto y la 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 aún están predeterminados para decir nueva matriz (), pero soy un hombre muy viejo. Afortunadamente, Netscape 3 no es un navegador que muchas personas tengan que considerar hoy ...

Answer 5

var objectA = {}

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

Answer 6

Creo que se recomendó {} en uno de los videos de Javascript en aquí como una buena convención de codificación. new es necesario para la herencia pseudoclásica. La forma var obj = {}; ayuda a recordarle que este no es un lenguaje clásico orientado a objetos, sino uno prototípico. Por lo tanto, la única vez que realmente necesitaría nuevo es cuando está usando 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 || '';
}

Entonces se usa así:

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

Otra ventaja de usar {} como oposición a nuevo Objeto es que puedes usarlo para hacer literales de objetos de estilo JSON.

Answer 7

Rendimiento de creación de instancias 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 ver los puntos de referencia, haga clic en lo siguiente: https://jsfiddle.net/basickarl/ktbbry5b/

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

Answer 8

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

Answer 9

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

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

El uso de {} hace que su código sea más legible, al tiempo que se crean instancias de Object u otras funciones integradas que no se recomiendan ...

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

El uso del objeto literal 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 el objeto en Javascript puede ser casi cualquier cosa, {} solo apunta a objetos javascript, para la prueba de cómo funciona, haz lo siguiente en tu 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 resultado extraño para String !

Por lo tanto, si está creando un objeto, se recomienda usar el literal del objeto, tener un código estándar y evitar cualquier accidente de código como el de arriba.