Pregunta ¿Cuál es la diferencia entre "Array ()" y "[]" al declarar una matriz de JavaScript?


¿Cuál es la verdadera diferencia entre declarar una matriz como esta:

var myArray = new Array();

y

var myArray = [];

679
2018-05-31 11:23


origen


Respuestas:


Hay una diferencia, pero no hay diferencia en ese ejemplo.

Usando el método más detallado: new Array() tiene una opción adicional en los parámetros: si pasa un número al constructor, obtendrá una matriz de esa longitud:

x = new Array(5);
alert(x.length); // 5

Para ilustrar las diferentes formas de crear una matriz:

var a = [],            // these are the same
    b = new Array(),   // a and b are arrays with length 0

    c = ['foo', 'bar'],           // these are the same
    d = new Array('foo', 'bar'),  // c and d are arrays with 2 strings

    // these are different:
    e = [3]             // e.length == 1, e[0] == 3
    f = new Array(3),   // f.length == 3, f[0] == undefined

;

782
2018-05-31 11:25



La diferencia entre crear una matriz con la matriz implícita y el constructor de la matriz es sutil pero importante.

Cuando creas una matriz usando

var a = [];

Le está diciendo al intérprete que cree una nueva matriz en tiempo de ejecución. No es necesario ningún procesamiento adicional. Hecho.

Si utiliza:

var a = new Array();

Le estás diciendo al intérprete, quiero llamar al constructor "Array"y generar un objeto. Luego busca a través de su contexto de ejecución para encontrar el constructor para llamar, y lo llama, creando su matriz.

Puedes pensar "Bueno, esto no importa en absoluto. ¡Son lo mismo!". Desafortunadamente no puedes garantizar eso.

Toma el siguiente ejemplo:

function Array() {
    this.is = 'SPARTA';
}

var a = new Array();
var b = [];

alert(a.is);  // => 'SPARTA'
alert(b.is);  // => undefined
a.push('Woa'); // => TypeError: a.push is not a function
b.push('Woa'); // => 1 (OK)

En el ejemplo anterior, la primera llamada alertará a 'SPARTA' como es de esperar. El segundo no lo hará. Terminarás viendo indefinido. También observará que b contiene todas las funciones del objeto Array nativo, como pushdonde el otro no.

Si bien puede esperar que esto suceda, simplemente ilustra el hecho de que [] no es lo mismo que new Array().

Probablemente sea mejor simplemente usar [] si sabes que solo quieres una matriz. Tampoco sugiero dar la vuelta y redefinir Array ...


706
2017-08-13 19:00



Curiosamente, new Array(size) es casi 2 veces más rápido que [] en Chrome, y más o menos lo mismo en FF e IE (medido al crear y llenar una matriz). Solo importa si conoce el tamaño aproximado de la matriz. Si agrega más elementos que la longitud que ha otorgado, se perderá el aumento de rendimiento.


40
2018-06-28 12:35



Para más información, la siguiente página describe por qué nunca necesita usar new Array()

Nunca necesitas usar new Object() en   JavaScript. Usa el objeto literal {}   en lugar. Del mismo modo, no use new Array(),   usa la matriz literal []   en lugar. Arrays en JavaScript funcionan   nada como las matrices en Java, y   el uso de la sintaxis similar a Java   confundirte.

No utilice new Number, new String, o    new Boolean. Estas formas producen   envoltorios de objetos innecesarios. Solo usa   literales simples en su lugar.

También echa un vistazo a los comentarios, el new Array(length) la forma no sirve para ningún propósito útil (al menos en las implementaciones actuales de JavaScript).


33
2018-05-31 16:29



Hay una gran diferencia que nadie mencionó.

Podrías pensar que new Array(2) es equivalente a [undefined, undefined] antes porque tenemos

new Array(2).length           // 2
new Array(2)[0] === undefined // true
new Array(2)[1] === undefined // true

¡PERO NO LO ES!

Intentemos map():

[undefined, undefined].map(e => 1)  // [1, 1]
new Array(2).map(e => 1)            // "(2) [undefined × 2]" in Chrome

¿Ver? ¡Es diferente! Pero ¿por qué es eso?

