(a[b]++ || (a[b]=1),a),{})conso" />
当前位置:首页 > 日记 > 正文

Javascript面试经典套路reduce函数查重

Javascript面试经典套路reduce函数查重

今天在偶然间查看到了一段代码,代码使用了很短的篇幅完成了字符串统计相同字符次数这个经典面试题,其中用到了reduce这个方法,网上查了查,没有查到什么有价值的东西,导致浪费了我一些时间才看懂,现将我的思路整理如下:

原代码:

var arr="qweqrq"var info= arr.split('').reduce((a,b)=> (a[b]++ || (a[b]=1),a),{})console.log(info)

代码思路是这样的,先将字符串arr通过split方法切割成数组,然后使用reduce,这个方法干了什么呢,分为这几步:

1.首先reduce会接收一个callback来对数组里的每一个元素执行,如果有第二个参数如上例:{}。,那么callback将会使用这个{}作为参数来和数组中的第一个元素一同传入callback;

2.传入参数之后,会进行一个与门短路操作,也可以叫默认值操作,当a[b]++成真,则返回a[b]。而这里的a为{},b为"q",很明显a中并没有b,执行a[b]=1,那么就会给a[b]赋值为1,后面是一个逗号表达式,所以会返回有了a[b]:1这样属性的a对象;

与门短路操作:如果第一个操作数的值为true,进行短路操作,直接产生第一个操作数的值。如果为false,则产生第二个操作数的值。

逗号表达式:逗号表达式的一般形式是:表达式1,表达式2,表达式3……表达式n。逗号表达式的求解过程是:先计算表达式1的值,再计算表达式2的值,……一直计算到表达式n的值。最后整个逗号表达式的值是表达式n的值。

3.之后要说下reduce函数,它可以将之前一次执行后返回的结果作为参数继续和之后的元素一同传入callback执行,相当于fn(fn(fn(fn(a,b),c),d),e),fn即为callback;

4.在本例中,因为有第二个参数{}传入,所以callback执行了6次。相当于对数组中每一个元素都进行了录入和查重操作,比如当callback运行到第四次,这时的a是{q:1,w:1,e:1},执行callback,a[b]即a['q']存在,执行a['q']++,a['q']值为2,以此类推,最后得到的就是一个以数组每个元素为属性名,出现次数为属性值的对象。

需要注意的是,reduce是es5推出的方法,ie8及以下都不兼容。

以上所述是小编给大家介绍的Javascript面试经典套路reduce函数查重,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

相关文章

word怎么删除单元格word删除单元格

word怎么删除单元格word删除单元格

删除,方法,单元格,电脑软件,word,  人们在使用Word2010制作表格时,有时会遇到需要删除某个单元格的情况。那么下面就由小编给大家分享下word删除单元格的技巧,希望能帮助到您。word删除单元格方法一步骤一:选择好你要删除的表格word删除单元…

简单实现JS上传预览功能

简单实现JS上传预览功能

上传,简单实现,功能,电脑软件,JS,js实现上传图片预览功能思路是获取上传图片本地路径,再加载到页面中实现上传预览 HTML代码<div class="upload"> <input type="button" class="btn" onclick="browerfile.click()" value="上传…

JavaScript实现弹出广告功能

JavaScript实现弹出广告功能

弹出,功能,广告,电脑软件,JavaScript,废话不多说了,直接给大家贴代码了,具体代码如下所示:<span style="white-space:pre"> </span>var i=0;//记录次数 var timer;//定时器id //设置弹出广告 onload=function(){ //间隔四秒展示一次…

bootstrap插件treeview实现全选父

bootstrap插件treeview实现全选父

父节点,插件,子节点,全选,功能,项目需要实现权限管理,使用前端框架bootstrap,所以就直接选用了bootstrap的treeview扩展插件。先上图:选中父节点时,父节点下所有子节点也都全部选中,看代码1、HTML代码<h2>TreeView Checkable</h2><div id="tree…

使用jquery给新生的th绑定hover事

使用jquery给新生的th绑定hover事

事件,绑定,实例,新生,电脑软件,这是昨天在做一个动态的table时遇到的一个小问题,table的th需要让鼠标在移入和移出时显示颜色变化,之前th是固定写死的,直接可以用jquery的hover()方法来实现。现在th需要用js/ajax来动态生成加载到页面,用hover(…

angularjs+bootstrap菜单的使用示

angularjs+bootstrap菜单的使用示

示例代码,菜单,电脑软件,angularjs,bootstrap,需求背景:使用yo angular生成的项目默认主页是这样的:body部分涉及具体的业务内容,后续研究。这里主要研究菜单项、页眉的处理。页脚处理:自动生成的项目中,菜单和页脚设置都是在index.html文件中实…

react.js 获取真实的DOM节点实例 |

react.js 获取真实的DOM节点实例 |

节点,必看,实例,真实,电脑软件,为了获取真实的dom节点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput.f…

在Word2007公式中如何添加大型运算

在Word2007公式中如何添加大型运算

运算符,公式,电脑软件,  借助Word2007提供的插入公式结构功能,用户可以在Word2001文档中添加求和、乘积和副积、并集和交集等大型运算符。以下是小编为您带来的关于在Word2007公式中添加大型运算符,希望对您有所帮助。在Word2007公式中添加…

Ajax异步获取html数据中包含js方法

Ajax异步获取html数据中包含js方法

方法,数据,无效,异步,解决方法,页面上使用js写了一个获取后台数据的方法function data() { var tab = $("#dic") $.ajax({ url: '../demo.ashx?method=GetList', data: {}, dataType: 'json', type: 'pos…

excel2010 打印预览不显示的解决方

excel2010 打印预览不显示的解决方

显示,解决方法,电脑软件,strong,  在Excel中录入完数据以后进行打印前都会先预览打印效果,可是有些时候却不能正常显示。下面是由小编分享的excel2010 打印预览不显示的解决方法,希望对你有用。excel2010 打印预览不显示的解决方法预览不显…

word2010中怎么输入根号word2010中

word2010中怎么输入根号word2010中

输入,方法,步骤,根号,电脑软件,  今天有人问了一个问题,说是在word中使用域输入二分之三次根号下二,经过琢磨和研究,终于解决了问题,那么下面就由小编给大家分享下word2010中输入根号的技巧,希望能帮助到您。word2010中输入根号的步骤步骤一:虽…

Excel中考勤记录通过函数计算出加

Excel中考勤记录通过函数计算出加

函数,步骤,方法,考勤,计算出,  大家都知道现在上下班实行打卡制,当然打卡只能记录上下班的时间,但考勤人员还是需要打卡时间计算出加班时数,今天,小编就教大家在Excel中考勤记录通过函数计算出加班时间的方法。希望对你有帮助!Excel中考勤记录…