reduce函数20个高级用法 看看你掌握了多少？

开始之前，介绍一下​最近很火的开源技术，低代码。

作为一种软件开发技术逐渐进入了人们的视角里，它利用自身独特的优势占领市场一角——让使用者可以通过可视化的方式，以更少的编码，更快速地构建和交付应用软件，极大程度地降低了软件的开发、配置、部署和培训成本。

应用地址：https://www.jnpfsoft.com

开发语言：Java/.net

这是一个基于 Java Boot/.Net Core 构建的简单、跨平台快速开发框架。前后端封装了上千个常用类，方便扩展；采用微服务、前后端分离架构，集成了代码生成器，支持前后端业务代码生成，满足快速开发；框架集成了表单、报表、图表、大屏等各种常用的 Demo 方便直接使用；后端框架支持 Vue2、Vue3，平台即可私有化部署，也支持 K8S 部署。

什么是reduce函数

1. reduce 方法对数组中的每个元素按序执行一个提供的 reducer 函数
2. 每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

函数组成

reduce(callbackFn)
reduce(callbackFn, initialValue)

函数具体内容

1. reduce 方法是一个迭代方法。
2. 它按升序对数组中的所有元素运行一个“reducer”回调函数，并将它们累积到一个单一的值中。
3. 每次调用时，callbackFn 的返回值都作为 accumulator 参数传递到下一次调用中。
4. accumulator 的最终值（也就是在数组的最后一次迭代中从 callbackFn 返回的值）将作为 reduce() 的返回值。

函数示例

1.求和函数

const sum = (arr) => arr.reduce((acc, cur) => acc + cur, 0);
//累计值为acc
//当前值为cur
//初始值为initialValue 为0
let arr = [1, 2, 3, 4, 5];
console.log("参数为：", arr);
console.log("总和为：", sum(arr));

2.求积函数

const product = (arr) => arr.reduce((acc, curr) => acc * curr, 1);
let arr1 = [1, 2, 3, 4, 5];
console.log("参数为：", arr1);
console.log("乘积为：", product(arr1));

3.扁平化数组

const flatten = (arr) => arr.reduce((acc, curr) => acc.concat(curr), []);
let arr = [[1, 2], [3, 4], [5]];
console.log("参数为：", arr);
console.log("结果为：", flatten(arr));

4.计算平均值（类似求和）

const average = (arr) => arr.reduce((acc, curr) => acc + curr, 0) / arr.length;
let arr = [1, 2, 3, 4, 5];
console.log("参数为：", arr);
console.log("结果为：", average(arr));

5.最大值

const max = (arr) => arr.reduce((acc, curr) => Math.max(acc, curr), Number.NEGATIVE_INFINITY);
let arr = [1, 2, 3, 4, 5];
console.log("参数为：", arr);
console.log("结果为：", max(arr));

6.最小值

const min = (arr) => arr.reduce((acc, curr) => Math.min(acc, curr), Number.POSITIVE_INFINITY);
let arr = [1, 2, 3, 4, 5];
console.log("参数为：", arr);
console.log("结果为：", min(arr));

7.阶乘函数

const factorial = (n) => Array.from({ length: n }, (_, i) => i + 1).reduce((acc, curr) => acc * curr, 1);
//  Array.from({ length: n }, (_, i) => i + 1) 生成数组数据 [1,2,3,4,5]
console.log("参数为：", 5);
console.log("结果为：", factorial(5));

8.数组去重

const unique = (arr) => arr.reduce((acc, curr) => acc.includes(curr) ? acc : [...acc, curr], []);
let arr = [1, 2,3,4,2, 3, 4, 5];
console.log("参数为：", arr);
console.log("结果为：", unique(arr));

9.元素计数

const countOccurrences = (arr) => arr.reduce((acc, curr) => {
    acc[curr] = (acc[curr] || 0) + 1;
    return acc;
}, {});

let arr = [1, 2,3,4,2, 3, 4, 5];
console.log("参数为：", arr);
console.log("结果为：", countOccurrences(arr));

10.并集函数

const union = (...arrays) => arrays.reduce((acc, curr) => [...new Set([...acc, ...curr])], []);

let arr = [1, 2,3,4,2, 3, 4, 5];
let arr1 = [1, 2, 3, 4, 5];
console.log("参数为：", arr,arr1);
console.log("结果为：", union(arr,arr1));

11.交集函数

const intersection = (...arrays) => arrays.reduce((acc, curr) => acc.filter(value => curr.includes(value)));

let arr = [1, 2,3,4,2, 3, 4, 5];
let arr1 = [1, 2, 3, 4, 5];
console.log("参数为：", arr,arr1);
console.log("结果为：", intersection(arr,arr1));

