JavaScript метод fill()

Определение и применение

JavaScript метод fill() позволяет заполнить все элементы массива одним значением, при необходимости задавая значение начального индекса, с которого начинается заполнение и конечное значение индекса, которым заканчивается заполнение. Работу метода показывает пример «Как заполнить весь массив или диапазон».

Поддержка браузерами

Спецификация: ecma262

Поддерживается во всех основных браузерах с 2016 года.

Показать браузеры
Совместимостьjavascript.builtins.Array.fill
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
fill✓45✓12✓31✓32✓8✓45✓31✓32✓8✓5.0✓45✓8

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

JavaScript синтаксис

JavaScript
array.fill(value);
array.fill(value, start);
array.fill(value, start, end);

Спецификация

ECMAScript: Array.prototype.fill.

Значения параметров

Параметры fill()
Параметр Описание
value Значение, которым будет заполнен массив. Обязательное значение.
start Целое число, определяющее индекс массива, с которого начинается заполнение массива. Необязательное значение, если не указано, то заполнение начинается с 0 индекса.
Допускается использование отрицательных значений, в этом случае индекс с которого будет произведено заполнение будет рассчитан по следующей формуле: length (длина массива) + start.
end Целое число, определяющее индекс массива которым заканчивается заполнение массива. Необязательное значение, если не указано, то будут заполнены все элементы от начальной позиции (start) и до конца массива.
Допускается использование отрицательных значений, в этом случае индекс до которого будет произведено заполнение будет рассчитан по следующей формуле: length (длина массива) + end.

Возвращаемое значение

Тот же массив после заполнения; его длина сохраняется.

Особенности

Начало по умолчанию равно 0, конец — length; end не включается. Отрицательные индексы отсчитываются от конца и ограничиваются диапазоном массива. Пустые позиции заполняются. Объект в value не клонируется: все заполненные позиции ссылаются на него.

Проверьте это поведение в примере Почему fill() не создаёт отдельные объекты.

Примеры, попробуйте сами

Как заполнить весь массив или диапазон

Измените значение заполнения и границы. Каждый вызов работает со свежей копией: проверьте, что end не включается.

index.html
HTML
<p>Результат выполнения выводится в консоль.</p>
main.js
JavaScript
// Каждый вызов начинает со свежей копии, чтобы сравнивать границы на одинаковых данных.
var x = [1, 2, 3, 'a', 'b', 'c'] // инициализируем переменную, содержащую массив

console.log(x.slice().fill(0)) // возвращаемое значение [0, 0, 0, 0, 0, 0]
console.log(x.slice().fill('z')) // возвращаемое значение ["z", "z", "z", "z", "z", "z"]
console.log(x.slice().fill(true)) // возвращаемое значение [true, true, true, true, true, true]
console.log(x.slice().fill('z', 2)) // возвращаемое значение [1, 2, "z", "z", "z", "z"]
console.log(x.slice().fill('z', 2, 4)) // возвращаемое значение [1, 2, "z", "z", "b", "c"]
console.log(x.slice().fill('z', -2)) // возвращаемое значение [1, 2, 3, "a", "z", "z"]
console.log(x.slice().fill('z', 0, -4)) // возвращаемое значение ["z", "z", 3, "a", "b", "c"]

Почему fill() не создаёт отдельные объекты

Измените свойство первого элемента и сравните второй. Затем сравните с Array.from(), где объект создаётся заново.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <title>Почему fill() не создаёт отдельные объекты</title>
  </head>
  <body></body>
</html>
main.js
JavaScript
const shared = Array(2).fill({ count: 0 })
shared[0].count = 7
console.log('Общий объект:', shared)
console.log('Одна ссылка:', shared[0] === shared[1])
const separate = Array.from({ length: 2 }, () => ({ count: 0 }))
separate[0].count = 7
console.log('Разные объекты:', separate)