Примеры использования 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 у массива.
Примеры поиска значений в массиве с помощью методов find, findIndex, includes, every и других.
Функция debounce возвращает обертку, которая откладывает вызов исходной функции на определенное время. Пример собственной реализации функции debounce.
Пример получения локального IP-адреса клиентской машины на Javascript с помощью HTML5 RTCPeerConnection API.