JavaScript | Как получить каждый третий элемент массива?

Мы хотим получить из массива каждый третий элемент. Как это сделать?

У нас есть массив:

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]

Получили каждый третий элемент массива JavaScript

Как это работает?

Первый вызов коллбэка

Давайте по шагам посмотрим на преобразования. Сначала в коллбэк придёт индекс под номером НОЛЬ.

Первыми выполнятся действия с самых глубоких скобках:

(index+1)

Это выражение вернёт нам 1. Затем выполнится получение остатка от деления:

(0+1)%3 или 1%3

Остаток от деления на три - JavaScript — Остаток от деления на три — JavaScript

После этого будет выполнен оператор отрицания, который вернёт нам значение false.

Отрицание единицы возвращает false - JavaScript — Отрицание единицы возвращает false — JavaScript

В результате в новый массив не попадёт первый элемент.

Второй вызов коллбэка

Во второй раз выражение (index+1) будет эквивалентно 1+1, что в итоге вернёт 2. Затем выполнится получение остатка от деления:

(1+1)%3 или 2%3

Остаток от деления на три, числа 2 - JavaScript — Остаток от деления на три, числа 2 — JavaScript

После этого будет выполнен оператор отрицания, который вернёт нам значение false.

Отрицание двойки даёт false - JavaScript — Отрицание двойки даёт false — JavaScript

В результате в новый массив не попадёт второй элемент.

Третий вызов коллбэка — Успешный

В третий раз выражение (index+1) будет эквивалентно 2+1, что в итоге вернёт 3. Затем выполнится получение остатка от деления:

(2+1)%3 или 3%3

Остаток от деления на 3 числа 3 - JavaScript — Остаток от деления на 3 числа 3 — JavaScript

После этого будет выполнен оператор отрицания, который вернёт нам долгожданное значение true.

Отрицание нуля возвращает true - JavaScript — Отрицание нуля возвращает true — JavaScript

Истина позволит третьему элементу массива попасть в новый массив. После этого ситуации будут циклически повторяться до самого конца массива.

Информационные ссылки

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