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

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

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

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

let massiv = [1,2,3,4,5,6,7,8,9,10];

Мы взяли массив из чисел для простоты восприятия, чтобы результат был более наглядным.

Использование метода filter()

Из документации мы знаем, что метод filter() может принимать ДВА параметра. Первый обязательный - это функция обратного вызова, выполнение которой должно приводить к получению логического значения true или false. Её нам будет достаточно.

Эта функция обратного вызова может принимать ТРИ параметра:

  1. значение элемента
  2. индекс элемента
  3. просматриваемый (обходимый) объект

Для решения задачи нам будет достаточно передать первые два параметра. Если быть точнее, то нам нужен только второй параметр, но к сожалению, мы не можем передать только его одного. Индексы любого "нормального" массива начинаются с 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
Получили каждый третий элемент массива 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

Поделись записью