¿Cómo inicializar la longitud de una matriz en JavaScript?

La mayoría de los tutoriales que he leído en matrices en JavaScript (incluidos w3schools y devguru ) sugieren que puede inicializar una matriz con una cierta longitud pasando un número entero al constructor de matrices utilizando la var test = new Array(4);sintaxis.

Después de usar esta sintaxis generosamente en mis archivos js, ejecuté uno de los archivos a través de jsLint , y se asustó:

Error: Problema en la línea 1, carácter 22: Se esperaba ')' y en su lugar vio '4'.
prueba var = nueva matriz (4);
Problema en la línea 1, carácter 23: Se esperaba ';' y en su lugar vi ')'.
prueba var = nueva matriz (4);
Problema en la línea 1, carácter 23: esperaba un identificador y en su lugar vio ')'.

Después de leer la explicación de jsLint de su comportamiento , parece que a jsLint realmente no le gusta la new Array()sintaxis y, en cambio, prefiere []al declarar matrices.

Entonces tengo un par de preguntas:

Primero, ¿por qué? ¿Corro algún riesgo al utilizar la new Array()sintaxis? ¿Hay incompatibilidades del navegador que debo tener en cuenta?

Y segundo, si cambio a la sintaxis de corchetes, ¿hay alguna forma de declarar una matriz y establecer su longitud en una sola línea, o tengo que hacer algo como esto:

var test = [];
test.length = 4;

1. ¿Por qué quieres inicializar la longitud? Teóricamente no hay necesidad de esto. Incluso puede dar lugar a un comportamiento confuso, porque todas las pruebas que usan el lengthpara averiguar si una matriz está vacía o no informarán que la matriz no está vacía.
   Algunas pruebas muestran que establecer la longitud inicial de las matrices grandes puede ser más eficiente si la matriz se llena después, pero la ganancia de rendimiento (si la hay) parece diferir de un navegador a otro.

2. A jsLint no le gusta new Array()porque el constructor es ambiguo.

   new Array(4);

   crea una matriz vacía de longitud 4. Pero

   new Array('4');

   crea una matriz que contiene el valor '4' .

Con respecto a su comentario: en JS no necesita inicializar la longitud de la matriz. Crece dinámicamente. Puede almacenar la longitud en alguna variable, p. Ej.

var data = [];
var length = 5; // user defined length

for(var i = 0; i < length; i++) {
    data.push(createSomeObject());
}

• Array(5) le da una matriz con longitud 5 pero sin valores, por lo tanto, no puede iterar sobre ella.

• Array.apply(null, Array(5)).map(function () {}) le ofrece una matriz con longitud 5 e indefinida como valores, ahora se puede repetir.

• Array.apply(null, Array(5)).map(function (x, i) { return i; }) le da una matriz con longitud 5 y valores 0,1,2,3,4.

• Array(5).forEach(alert)no hace nada, Array.apply(null, Array(5)).forEach(alert)te da 5 alertas

• ES6nos da Array.fromasí que ahora también puedes usarArray.from(Array(5)).forEach(alert)

• Si desea inicializar con un cierto valor, es bueno saberlo ...
  Array.from('abcde'), Array.from('x'.repeat(5))
  oArray.from({length: 5}, (v, i) => i) // gives [0, 1, 2, 3, 4]

Con ES2015.fill() ahora puede simplemente hacer:

// `n` is the size you want to initialize your array
// `0` is what the array will be filled with (can be any other value)
Array(n).fill(0)

Lo cual es mucho más conciso que Array.apply(0, new Array(n)).map(i => value)

Es posible dejar caer el 0en .fill()y ejecutar sin argumentos, que va a llenar la matriz con undefined. ( Sin embargo, esto fallará en Typecript )

[...Array(6)].map(x => 0);
// [0, 0, 0, 0, 0, 0]

O

Array(6).fill(0);
// [0, 0, 0, 0, 0, 0]

Nota: no puede hacer bucles de espacios vacíos, es decir Array(4).forEach(() => …)

O

( mecanografiado seguro )

Array(6).fill(null).map((_, i) => i);
// [0, 1, 2, 3, 4, 5]

O

Método clásico que utiliza una función (funciona en cualquier navegador)

function NewArray(size) {
    var x = [];
    for (var i = 0; i < size; ++i) {
        x[i] = i;
        return x;
    }
}

var a = NewArray(10);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Crear matrices anidadas

Al crear una matriz 2D con la fillintuitiva debe crear nuevas instancias. Pero lo que realmente sucederá es que la misma matriz se almacenará como referencia.

var a = Array(3).fill([6]);
// [  [6], [6], [6]  ]

