fill() заполняет массив одним и тем же значением.
Это удобный метод, когда нужно быстро записать одинаковое значение во все элементы массива или только в его часть.
Синтаксис
array.fill(value)
array.fill(value, start)
array.fill(value, start, end)value - значение, которым нужно заполнить массив.
start - индекс, с которого начинается заполнение.
end - индекс, до которого идёт заполнение, но сам end не включается.
Что делает fill()
Метод проходит по массиву и записывает одно и то же значение в нужные позиции.
const numbers = [1, 2, 3];
numbers.fill(0);
console.log(numbers); // [0, 0, 0]fill() меняет исходный массив
fill() работает прямо с исходным массивом, а не создаёт новый.
const items = ["a", "b", "c"];
items.fill("x");
console.log(items); // ["x", "x", "x"]Это главное, что важно запомнить про метод.
Что возвращает fill()
fill() возвращает сам изменённый массив.
const numbers = [1, 2, 3];
const result = numbers.fill(9);
console.log(result); // [9, 9, 9]
console.log(numbers); // [9, 9, 9]Но это не новый массив, а тот же самый.
Заполнение части массива
Можно заполнить не весь массив, а только нужный диапазон.
const numbers = [1, 2, 3, 4, 5];
numbers.fill(0, 1, 4);
console.log(numbers); // [1, 0, 0, 0, 5]Здесь заполнение началось с индекса 1 и остановилось перед индексом 4.
Если передать только start
Если указать только start, заполнение пойдёт от этой позиции до конца массива.
const numbers = [1, 2, 3, 4];
numbers.fill(7, 2);
console.log(numbers); // [1, 2, 7, 7]Отрицательные индексы
fill() поддерживает отрицательные индексы.
В этом случае отсчёт идёт с конца массива.
const numbers = [1, 2, 3, 4, 5];
numbers.fill(0, -2);
console.log(numbers); // [1, 2, 3, 0, 0]Можно использовать и отрицательный end:
const numbers = [1, 2, 3, 4, 5];
numbers.fill(8, 1, -1);
console.log(numbers); // [1, 8, 8, 8, 5]fill() и Array()
Очень частый сценарий - создать массив нужной длины и сразу заполнить его значением.
const numbers = Array(3).fill(0);
console.log(numbers); // [0, 0, 0]Это полезно, потому что Array(3) сам по себе создаёт массив с пустыми слотами.
Осторожно с объектами
Если передать в fill() объект, этот же объект будет записан во все позиции массива.
const users = Array(3).fill({ name: "Anna" });
console.log(users);
// [{ name: "Anna" }, { name: "Anna" }, { name: "Anna" }]На вид всё нормально, но внутри это одна и та же ссылка.
const users = Array(3).fill({ name: "Anna" });
users[0].name = "Ivan";
console.log(users);
// [{ name: "Ivan" }, { name: "Ivan" }, { name: "Ivan" }]Это одна из самых частых ловушек с fill().
Если нужны разные объекты, обычно используют Array.from():
const users = Array.from({ length: 3 }, () => ({ name: "Anna" }));Когда это полезно
fill() удобно использовать, когда:
- нужно быстро заполнить массив одинаковым значением
- нужно перезаписать часть массива
- нужно создать массив с начальными значениями
- изменение исходного массива допустимо
Частые ошибки
Думать, что fill() создаёт новый массив
const numbers = [1, 2, 3];
numbers.fill(0);
console.log(numbers); // [0, 0, 0]Метод меняет исходный массив.
Считать, что end включается
const numbers = [1, 2, 3, 4];
numbers.fill(9, 1, 3);
console.log(numbers); // [1, 9, 9, 4]Элемент с индексом 3 уже не заполняется.
Заполнять массив объектом и ждать разные объекты
const items = Array(2).fill({ value: 0 });В обеих ячейках будет ссылка на один и тот же объект.
Быстрая памятка
fill()заполняет массив одним значением- метод меняет исходный массив
endне включается в диапазонfill()поддерживает отрицательные индексы- с объектами внутри метод записывает одну и ту же ссылку
Коротко
fill() - это удобный способ быстро заполнить массив одинаковым значением. Главное, что стоит запомнить: метод изменяет исходный массив, а при работе с объектами во все позиции попадает одна и та же ссылка.