其他
让人欲罢不能的reduce（内含小编项目实战示例）
（给前端大全加星标，提升前端技能）
转自：掘金 - 愤怒的黄牛
https://juejin.cn/post/6921975823612248077
以前遇到复杂一点的数据结构处理时，for循环套for循环两梭子，代码篇幅大幅度增加，隔壁工位哥们看了不忍心了，说reduce那么好用为啥不用呢？菜鸡小编也不敢多问reduce怎么用，悄悄的下去查资料。而后分享给各位‘工友们’。
1. reduce到底是何方神圣
arr.reduce(callback,[initialValue])
reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。
callback(执行arr中的每一个元素的函数，包含四个参数)
previousValue (上一次调用回调返回的值，或者是提供的初始值(initialValue))
currentValue (数组中的当前元素)
index (数组当前元素的索引)
array (调用reduce的当前数组)
initialValue (初始值)(可选参数)
！注意：如果没有写initialValue参数的话，reduce的callback会从arr的索引为1的元素开始执行，反之的话，会从索引为0的元素开始执行callback
2. reduce的简单到复杂
基本操作
let arr = [1,2,3]
const count = (arr) => {
return arr.reduce((pre,cur,index,array) => {
return pre + cur
},0)
}
count(arr) // 6
reduce造轮子--forEach
Array.prototype.myForEach = function (fn) {
return this.reduce((acc,cur,index,arr) => {
fn(cur,index)
})
}
arr.myForEach((item,index) => {
console.log(item,index)
})
利用原型挂载的原理,接受一个回调函数fn（就是myForEach的传入函数），利用reduce的原理调用传入的fn(),执行fn里面的一些数据操作。
reduce造轮子--map
const arr = [1,2,3]
const arr1 = [4,5]
Array.prototype.myMap = function(fn, thisArg) {
const result = [];
this.reduce((prev, curr, index, array) => {
result[index] = fn.call(thisArg, array[index], index, array);
}, 0)
return result;
}
arr.myMap(function(c,i) {
return c + i + this.length
},arr1)
// [3,5,7]
同理利用原型挂载的原理，传入map的函数，在原理的myMap函数的reduce函数中执行，利用第二个thisArg参数，再在reduce里面调用回调函数的时候call传入，改变myMap函数的this指向，将myMap函数的函数体执行结果，缓存在result数组中，返回出来。类似的filter，find，findIndex等思路都是一样的
reduce实践1-8
// p 为成员1,2,3，ps为成员的成绩，其中p和ps一一对应
// 求 每个成员的分数列表 {1: [1,2,2],2: [2,2,2], 3: [3,3,3]}
const p = [3, 3, 1, 2, 2, 1, 3, 2]
const ps = [69, 71, 93, 79, 81, 93, 77, 99]
const res = (p,ps) => {
return p.reduce((cur, pre, index) => {
if (!cur[pre]) {
cur[pre] = [];
}
for (let i = 0; i < ps.length; i++) {
if (index === i) {
cur[pre].push(ps[i]);
}
}
return cur
}, {})
};
console.log(res(p,ps));
// 按照年龄进行分组 {18: [],19: [], 20: []}
const arr = [
{name: '小孙', age: 18, score: 60, weight: 60},
{name: '小王', age: 19, score: 70, weight: 55},
{name: '小李', age: 18, score: 60, weight: 70},
{name: '小刘', age: 20, score: 70, weight: 65},
{name: '小赵', age: 18, score: 60, weight: 60},
{name: '小钱', age: 19, score: 70, weight: 55},
{name: '小周', age: 20, score: 60, weight: 50},
]
const groupBy = (arr, key) => {
return arr.reduce((pre,cur) => {
pre[cur[key]] = pre[cur[key]] || []
pre[cur[key]].push(cur)
return pre
}, {})
}
console.log(groupBy(arr, 'age'))
// 扁平化数组
const c = [[1,2,3],[4,5,[6,7]]]
const flatMap = (arr) => {
return arr.reduce((pre,item) => {
return pre.concat(Array.isArray(item) ? flatMap(item): item)
},[])
}
console.log(flatMap(c))
// 字符串大小写区别
const str = 'abCD'
const change = (str) => {
let arr = str.split('')
return arr.reduce((pre,cur) => {
if (cur === cur.toLowerCase()) {
pre.push(cur.toUpperCase())
} else {
pre.push(cur.toLowerCase())
}
return pre
},[])
}
console.log(change(str).join())
// 找数组中的公共元素
const arr10 = [1,2,3,4]
const arr2 = [6,4,7,8,3]
const arr3 = [0,9,4,3]
const getOnly = (...arr) => {
return arr.reduce((pre,next) => {
return pre.filter(c => next.includes(c))
},arr[0])
}
console.log(getOnly(arr10,arr2,arr3))
// 查找字符串中每个字符出现的次数
const str1 = 'jgdsgdlkgj'
const op = str1.split('').reduce((pre,next)=> {
pre[next]? pre[next]++: pre[next]=1
return pre
},{})
console.log(op)
// 查找公共前缀
const strArr = ["flower","flow","flight"]
const getStr = (strs) => {
return strs.reduce((pre,next) => {
while (!next.startsWith(pre)) {
pre = pre.substring(0,pre.length-1)
}
return pre
},strs[0])
}
console.log(getStr(strArr))
// 数组对象去重
const onlyList = (arr) => {
return arr.reduce((pre,cur,index) => {
if(pre.find(c => c.from === cur.from && c.to === cur.to)) {
return pre
} else {
return [...pre,cur]
}
}, [])
}
console.log(onlyList(quieArr))
结语
小编从一个reduce一无所知的菜鸡，通过各方搜索资料，项目中的多方实践，只为让代表变得简洁方便。希望小编的这些总结能对各位工友们有一丢丢的帮助，也不枉小编把自己笔记本的总结分享出来了。
- EOF -
1、浏览器缓存
觉得本文对你有帮助？请分享给更多人
推荐关注「前端大全」，提升前端技能
点赞和在看就是最大的支持❤️