a[0].push(9);
// [  [6, 9], [6, 9], [6, 9]  ]

Solución

var a = [...Array(3)].map(x => []);

a[0].push(4, 2);
// [  [4, 2], [], []  ]

Entonces, una matriz 3x2 se verá así:

[...Array(3)].map(x => Array(2).fill(0));
// [  [0, 0], [0, 0], [0, 0]  ]

Matriz N-dimensional

function NArray(...dimensions) {
    var index = 0;
    function NArrayRec(dims) {
        var first = dims[0], next = dims.slice().splice(1); 
        if(dims.length > 1) 
            return Array(dims[0]).fill(null).map((x, i) => NArrayRec(next ));
        return Array(dims[0]).fill(null).map((x, i) => (index++));
    }
    return NArrayRec(dimensions);
}

var arr = NArray(3, 2, 4);
// [   [  [ 0,  1,  2,  3 ] , [  4,  5,  6,  7]  ],
//     [  [ 8,  9,  10, 11] , [ 12, 13, 14, 15]  ],
//     [  [ 16, 17, 18, 19] , [ 20, 21, 22, 23]  ]   ]

Inicializa un tablero de ajedrez

var Chessboard = [...Array(8)].map((x, j) => {
    return Array(8).fill(null).map((y, i) => {
        return `${String.fromCharCode(65 + i)}${8 - j}`;
    });
});

// [ [A8, B8, C8, D8, E8, F8, G8, H8],
//   [A7, B7, C7, D7, E7, F7, G7, H7],
//   [A6, B6, C6, D6, E6, F6, G6, H6],
//   [A5, B5, C5, D5, E5, F5, G5, H5],
//   [A4, B4, C4, D4, E4, F4, G4, H4],
//   [A3, B3, C3, D3, E3, F3, G3, H3],
//   [A2, B2, C2, D2, E2, F2, G2, H2],
//   [A1, B1, C1, D1, E1, F1, G1, H1] ]

El más corto:

[...Array(1000)]

ES6 presenta lo Array.fromque le permite crear un objeto Arraydesde cualquier objeto "tipo matriz" o iterable :

Array.from({length: 10}, (x, i) => i);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

En este caso {length: 10}representa la definición mínima de un objeto "tipo matriz" : un objeto vacío con solo una lengthpropiedad definida.

Array.from permite un segundo argumento para mapear sobre la matriz resultante.

Esto inicializará la propiedad de longitud a 4:

var x = [,,,,];

Me sorprende que no se haya sugerido una solución funcional que le permita establecer la longitud en una línea. Lo siguiente se basa en UnderscoreJS:

var test = _.map(_.range(4), function () { return undefined; });
console.log(test.length);

Por las razones mencionadas anteriormente, evitaría hacer esto a menos que quisiera inicializar la matriz a un valor específico. Es interesante observar que hay otras bibliotecas que implementan el rango, incluidos Lo-dash y Lazy, que pueden tener diferentes características de rendimiento.

Por favor, la gente todavía no abandona tus viejos hábitos. Hay una gran diferencia en la velocidad entre asignar memoria una vez y luego trabajar con las entradas en esa matriz (como antes), y asignarla muchas veces a medida que crece una matriz (que es inevitablemente lo que el sistema hace bajo el capó con otros métodos sugeridos) .

Nada de esto importa, por supuesto, hasta que desee hacer algo genial con matrices más grandes. Entonces lo hace.

Al ver que todavía no parece haber ninguna opción en JS en este momento para establecer la capacidad inicial de una matriz, utilizo lo siguiente ...

var newArrayWithSize = function(size) {
  this.standard = this.standard||[];
  for (var add = size-this.standard.length; add>0; add--) {
   this.standard.push(undefined);// or whatever
  }
  return this.standard.slice(0,size);
}

Hay compensaciones involucradas:

• Este método tarda tanto como los demás para la primera llamada a la función, pero muy poco tiempo para las llamadas posteriores (a menos que solicite una matriz más grande).
• La standardmatriz reserva permanentemente tanto espacio como la matriz más grande que haya solicitado.

Pero si encaja con lo que estás haciendo, puede haber una recompensa. Puestos informales de tiempo

for (var n=10000;n>0;n--) {var b = newArrayWithSize(10000);b[0]=0;}

a bastante velocidad (unos 50 ms para el 10000 dado que con n = 1000000 tardó unos 5 segundos), y

for (var n=10000;n>0;n--) {
  var b = [];for (var add=10000;add>0;add--) {
    b.push(undefined);
  }
}

más de un minuto (aproximadamente 90 segundos para el 10000 en la misma consola de Chrome, o aproximadamente 2000 veces más lento). Esa no solo será la asignación, sino también los 10000 empujes, bucles, etc.

