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


Posted in Javascript onMarch 23, 2017

今天在偶然间查看到了一段代码,代码使用了很短的篇幅完成了字符串统计相同字符次数这个经典面试题,其中用到了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函数查重,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javaScript 利用闭包模拟对象的私有属性
Dec 29 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
javascript实现textarea中tab键的缩排处理方法
Jun 26 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
Webpack实战加载SVG的方法
Dec 26 Javascript
js生成word中图片处理方法
Jan 06 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 #jQuery
vue.js实现含搜索的多种复选框(附源码)
Mar 23 #Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 #Javascript
JS实现两周内自动登录功能
Mar 23 #Javascript
面试常见的js算法题
Mar 23 #Javascript
Vue.Js中的$watch()方法总结
Mar 23 #Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 #Javascript
You might like
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
FCKeditor添加自定义按钮
2008/03/27 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
关于URL最大长度限制的相关资料查证
2014/12/23 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
onpropertypchange
2006/07/01 Javascript
JQuery实现自定义对话框的代码
2008/06/15 Javascript
Javascript UrlDecode函数代码
2010/01/09 Javascript
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
express.js中间件说明详解
2019/03/19 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
vue之延时刷新实例
2019/11/14 Javascript
Python监控主机是否存活并以邮件报警
2015/09/22 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
用python对oracle进行简单性能测试
2020/12/05 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
师说教学反思
2014/02/07 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
孝女彩金观后感
2015/06/10 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript