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内存管理详细解析
Nov 11 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
深入浅出理解JavaScript高级定时器原理与用法
Aug 02 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 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
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
JS实现简易日历效果
2021/01/25 Javascript
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
详解Python的Django框架中的通用视图
2015/05/04 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
阿里云:Aliyun.com
2017/02/15 全球购物
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
测绘工程系学生的自我评价
2013/11/30 职场文书
致接力运动员广播稿
2014/02/17 职场文书
活动宣传策划方案
2014/05/23 职场文书
人事局接收函
2015/01/31 职场文书
三国演义读书笔记
2015/06/25 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python