(esto probablemente fue mejor como comentario, pero se hizo demasiado largo)

Entonces, después de leer esto, tenía curiosidad por saber si la preasignación era realmente más rápida, porque en teoría debería serlo. Sin embargo, este blog dio algunos consejos que lo desaconsejan http://www.html5rocks.com/en/tutorials/speed/v8/ .

Así que todavía no estoy seguro, lo puse a prueba. Y resulta que, de hecho, parece ser más lento.

var time = Date.now();
var temp = [];
for(var i=0;i<100000;i++){
    temp[i]=i;
}
console.log(Date.now()-time);


var time = Date.now();
var temp2 = new Array(100000);
for(var i=0;i<100000;i++){
    temp2[i] = i;
}
console.log(Date.now()-time); 

Este código produce lo siguiente después de algunas ejecuciones ocasionales:

$ node main.js 
9
16
$ node main.js 
8
14
$ node main.js 
7
20
$ node main.js 
9
14
$ node main.js 
9
19

var arr=[];
arr[5]=0;
alert("length="+arr.length); // gives 6

Aquí hay otra solución

var arr = Array.apply( null, { length: 4 } );
arr;  // [undefined, undefined, undefined, undefined] (in Chrome)
arr.length; // 4

El primer argumento de apply()es un enlace de este objeto, que no nos importa aquí, así que lo configuramos en null.

Array.apply(..)llama a la Array(..)función y extiende el { length: 3 }valor del objeto como sus argumentos.

El constructor de matrices tiene una sintaxis ambigua , y JSLint solo hiere tus sentimientos después de todo.

Además, su código de ejemplo está roto, la segunda varinstrucción generará un SyntaxError. Estás configurando la propiedad lengthde la matriz test, por lo que no hay necesidad de otra var.

En cuanto a sus opciones, array.lengthes la única "limpia". La pregunta es, ¿por qué necesita establecer el tamaño en primer lugar? Intenta refactorizar tu código para deshacerte de esa dependencia.

Suponiendo que la longitud de la matriz es constante. En Javascript, esto es lo que hacemos:

const intialArray = new Array(specify the value);

Como se explicó anteriormente, el uso new Array(size)es algo peligroso. En lugar de usarlo directamente, colóquelo dentro de una "función creadora de matriz". Puede asegurarse fácilmente de que esta función esté libre de errores y evitar el peligro de llamar new Array(size)directamente. Además, puede darle un valor inicial predeterminado opcional. Esta createArrayfunción hace exactamente eso:

function createArray(size, defaultVal) {
    var arr = new Array(size);
    if (arguments.length == 2) {
        // optional default value
        for (int i = 0; i < size; ++i) {
            arr[i] = defaultVal;
        }
    }
    return arr;
}

En la mayoría de las respuestas se recomienda a fillla matriz porque de lo contrario "no se puede iterar sobre ella" , pero esto no es cierto. Puede iterar una matriz vacía, pero no con forEach. Mientras que los bucles, for of y for i loops funcionan bien.

const count = Array(5);

No funciona.

console.log('---for each loop:---');
count.forEach((empty, index) => {
    console.log(`counting ${index}`);
});

Estos trabajan:

console.log('---for of loop:---');
for (let [index, empty] of count.entries()) {
  console.log(`counting for of loop ${index}`);
}

console.log('---for i loop:---');
for (let i = 0, il = count.length; i < il; ++i) {
  console.log(`counting for i loop ${i}`);
}

console.log('---while loop:---');
let index = 0;
while (index < count.length) { 
  console.log(`counting while loop ${index}`); 
  index++; 
}

Mira este violín con los ejemplos anteriores.

También los angulares *ngForfuncionan bien con una matriz vacía:

<li *ngFor="let empty of count; let i = index" [ngClass]="
  <span>Counting with *ngFor {{i}}</span>
</li>

Puede establecer la longitud de la matriz usando array.length = youValue

Entonces sería

var myArray = [];
myArray.length = yourValue;

new ArrayEste código demuestra la razón por la que no debe usar :

var Array = function () {};

var x = new Array(4);

alert(x.length);  // undefined...

Algún otro código podría interferir con la variable Array. Sé que es un poco descabellado que alguien escriba ese código, pero aún así ...

Además, como dijo Felix King, la interfaz es un poco inconsistente y podría generar algunos errores muy difíciles de rastrear.

Si desea una matriz con longitud = x, llena de indefinido (como new Array(x)lo haría), podría hacer esto:

var x = 4;
var myArray = [];
myArray[x - 1] = undefined;

alert(myArray.length); // 4