Мы хотим получить из массива каждый третий элемент. Как это сделать?
У нас есть массив:
let massiv = [1,2,3,4,5,6,7,8,9,10];
Мы взяли массив из чисел для простоты восприятия, чтобы результат был более наглядным.
Использование метода filter()
Из документации мы знаем, что метод filter() может принимать ДВА параметра. Первый обязательный - это функция обратного вызова, выполнение которой должно приводить к получению логического значения true или false. Её нам будет достаточно.
Эта функция обратного вызова может принимать ТРИ параметра:
- значение элемента
- индекс элемента
- просматриваемый (обходимый) объект
Для решения задачи нам будет достаточно передать первые два параметра. Если быть точнее, то нам нужен только второй параметр, но к сожалению, мы не можем передать только его одного. Индексы любого "нормального" массива начинаются с 0 (нуля) и увеличиваются на 1 для каждого элемента массива.
Это значит, что нам нужны индексы массива под номерами 2, 5, 8, 11 ... и так далее.
Решить задачу нам поможет оператор остатка от деления - %, который будет возвращать нам какое-то целое число, которое в последствии будет приведено к логическому типу. Он отлично отработает так как все индексы массива являются целыми числами. Но его одного не достаточно. Ему на помощь должен прийти оператор отрицания - ! и оператор "приоритета выполнения операции / группировки" - ( ). И ещё будет оператор сложения - +.
Выглядеть это будет так:
let massiv = [1,2,3,4,5,6,7,8,9,10]; massiv.filter((item, index)=>!((index+1)%3)); [3, 6, 9]
Как это работает?
Первый вызов коллбэка
Давайте по шагам посмотрим на преобразования. Сначала в коллбэк придёт индекс под номером НОЛЬ.
Первыми выполнятся действия с самых глубоких скобках:
(index+1)
Это выражение вернёт нам 1. Затем выполнится получение остатка от деления:
(0+1)%3 или 1%3
После этого будет выполнен оператор отрицания, который вернёт нам значение false.
В результате в новый массив не попадёт первый элемент.
Второй вызов коллбэка
Во второй раз выражение (index+1) будет эквивалентно 1+1, что в итоге вернёт 2. Затем выполнится получение остатка от деления:
(1+1)%3 или 2%3
После этого будет выполнен оператор отрицания, который вернёт нам значение false.
В результате в новый массив не попадёт второй элемент.
Третий вызов коллбэка - Успешный
В третий раз выражение (index+1) будет эквивалентно 2+1, что в итоге вернёт 3. Затем выполнится получение остатка от деления:
(2+1)%3 или 3%3
После этого будет выполнен оператор отрицания, который вернёт нам долгожданное значение true.
Истина позволит третьему элементу массива попасть в новый массив. После этого ситуации будут циклически повторяться до самого конца массива.
Информационные ссылки
JavaScript | Как получить каждый второй элемент массива?
Стандарт ECMAScript - Раздел "23.1.3.8 Array.prototype.filter ( callbackfn [ , thisArg ] )" - https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.filter
Стандарт ECMAScript - Раздел "13.7 Multiplicative Operators" - https://tc39.es/ecma262/multipage/ecmascript-language-expressions.html#sec-multiplicative-operators
Стандарт ECMAScript - Раздел "13.2.9 The Grouping Operator" - https://tc39.es/ecma262/multipage/ecmascript-language-expressions.html#sec-grouping-operator
Стандарт ECMAScript - Раздел "13.5 Unary Operators" - https://tc39.es/ecma262/multipage/ecmascript-language-expressions.html#sec-unary-operators
