reduce函数20个高级用法 看看你掌握了多少？
reduce函数20个高级用法 看看你掌握了多少？
微芒不朽
发布于 2024-04-03 18:58:54
发布于 2024-04-03 18:58:54
什么是reduce函数
- reduce 方法对数组中的每个元素按序执行一个提供的 reducer 函数
- 每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
函数组成
reduce(callbackFn)
reduce(callbackFn, initialValue)
函数具体内容
- reduce 方法是一个迭代方法。
- 它按升序对数组中的所有元素运行一个“reducer”回调函数，并将它们累积到一个单一的值中。
- 每次调用时，callbackFn 的返回值都作为 accumulator 参数传递到下一次调用中。
- 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);
参考资料
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
- https://www.jianshu.com/p/a2f2a7eeb662
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2024-03-26，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录