Fill: примеры (JAVASCRIPT)

Примеры использования fill()

Базовое заполнение массива:

const arr1 = new Array(5).fill(0);
console.log(arr1);

[0, 0, 0, 0, 0]

Заполнение с указанием начального индекса:

const arr2 = [1, 2, 3, 4, 5];
arr2.fill(9, 2);
console.log(arr2);

[1, 2, 9, 9, 9]

Заполнение с указанием начального и конечного индексов:

const arr3 = ['a', 'b', 'c', 'd', 'e'];
arr3.fill('*', 1, 4);
console.log(arr3);

['a', '*', '*', '*', 'e']

Использование отрицательных индексов:

const arr4 = [10, 20, 30, 40, 50];
arr4.fill(99, -3, -1);
console.log(arr4);

[10, 20, 99, 99, 50]

Похожие методы в JavaScript

Array.from() позволяет создавать массивы из итерируемых объектов или массивоподобных структур с возможностью применения функции преобразования к каждому элементу. Подходит для более сложной инициализации.

Циклы for/while обеспечивают полный контроль над процессом заполнения, но требуют больше кода.

Метод map() применяет функцию к каждому элементу массива, возвращая новый массив. Не изменяет исходный массив.

Выбор метода зависит от задачи: fill() оптимален для простого заполнения одинаковыми значениями, Array.from() для создания массивов с вычисляемыми значениями, map() для преобразования существующих данных.

Частые ошибки при работе с fill()

1. Заполнение массива объектов одним и тем же ссылочным значением:

const arr = new Array(3).fill({});
arr[0].name = 'John';
console.log(arr);

[
  { name: 'John' },
  { name: 'John' },
  { name: 'John' }
]

Все элементы ссылаются на один объект. Решение - использование Array.from() с функцией.

2. Непонимание мутации исходного массива:

const original = [1, 2, 3];
const filled = original.fill(0);
console.log(original === filled);
console.log(original);

true
[0, 0, 0]

Метод изменяет исходный массив, а не создает новый.

3. Путаница с индексами при использовании отрицательных значений:

const arr = [1, 2, 3, 4, 5];
arr.fill(0, 1, -1);
console.log(arr);

[1, 0, 0, 0, 5]

Изменения в методе fill()

Метод fill() был добавлен в стандарт ECMAScript 2015 (ES6). С тех пор его спецификация остается стабильной без существенных изменений.

В современных версиях JavaScript метод поддерживается всеми основными браузерами и средой Node.js. Полифиллы могут потребоваться только для очень старых сред выполнения.

Расширенные примеры применения fill()

Создание и заполнение многомерных структур:

// Создание матрицы 3x3
const matrix = new Array(3)
  .fill()
  .map(() => new Array(3).fill(0));
console.log(matrix);

[
  [0, 0, 0],
  [0, 0, 0],
  [0, 0, 0]
]

Частичное обновление данных с плавающими числами:

const data = [0.1, 0.2, 0.3, 0.4, 0.5];
data.fill(0.0, 2, 4);
console.log(data);

[0.1, 0.2, 0.0, 0.0, 0.5]

Использование с разными типами данных:

const mixed = new Array(4).fill(null);
mixed.fill(undefined, 2);
console.log(mixed);

[null, null, undefined, undefined]

Заполнение с использованием функции-генератора значений:

function createFilled(len, generator) {
  return new Array(len)
    .fill()
    .map((_, i) => generator(i));
}
const squares = createFilled(5, i => (i + 1) ** 2);
console.log(squares);

[1, 4, 9, 16, 25]

Работа с типизированными массивами:

const buffer = new Uint8Array(8).fill(255, 2, 6);
console.log(buffer);

Uint8Array [0, 0, 255, 255, 255, 255, 0, 0]

Аналоги fill() в других языках

PHP: функция array_fill()

$array = array_fill(0, 5, 'value');
print_r($array);

Array
(
    [0] => value
    [1] => value
    [2] => value
    [3] => value
    [4] => value
)

Python: умножение списков или метод списков, но для заполнения секций используется срез.

arr = [0] * 5  # Создание
arr[1:4] = [9] * 3  # Заполнение части
print(arr)

[0, 9, 9, 9, 0]

C: для массивов используется цикл или функция memset() для байтового заполнения.

int arr[5];
for(int i = 0; i < 5; i++) arr[i] = 0;

Основные отличия: в JavaScript fill() является методом массива и работает с любыми типами данных, изменяя исходный массив. В PHP array_fill() создает новый массив. В Python подход более разнообразный, но нет единого метода, полностью аналогичного fill().