De acuerdo con ES6 Spec 22.1.1.2, Array(len) solo crea una nueva matriz con length ajustado a leny nada más. Por lo tanto, no hay un elemento real dentro de la nueva matriz.

Mientras la función map(), de acuerdo con la especificación 22.1.3.15 primero verificaría HasProperty luego llama a la devolución de llamada, pero resulta que:

new Array(2).hasOwnProperty(0) // false
[undefined, undefined].hasOwnProperty(0) // true

Es por eso que no se puede esperar que las funciones de iteración funcionen como de costumbre en la matriz creada a partir de new Array(len).

Por cierto, Safari y Firefox tienen una expresión mucho mejor a esto:

// Safari
new Array(2)             // [](2)
new Array(2).map(e => 1) // [](2) 
[undefined, undefined]   // [undefined, undefined] (2) 

// Firefox
new Array(2)             // Array [ <2 empty slots> ]
new Array(2).map(e => 1) // Array [ <2 empty slots> ]
[undefined, undefined]   // Array [ undefined, undefined ]

Ya he enviado un problema a Chrome para pedirles que corrijan este registro confuso: https://bugs.chromium.org/p/chromium/issues/detail?id=732021

ACTUALIZACIÓN: Ya está arreglado. Chrome ahora se registra como

new Array(2)             // (2) [empty × 2]

28
2018-06-10 09:26



Para entender mejor [] y new Array():

> []
  []
> new Array()
  []
> [] == []
  false
> [] === []
  false
> new Array() == new Array()
  false
> new Array() === new Array()
  false
> typeof ([])
  "object"
> typeof (new Array())
  "object"
> [] === new Array()
  false
> [] == new Array()
  false

El resultado anterior es de la consola Google Chrome en Windows 7.


8
2017-07-27 22:56



El primero es la llamada al constructor de objetos por defecto. Puede usar sus parámetros si lo desea.

var array = new Array(5); //initialize with default length 5

El segundo te da la posibilidad de crear una matriz no vacía:

var array = [1, 2, 3]; // this array will contain numbers 1, 2, 3.

7
2018-05-31 11:53



Puedo explicarlo de una manera más específica comenzando con este ejemplo que está basado en el buen de Fredrik.

var test1 = [];
test1.push("value");
test1.push("value2");

var test2 = new Array();
test2.push("value");
test2.push("value2");

alert(test1);
alert(test2);
alert(test1 == test2);
alert(test1.value == test2.value);

Acabo de agregar otro valor a las matrices e hice cuatro alertas: El primero y el segundo son para darnos el valor almacenado en cada matriz, para estar seguro de los valores. Ellos devolverán lo mismo! Ahora prueba el tercero, devuelve falso, eso es porque

JS trata test1 como un VARIABLE con un tipo de datos de matrizy trata test2 como un OBJETO con la funcionalidad de una matrizy   Aquí hay algunas pequeñas diferencias.

La primera diferencia es cuando llamamos test1 llama a una variable sin pensar, solo devuelve los valores que están almacenados en esta variable sin tener en cuenta su tipo de datos. Pero, cuando llamamos test2 llama al Formación() función y luego almacena nuestro "Empujado" valores en su "Valor" propiedad, y lo mismo ocurre cuando alertamos test2, devuelve el "Valor" propiedad del objeto de la matriz.

Entonces, cuando comprobamos si test1 es igual a test2, por supuesto, nunca volverán a ser verdaderos, uno es una función y el otro es una variable (con un tipo de matriz), ¡incluso si tienen el mismo valor!

Para estar seguro de eso, pruebe la 4ª alerta, con el valor .añadido; volverá verdadero. En este caso le decimos a JS: "Sin tener en cuenta el tipo de contenedor, ya sea que se trate de una función o una variable, compare los valores que están almacenados en cada contenedor y cuéntenos lo que ha visto". eso es exactamente lo que sucede.

Espero haber dicho la idea detrás de eso claramente, y disculparme por mi mal inglés.


4
2018-05-06 16:52



El primero es la llamada al constructor de objetos por defecto.más utilizado para valores dinámicos.

var array = new Array(length); //initialize with default length

la segunda matriz se usa al crear valores estáticos

var array = [red, green, blue, yellow, white]; // this array will contain values.

2
2017-08-31 17:06