reduce方法接受参数：接受一个回调函数和初始值

array.reduce(callback,初始值) 等价于 array.reduce((prev, cur) => { },value)

回调函数接受四个参数：
prev：累加值（1：首次遍历如果没有初始值，则拿数组的第一个值，有初始值，则拿初始值，第二次的遍历prev则等于第一次取得值和cur的逻辑处理结果，二次以后的遍历则等于累加逻辑结果再和cur的逻辑结果）通俗的说就是函数返回值 return的结果

cur：没有初始值，取数组第二个的值，有初始值取数组第一个值

后面两个参数是当前索引和当前数组，不做具体讲解
代码讲解
无初始值的情况
let a = [1, 2, 3, 4]a.reduce((old, item) => {console.log(old, item);return 99})
打印结果
1 2
99 3
99 4有初始值的情况let a = [1, 2, 3, 4]a.reduce((old, item) => {console.log(old, item);return 99}, 0)
打印结果
0 1
99 2
99 3
99 4old代表着return 这个回调函数的返回结果
item代表数组的每一项

代码讲解参数

var total = [ 0, 1, 2, 3 ].reduce(( prev, cur ) => prev + cur,0
);// total  6
因为有初始值0，所以

第一次迭代 prev=初始值 0 cur取数组第一个0

第二次迭代 prev等于处理的逻辑结果prev + cur 0+0 = 0，cur此时取数组第二个值 1

第三次迭代 prev = 0+1 =1 ，cur 此时取数组第三个值= 2

第四次。。。prev= 1+2 =3， cur 此时取数组第四个值= 3

第五次。。。prev= 3+3 =6 ，cur迭代完了

所以结果等于 6

个人理解：

综上理解：我们可以知道其实就是一个prev逻辑处理结果和 cur的遍历迭代，实现prev的结果返回 ，在这个逻辑里面可以做一些事情，比如累加啥的

还有个个人的理解，在整个reduce方法中，prev只有第一次在没有初始值的情况下，会接触到数组里面的项，其他时候都是作为一个和cur的逻辑处理的结果（prev等于return的结果，即函数返回值）

而cur则每次递增的遍历数组里面的每个item

常见使用：

去重：

普通去重可以使用【...new Set(arr)】,对于数组对象的去重，可以使用reduce


普通去重let arr = [1, 2, 6, 2, 1];let filterArr = arr.reduce((pre, cur, index, array) => {if (!pre.includes(cur)) {pre.push(cur)}return pre;}, [])console.log(filterArr); // [1,2,6]数组对象去重
let a = [{id: 1}, {id: 2}, {id: 1}, {id: 4}]去重函数function Set(arr) {let obj = {}let newArr = arr.reduce((prev, cur) => {obj[cur.id] ? '' : obj[cur.id] = true && prev.push(cur)return prev}, [])return newArr}console.log(Set(a));

累加：

  普通累加let a = [1, 2, 3, 1]let num = a.reduce((prev, cur) => prev + cur, 0)console.log(num);数组对象累加：let a = [{cost: 1}, {cost: 2}, {cost: 1}, {cost: 4}]let obj = {}let num = a.reduce((prev, cur) => prev + cur.cost, 0)console.log(num);

统计出现次数：

function countArrayELem(array, elem) {return array.reduce((total, cur) => (total += cur == elem ? 1 : 0), 0);
}let numbers = [1, 2, 3, 1, 5];
console.log(countArrayELem(numbers, 1)); //2

比较大小：

通常reduce通过不设置初始值。则按prev取数组第一个值，cur取数组第二个值，用 return old > item ? old : item 这种三元运算符来做

 let a = [1, 2, 3, 4]let c = a.reduce((old, item) => {return old > item ? old : item})console.log(c);

前端程序员应该理解的reduce方法，对你的js能力很有帮助相关推荐

前端程序员快速画原型的方法在这里
有段时间没有推荐干货给大伙了,今天是时候把压箱底的东西拿出来分享给大家了! 想要学习原型图绘制的小伙伴可以看过来,适合零基础的小白,五分钟就可以上手,绘制自己想要的产品原型图. 官方介绍: 用户只需输 ...
前端程序员一般在哪些网站接单？
之前也写过一期前端程序员兼职接单的方法,但有粉丝私信说文章中前端接单的网站是比较少的,对想要找更多的网站对比下,今天就给大家做一个补充,希望能够帮到有需要的同学哦~ 如果嫌弃前面的文字太长,可以直接翻 ...
前端程序员最爱用的8款代码编辑器，你用哪款？
今天给大家分享8款前端程序员最爱用的代码编辑器,来看看你用哪款? 学编程从模仿开始,照书上一个字符一个字符的把代码敲进编辑器,编译,运行,输出"Hello word!".Fine, ...
java前台界面设计_前端程序员要懂的 UI 设计知识
前端程序员要懂的 UI 设计知识疯狂的技术宅前端先锋翻译:疯狂的技术宅作者:Per Harald Borgen 来源:freecodecamp 正文共:1401 字预计阅读时间:5分钟作为 ...
初中级前端程序员面试中小型公司会问哪些问题?
初中级前端程序员面试中小型公司会问哪些问题?不同的公司面试内容也不尽相同,有的面试过程很轻松,有的面试官是个架构师level 挺高不会问八股文,给出了几个现实中的场景,然后转换成代码的逻辑去让实现. ...
前端程序员饱和了吗？我们公司给初级前端开到了12K
故事起因最近我有个刚毕业的学生问我说:我感觉现在前端行业已经饱和了,也不是说饱和了,是初级的前端根本就没有公司要,哪怕你不要工资也没公司要你,前端刚学出来,没有任何的项目经验和工作经验,根本就不会有 ...
前端开发如日中天，怎样成为一名优秀的WEB前端程序员？
近些年,越来越多的程序员转移阵地,搞起前端开发. 有不少的Android开发的程序员直接转到了前端开发. 而就拿JavaScript来说,就因前端流行使得它在各种编程语言排行榜上名列前茅. 那么,如何 ...
rust代练吧_前端程序员，通过小练习学习 Rust （一）
背景在这之前,我其实断断续续学过一些 Rust,但是作为前端程序员,日常没有较多的场景使用,所以一直处于纸上得来终觉浅的阶段. 本系列文章会每周更新一次,目前会通过 https://exercism ...
前端程序员需要了解的Vue知识
前言:这一篇旨在教大家快速入门Vue2,每个知识点用案例解释不过学习vue2之前,建议学好JavaScript的基础知识: 前端程序员需要了解的JavaScript_成为前端大牛的博客-CSDN博客 ...
对于Web前端程序员来说，学历重要吗？
有学历的程序员永远不懂没学历的痛,就像白天不懂夜的黑. Web前端程序员提升学历的重要性有哪些?现在大部分来Web前端程序员都会考虑提升学历? 1.选择机会多很多Web前端程序员提升学历,只是为了能 ...

前端程序员应该理解的reduce方法，对你的js能力很有帮助

reduce方法接受参数：接受一个回调函数和初始值

代码讲解参数

个人理解：

常见使用：

去重：

累加：

统计出现次数：

比较大小：

前端程序员应该理解的reduce方法，对你的js能力很有帮助相关推荐

最新文章

热门文章

前端程序员应该理解的reduce方法，对你的js能力很有帮助

reduce方法接受参数： 接受一个回调函数和初始值

代码讲解参数

个人理解：

常见使用：

去重：

累加：

统计出现次数：

比较大小：

前端程序员应该理解的reduce方法，对你的js能力很有帮助相关推荐

最新文章

热门文章

reduce方法接受参数：接受一个回调函数和初始值