Cómo llenar una matriz con ceros u objetos en JavaScript

En JavaScript, puede usar el Array.fill() método para llenar una matriz con un cero o cualquier otro valor como un objeto o una cadena. Este método reemplaza todos los elementos de una matriz con el valor con el que desea completar la matriz y devuelve la matriz modificada.

Por ejemplo, si desea crear una matriz con cinco ranuras y completarla con 0 , puede hacer lo siguiente:

const array = new Array(5).fill(0);

console.log(array);

// [0, 0, 0, 0, 0]

También puede especificar la posición de donde comenzar (predeterminado 0 ) y final (predeterminado array.length ) el relleno. De forma predeterminada, se rellenarán todos los elementos. Aquí hay un ejemplo que especifica las posiciones de llenado:

const fruits = ['🍕', '🍔', '🍰', '🍩', '🍣'];

const filled = fruits.fill('🎂', 2, 4);

console.log(filled);

// ['🍕', '🍔', '🎂', '🎂', '🍣']

El Array.fill() El método funciona muy bien para valores inmutables de JavaScript como cadenas, números y booleanos. ¿Qué sucede si desea llenar una matriz con objetos?

const filled = new Array(3).fill({ pizza: '🍕' });

console.log(filled);

// [{ pizza: '🍕' }, { pizza: '🍕' }, { pizza: '🍕' }]

El ejemplo anterior llena una matriz con objetos, pero cada ranura en la matriz se refiere al mismo objeto. Entonces, si modifica el objeto como se muestra a continuación:

filled[0].pizza = '🍰';

Actualizará todos los objetos de la matriz porque todos hacen referencia al mismo objeto:

[{ pizza: '🍰' }, { pizza: '🍰' }, { pizza: '🍰' }]

Para llenar una matriz con objetos, debería usar el método Array.from(). Este método crea una nueva matriz a partir de un objeto similar a una matriz o iterable:

const filled = Array.from({ length: 3 }, () => ({ pizza: '🍕' }));

filled[0].pizza = '🍰';

console.log(filled);

// [{ pizza: '🍰' }, { pizza: '🍕' }, { pizza: '🍕' }]

Compatibilidad con navegadores

El Array.fill() El método es parte de ES6 y solo funciona en navegadores modernos. Sin embargo, puede usar un polyfill para admitir navegadores antiguos como Internet Explorer.

Para obtener más información sobre las matrices de JavaScript y cómo usarlas para almacenar múltiples piezas de información en una sola variable, consulte este artículo.