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].

правити

Нотатка

Перед використанням методу Array.prototype.fill(), варто звернути увагу на те, що він змінює вміст масиву безпосередньо. Якщо ви хочете зберегти оригінальний масив, створіть його копію перед застосуванням методу.

автор: Bond правити

Нотатка

Зверніть увагу, що метод fill() не створює новий масив, а змінює вміст існуючого масиву. Якщо вам потрібно створити новий масив, використовуйте метод Array.from() замість fill().

автор: Bond правити

Нотатка

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

автор: Bond правити

Нотатка

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

автор: Bond правити

Нотатка

Важливо пам'ятати, що об'єкт, до якого застосовується fill(), повинен мати властивість length.

автор: Bond правити

Нотатка

Хоча рядки схожі на масиви за своєю структурою, використання цього методу для них не рекомендується, тому що рядки в JavaScript є незмінними.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

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

Параметри

value

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

автор: Bond

правити

start

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

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

автор: Bond

правити

end

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

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

автор: Bond

правити

Повернення

array

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

автор: Bond

правити

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
	45	31	8	32	12

Підтримка: мобільні переглядачі

Переглядач
	45	45	31	8

Підтримка: серверні переглядачі

Переглядач
	4.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

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

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

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