Примеры использования Array reduce в Javascript

Примеры использования Array reduce в Javascript


19.09.2018
/
oberset

Метод reduce(callback, initialValue) возвращает результат функции callback, которая применяется к каждому элементу массива. Функция callback принимает четыре аргумента:

  • accumulator – значение, которое возвращает предыдущий вызов callback или initialValue (если вызывается для первого элемента).
  • currentValue – текущий элемент массива, для которого вызывается callback.
  • index (необязательный) – индекс текущего элемента массива.
  • array (необязательный) – массив, для которого вызывается reduce.

Значение, которое вернет последний вызов callback будет возвращаемым значением метода reduce.

Начнем с простого примера из документации (получим сумму всех элементов массива):
const array = [1, 2, 3, 4];

console.log(array.reduce((result, value) => result + value));
// результат: 10

Преобразуем значения всех полей объекта в массив:
const obj = {a: 1, b: 2, c: 3};

const reducer = (result, [, val]) => [...result, val];
const array = Object.entries(obj).reduce(reducer, []);

console.log(array); // Результат: [1, 2, 3]

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

Разворачиваем двумерный массив:
const array = [[1, 2], [3, 4], [5, 6]];

const reducer = (result, item) => [...result, ...item];
const result = arr.reduce(reducer, []);

console.log(result); // Результат: [1, 2, 3, 4, 5, 6]

Вызов цепочки функций (функция на вход получает значение, возвращаемое предыдущей функцией):
const toString = (value) => String(value);
const trim = (value) => value.trim();
const upperCase = (value) => value.toUpperCase();

const formatters = [toString, trim, upperCase];

const value = ' test value ';
const result = formatters.reduce((value, formatter) => formatter(value), value);

console.log(result); // "TEST VALUE"

Преобразование массива в объект (как в примере выше, только наоборот):
const array = [['a', 1], ['b', 2], ['c', 3]];

const result = array.reduce((obj, [key, val]) => (
{...obj, [key]: val}
), {});

console.log(result); // {a: 1, b: 2, c: 3}

Примеры, которые мы разобрали наглядно показывают для чего может пригодится метод reduce у массива.

Поиск и проверка значений в массиве на Javascript

Примеры поиска значений в массиве с помощью методов find, findIndex, includes, every и других.

Для чего нужна функция debounce и как она работает

Функция debounce возвращает обертку, которая откладывает вызов исходной функции на определенное время. Пример собственной реализации функции debounce.

Как получить локальный IP-адрес пользователя на Javascript

Пример получения локального IP-адреса клиентской машины на Javascript с помощью HTML5 RTCPeerConnection API.