Array.prototype.fill()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

El método fill() cambia todos los elementos en un arreglo por un valor estático, desde el índice start (por defecto 0) hasta el índice end (por defecto array.length). Devuelve el arreglo modificado.

Pruébalo

const array1 = [1, 2, 3, 4];

// Fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// Expected output: Array [1, 2, 0, 0]

// Fill with 5 from position 1
console.log(array1.fill(5, 1));
// Expected output: Array [1, 5, 5, 5]

console.log(array1.fill(6));
// Expected output: Array [6, 6, 6, 6]

Sintaxis

arr.fill(value[, start = 0[, end = this.length]])

Parámetros

value

Valor con el que se va a rellenar el arreglo. (Nótese que todos los elementos en el arreglo tendrán este mismo valor).

start Opcional

Índice inicial, por defecto 0.

end Opcional

Índice final, por defecto this.length.

Valor de retorno

El arreglo modificado, rellenado con valor.

Descripción

  • Si start es negativo, se interpreta como array.length + start.
  • Si end es negativo, se interpreta como array.length + end.
  • fill es genérico de forma intencional: no requiere que su valor this sea un objeto Array.
  • fill es un método mutador: modifica el arreglo sobre el que se invoca; no devuelve una copia de éste.
  • Si el primer parámetro es un objeto, copia su referencia y rellena el arreglo con referencias a dicho objeto.

Ejemplos

js
[1, 2, 3].fill(4); // [4, 4, 4]
[1, 2, 3].fill(4, 1); // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2); // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3); // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2); // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5); // [1, 2, 3]
Array(3).fill(4); // [4, 4, 4]
[].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3}

// Objects by reference.
var arr = Array(3).fill({}); // [{}, {}, {}];
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

Polyfill

js
if (!Array.prototype.fill) {
  Object.defineProperty(Array.prototype, "fill", {
    value: function (value) {
      // Pasos 1-2.
      if (this == null) {
        throw new TypeError("esto es nulo o no definido");
      }

      var O = Object(this);

      // Pasos 3-5.
      var len = O.length >>> 0;

      // Pasos 6-7.
      var start = arguments[1];
      var relativeStart = start >> 0;

      // Paso 8.
      var k =
        relativeStart < 0
          ? Math.max(len + relativeStart, 0)
          : Math.min(relativeStart, len);

      // Pasos 9-10.
      var end = arguments[2];
      var relativeEnd = end === undefined ? len : end >> 0;

      // Paso 11.
      var final =
        relativeEnd < 0
          ? Math.max(len + relativeEnd, 0)
          : Math.min(relativeEnd, len);

      // Paso 12.
      while (k < final) {
        O[k] = value;
        k++;
      }

      // Paso 13.
      return O;
    },
  });
}

Especificaciones

Specification
ECMAScript® 2025 Language Specification
# sec-array.prototype.fill

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
fill

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Ver también