Примеры использования 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 у массива.

Обзоры по теме:
Комментарии (0)

Зарегистрируйтесь или авторизуйтесь, чтобы оставлять комментарии.