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 相关文章推荐
js写一个字符串转成驼峰的实例
Jun 21 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 Javascript
jQuery实现图片左右滚动特效
Apr 20 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
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
input file获得文件根目录简单实现
2013/04/26 PHP
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
php单文件版在线代码编辑器
2015/03/12 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
eval的两组性能测试数据
2012/08/17 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
Python中的默认参数实例分析
2018/01/29 Python
python re模块的高级用法详解
2018/06/06 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
浅谈Python的list中的选取范围
2018/11/12 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
python中数字是否为可变类型
2020/07/08 Python
Python如何绘制日历图和热力图
2020/08/07 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
大学生国家助学金感谢信
2015/01/23 职场文书
大学生英文求职信范文
2015/03/19 职场文书
中学教师读书笔记
2015/07/01 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书