JavaScript | Array | fill

JavaScript | Array | fill

Как залить массив?

Метод 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]
Вызов fill без параметров - JavaScript
Вызов fill без параметров — JavaScript

 

Передача одного параметра — аргумент 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.

Вывод в консоль браузера:

JavaScript - метод fill с одним аргументом
JavaScript — метод fill с одним аргументом

 

Передача двух параметров — аргумент 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 и до конца массива.

JavaScript - метод fill с двумя аргументами
JavaScript — метод fill с двумя аргументами

Если в функцию 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. То есть тупо ноль, чтобы никаких отрицательных не было. В отрицательных значениях нет никакого смысла т.к. все индексы в массивах это положительные целые числа.

Условие присвоения началу значения 0 - метод fill - JavaScript - Алгоритм ECMAScript
Условие присвоения началу значения 0 — метод fill — JavaScript — Алгоритм ECMAScript

Это значит, что заливка начнётся с самого начала массива и продолжится до конца, т. к. третий параметр не передан.

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. Заливка стартовала на пятом элементе и продлилась до конца массива.

Начало отрицательное и меньше длины массива - метод fill - JavaScript
Начало отрицательное и меньше длины массива — метод fill — JavaScript

 

 

Передача трёх параметров — аргумент 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 и до конца массива.

JavaScript - метод fill с тремя аргументами
JavaScript — метод fill с тремя аргументами

 

Если в функцию fill передать отрицательное значение «конца», то сработает преобразование (аналогичное «началу») — длина массива length + конец end. Если в итоге мы получаем значение сложения меньше нуля (отрицательное значение), то срабатывает условие присвоения «концу» значения 0.

Условие присвоения концу значения 0 - метод fill - JavaScript - Алгоритм ECMAScript
Условие присвоения концу значения 0 — метод fill — JavaScript — Алгоритм ECMAScript

Это значит, что заливка НЕ будет произведена.

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
Конец отрицательный и меньше длины массива — метод fill — JavaScript

В результате мы получим такой «как-бы» такой вариант:

Конец равен 0 - метод fill - JavaScript
Конец равен 0 — метод fill — JavaScript

Важно! Если итоговое «начало» больше или равно итоговому «концу«, то функция заливки всегда будет возвращать нам первоначальный массив.

Если начало больше или равно концу, получаем тот же массив - метод fill - JavaScript
Если начало больше или равно концу, получаем тот же массив — метод fill — JavaScript

Это правило является условием запуска преобразования массива. Пока «начало» больше или равно итоговому «концу» цикл преобразований не запускается.

Цикл преобразования не запускается - JavaScript
Цикл преобразования не запускается — JavaScript

 

Зачем нужен метод 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

JavaScript | Как заполнить массив одинаковыми значениями?