12.差集函数

const difference = (arr1, arr2) => arr1.reduce((acc, curr) => arr2.includes(curr) ? acc : [...acc, curr], []);

let arr = [1, 2,3,4,2, 3, 4, 5,9];
let arr1 = [1, 2, 3, 4, 5,7,8];
console.log("参数为：", arr,arr1);
console.log("结果为：", difference(arr,arr1));

13.对称差集函数

const difference = (arr1, arr2) => arr1.reduce((acc, curr) => arr2.includes(curr) ? acc : [...acc, curr], []);
const symmetricDifference = (arr1, arr2) => [...difference(arr1, arr2), ...difference(arr2, arr1)];
let arr = [1, 2,3,4,2, 3, 4, 5,9];
let arr1 = [1, 2, 3, 4, 5,7,8];
console.log("参数为：", arr,arr1);
console.log("结果为：", symmetricDifference(arr,arr1));

14.切片函数

const chunk = (arr, size) => arr.reduce((acc, _, i) => i % size === 0 ? [...acc, arr.slice(i, i + size)] : acc, []);

let arr = [1, 2,3,4,2, 3, 4, 5,9];
console.log("参数为：", arr);
console.log("结果为：", chunk(arr,4));

15.分组函数

const groupBy = (arr, key) => arr.reduce((acc, obj) => {
    const groupKey = obj[key];
    acc[groupKey] = [...(acc[groupKey] || []), obj];
    return acc;
}, {});

let arr = [{ id: 1, name: '微芒不朽' }, { id: 2, name: '微芒' }, { id: 1, name: '微芒不朽' }];
console.log("参数为：", arr);
console.log("结果为：", groupBy(arr,"name"));

16.去除falsy值

// 16. 数组去除假值
const compact = (arr) => arr.reduce((acc, curr) => curr ? [...acc, curr] : acc, []);
let arr = [0, 1, false, 2, '', 3]
console.log("参数为：", arr);
console.log("结果为：", compact(arr,"name"));

17.去除空元素

const removeEmpty = (arr) => arr.reduce((acc, curr) => curr ? [...acc, curr] : acc, []);

let arr = [0, 1, null, 2,undefined, '', 3]
console.log("参数为：", arr);
console.log("结果为：", removeEmpty(arr,"name"));

18.去除指定元素

const removeItem = (arr, item) => arr.reduce((acc, curr) => curr === item ? acc : [...acc, curr], []);
let arr = [1, 2, 3, 4, 2, 5]
console.log("参数为：", arr);
console.log("结果为：", removeItem(arr,2));

19.元素映射

const mapArray = (arr, fn) => arr.reduce((acc, curr) => [...acc, fn(curr)], []);
let arr = [1, 2, 3, 4, 2, 5]
console.log("参数为：", arr,(x)=>x+2);
console.log("结果为：", mapArray(arr,(x)=>x+2));

19.元素过滤

const filterArray = (arr, fn) => arr.reduce((acc, curr) => fn(curr) ? [...acc, curr] : acc, []);
let arr = [1, 2, 3, 4, 2, 5]
console.log("参数为：", arr,(x) => x % 2 === 0);
console.log("结果为：", filterArray(arr,(x) => x % 2 === 0));

console.log样式函数【重写console.log】

function randomColor() {
  let r = Math.floor(Math.random()*256);
  let g = Math.floor(Math.random()*256);
  let b = Math.floor(Math.random()*256);
  //返回随机生成的颜色
  return "rgb("+r+","+g+","+b+")";
}
console.log = (function(oriLogFunc){
  return function(...data)
  {
    const icons = ["🌵", "🎍", "🐾", "🌀", "🐚", "🥝", "🥜", "🥕", "🥒", "🌽", "🍒", "🍅", "🍑", "🍋", "🍈", "🌶", "🌰", "🍠", "🍆", "🍄", "🍐", "🍌", "🍍", "🍇", "🍏", "🍓", "🍎", "🍊", "🐴", "🐗", "🦄", "🐑", "🐶", "🐔", "🐼", "🐒", "🌝", "💄", "💋", "👠", "👗", "👙", "🧣", "🍰", "🍭", "🍳", "🎄", "🎱", "⚽", "🏀", "🎵", "🚄", "⭕", "❌", "❓", "❗", "💯"]
    const icon = icons[Math.floor(Math.random() * icons.length)];
    const bgColor = randomColor()
    const color = randomColor()
    oriLogFunc.call(console,`%c ${icon} `, `border-radius:5px;padding:12px;border:1px solid #000;color: #43bb88;font-size: 16px;font-weight: bold;text-decoration: underline;`, ...data);
  }
})(console.log);