JS метод Array.fill()

Опис

Метод fill() ефективно заповнює вказані слоти у масивах визначеним значенням. Важливо зазначити, що він є мутуючим, тому будь-які зміни, зроблені в масиві за допомогою цього методу, відразу відображаються на первинному масиві. Якщо ви плануєте працювати з важливими даними, рекомендується бути обережним і, можливо, створювати копію масиву перед змінами.

Цей метод також дозволяє вам вказувати діапазон, в якому потрібно замінити елементи, вказуючи початковий та кінцевий індекси. Ця особливість особливо корисна, коли потрібно модифікувати лише певну частину масиву.

Приклад використання методу fill():

let array = [1, 2, 3, 4, 5];
array.fill(0, 2, 4);
console.log(array);

У цьому прикладі масив array спочатку містить п'ять елементів. Коли ми викликаємо метод array.fill(0, 2, 4), ми передаємо йому три аргументи:

• Значення для заповнення: Перший параметр 0 - це значення, яким ми хочемо заповнити частину масиву.
• Початковий індекс: Другий параметр 2 вказує, з якого індексу ми починаємо заповнювати масив. У нашому випадку, ми хочемо почати з третього елемента (так як індексація масивів починається з 0).
• Кінцевий індекс: Третій параметр 4 вказує, де ми припиняємо заповнення. Зверніть увагу, що елемент під цим індексом не включається. Тобто, в нашому випадку, ми заповнюємо елементи під індексами 2 і 3, але не під індексом 4.

Після використання методу fill(), елементи з індексами 2 і 3 замінюються на 0. Таким чином, виведений результат буде: [1, 2, 0, 0, 5].

Синтаксис

fill(value)
fill(value, start)
fill(value, start, end)

Параметри

*value

Значення, яке використовується для заповнення масиву. Усі елементи масиву отримають одне й те ж значення. Якщо це значення - об'єкт, кожен елемент масиву буде вказувати на цей самий об'єкт.

start

Індекс, від якого розпочинається процес заповнення масиву, переведений до цілочислового формату. Індексація в масивах стартує з нуля.

• Від'ємний індекс враховується з кінця масиву — якщо start < 0, використовується start + array.length.
• Якщо start < -array.length або start не вказано, використовується 0.
• Якщо start >= array.length, жоден індекс не заповнюється.

end

Індекс, на якому закінчується заповнення масиву, також в форматі цілого числа. Метод fill() працює так, що він заповнює масив аж до, але не включаючи цей індекс.

• Від'ємний індекс враховується з кінця масиву — якщо end < 0, використовується end + array.length.
• Якщо end < -array.length, використовується 0.
• Якщо end >= array.length або end не вказано, використовується array.length, що призводить до заповнення всіх індексів до кінця.

Return

array

Змінений масив, заповнений значенням.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3
• Приклад 4
• Приклад 5

console.log([1, 2, 3].fill(4)); // [4, 4, 4]
console.log([1, 2, 3].fill(4, 1)); // [1, 4, 4]
console.log([1, 2, 3].fill(4, 1, 2)); // [1, 4, 3]
console.log([1, 2, 3].fill(4, 1, 1)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, 3, 3)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, -3, -2)); // [4, 2, 3]
console.log([1, 2, 3].fill(4, NaN, NaN)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, 3, 5)); // [1, 2, 3]
console.log(Array(3).fill(4)); // [4, 4, 4]

// Один об'єкт, на який посилаються кожен елемент масиву:
const arr = Array(3).fill({}); // [{}, {}, {}]
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

const arr = new Array(3);
for (let i = 0; i < arr.length; i++) {
  arr[i] = new Array(4).fill(1); // Створення масиву розміром 4, заповненого значенням 1
}

arr[0][0] = 10;
console.log(arr[0][0]); // 10
console.log(arr[1][0]); // 1
console.log(arr[2][0]); // 1

const tempGirls = Array(5).fill("дівчина", 0);

const arrayLike = { length: 2 };
console.log(Array.prototype.fill.call(arrayLike, 1));
// { '0': 1, '1': 1, length: 2 }