Как залить массив?
Метод fill нужен для заполнения массивов одинаковыми значениями. Важно то, что массив всегда остаётся той же самой длины, что и был до вызова fill.
Говоря простыми словами, мы как-бы заливаем элементы массива одинаковыми значениями. Метод fill заменяет значения элементов массива, на котором он был вызван (не создаёт копию массива).
Заливать можно полностью или частично.
Сколько аргументов может принимать fill ?
Метод fill принимает до трех аргументов: value, start и end.
value — по умолчанию undefined. То, на что будем менять. Заливаемое значение.
start — по умолчанию 0. Индекс начала заливки.
end — по умолчанию равен длине массива. Индекс окончания заливки.
Вызов без параметров
Если вызвать функцию fill без параметров, то все значения элементов массива станут равными undefined.
var massiv = [1, 2, 3, 4] massiv.fill() --- все значения элементов равны undefined [undefined, undefined, undefined, undefined]
Передача одного параметра — аргумент value
Если в функцию fill передать один параметр, то все элементы массива будут перезаписаны на передаваемое значение. Перезапись стартует с индекса 0 (первого элемента) и заканчивается последним элементом:
var massiv = [1, 2, 3, 4, 5, 6, 7] massiv.fill(0) --итог работы метода fill - вместо цифр нули [0, 0, 0, 0, 0, 0, 0]
Мы передали число 0 (ноль) в качестве значения для одного аргумента (value). Все значения элементов массива были заменены на 0.
Вывод в консоль браузера:
Передача двух параметров — аргумент value и аргумент start
Если в функцию fill передать два параметра, то первый по-прежнему будет являться заменяемым значением, а второй — начальным индексом элемента массива с которого будет начата замена.
var massiv = [1, 2, 3, 4, 5, 6, 7] massiv.fill(0, 3) --итог работы метода fill -- индекс 3 - это четвёртый элемент массива [1, 2, 3, 0, 0, 0, 0]
Первым параметром мы передали число 0. Вторым параметром мы передали индекс элемента, на котором произойдёт первое заполнение. Под индексом 3 у нас было число 4, теперь под индексом 3 у нас 0. Значения под индексами 0, 1, 2 остались без изменений т. к. метод fill стартовал с индекса 3 и до конца массива.
Если в функцию fill передать отрицательное значение начала заливки, то оно рассматривается как длина массива length + начало start
var massiv = [1, 2, 3, 4, 5, 6, 7] massiv.fill(0, -3) --итог работы метода fill -- [1, 2, 3, 4, 0, 0, 0]
В этом примере длина массива равна 7. Т.к. мы передали отрицательно значение начального индекса, то мы получили выражение (7 — 3). В результате вычисления индекс «начала заливки» был заменён на 4. Заливка стартовала на пятом элементе и продлилась до конца массива.
Если в функцию fill передать отрицательное значение начала заливки, которое больше длины массива, то оно рассматривается как длина массива length + начало start. Если в итоге мы получаем значение сложения меньше нуля (отрицательное значение), то срабатывает условие присвоения «началу» значения 0. То есть тупо ноль, чтобы никаких отрицательных не было. В отрицательных значениях нет никакого смысла т.к. все индексы в массивах это положительные целые числа.
Это значит, что заливка начнётся с самого начала массива и продолжится до конца, т. к. третий параметр не передан.
var massiv = [1, 2, 3, 4, 5, 6, 7] massiv.fill(0, -22) --итог работы метода fill -- [0, 0, 0, 0, 0, 0, 0]
В этом примере длина массива равна 7. Т.к. мы передали отрицательно значение начального индекса, то мы получили выражение (7 — 22). В результате вычисления индекс «начала заливки» был заменён на 4. Заливка стартовала на пятом элементе и продлилась до конца массива.
Передача трёх параметров — аргумент value, аргумент start и аргумент end
Если в функцию fill передать три параметра, то первый по-прежнему будет являться заменяемым значением; второй — начальным индексом элемента массива с которого будет начата замена; третий — конечным индексом элемента массива которым закончится замена.
var massiv = [1, 2, 3, 4, 5, 6, 7] massiv.fill(0, 2, 5) --итог работы метода fill -- [1, 2, 0, 0, 0, 6, 7]
Первым параметром мы передали число 0. Вторым параметром мы передали индекс элемента, на котором произойдёт первое заполнение. Третьим параметром мы передали индекс элемента, на котором произойдёт окончание заполнения. Под индексом 2 у нас было число 3, теперь под индексом 2 у нас 0. Значения под индексами 0, 1 остались без изменений т. к. метод fill стартовал с индекса 2 и до конца массива.
Если в функцию fill передать отрицательное значение «конца», то сработает преобразование (аналогичное «началу») — длина массива length + конец end. Если в итоге мы получаем значение сложения меньше нуля (отрицательное значение), то срабатывает условие присвоения «концу» значения 0.
Это значит, что заливка НЕ будет произведена.
var massiv = [1, 2, 3, 4, 5, 6, 7] massiv.fill(0, 3, -15) --итог работы метода fill -- [1, 2, 3, 4, 5, 6, 7]
Начало установлено на 3, а конец на -15. Т. к. конец отрицательный то сработает правило (7 — 15) = -8. В итоге -8 превратится в 0 (ноль) по условию преобразования.
В результате мы получим такой «как-бы» такой вариант:
Важно! Если итоговое «начало» больше или равно итоговому «концу«, то функция заливки всегда будет возвращать нам первоначальный массив.
Это правило является условием запуска преобразования массива. Пока «начало» больше или равно итоговому «концу» цикл преобразований не запускается.
Зачем нужен метод fill для массивов JavaScript?
В публикации «JavaScript | Как умножать дробные на целые?» вы сможете найти идеальный пример, в котором метод fill помогает решить задачу. Почитайте!
Информационные ссылки
Стандарт ECMAScript — Раздел «23.1.3.6 Array.prototype.fill ( value [ , start [ , end ] ] )» — https://tc39.es/ecma262/#sec-array.prototype.fill
Перевод раздела — https://efim360.ru/javascript-massivy-array/#Array-prototype-fill
