Array.fill() в JavaScript — заповнити масив значенням

Опис

Метод 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);

<header>
	<h2 class="title">Заповнення масиву значеннями</h2>
	<p class="description">Цей приклад демонструє використання методу fill() для заповнення масиву певними значеннями.</p>
</header>
<main>
	<div id="output1"></div>
	<div id="output2"></div>
	<div id="output3"></div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

main {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

div[id^="output"] {
  padding: 10px;
  border: 1px solid #999;
  border-radius: 5px;
}

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

document.getElementById('output1').textContent = array1.fill(0, 2, 4);
// Очікуваний результат: Array [1, 2, 0, 0]

document.getElementById('output2').textContent = array1.fill(5, 1);
// Очікуваний результат: Array [1, 5, 5, 5]

document.getElementById('output3').textContent = array1.fill(6);
// Очікуваний результат: Array [6, 6, 6, 6]
//# sourceURL=pen.js

// один і той самий масив у всіх трьох слотах
const rows = new Array(3).fill([]);
rows[0].push('x');
console.log('fill([]):', rows);   // [['x'], ['x'], ['x']]

const ok = Array.from({ length: 3 }, () => []);
ok[0].push('x');
console.log('Array.from:', ok);   // [['x'], [], []]

// кінцевий індекс не входить
console.log('fill(0, 2, 4):', [1, 2, 3, 4, 5].fill(0, 2, 4));  // [1, 2, 0, 0, 5]
console.log('fill(0, -2):', [1, 2, 3, 4, 5].fill(0, -2));      // [1, 2, 3, 0, 0]

// fill не подовжує масив
console.log('fill(0, 0, 10) на двох:', [1, 2].fill(0, 0, 10)); // [0, 0]

// порожні слоти проти справжніх undefined
console.log('Array(3).map:', new Array(3).map((_, i) => i));         // дірки лишились
console.log('fill().map:', new Array(3).fill().map((_, i) => i));    // [0, 1, 2]
console.log('Array.from:', Array.from({ length: 3 }, (_, i) => i));  // [0, 1, 2]

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