今天在偶然间查看到了一段代码,代码使用了很短的篇幅完成了字符串统计相同字符次数这个经典面试题,其中用到了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)的更多相关文章

  1. 5个经典的JavaScript面试基础问题

    JavaScript程序员在IT领域中的需求量非常巨大.如果你非常精通JavaScript,你会有很多换工作.涨薪水的机会.但是在一家公司录用你之前,你必须顺利通过面试,证明你的技能.在本文中,我将向 ...

  2. Javascript中数组查重的方法总结大全

    数组查重:简单点说,就是找出数组中重复的元素然后去除,最后得到一个没有重复元素的数组. // 方法一思路:     1.构建一个新的数组,用于存放结果.       2.for循环中每次从数组取出一个 ...

  3. 论文 查重 知网 万方 paperpass

    相信各个即将毕业的学生或在岗需要评职称.发论文的职场人士,论文检测都是必不可少的一道程序.面对市场上五花八门的检测软件,到底该如何选择?选择查重后到底该如何修改?现在就做一个知识的普及.其中对于中国的 ...

  4. 面试经典算法题集锦——《剑指 offer》小结

    从今年 3 月份开始准备找实习,到现在校招结束,申请的工作均为机器学习/数据挖掘算法相关职位,也拿到了几个 sp offer.经历这半年的洗礼,自己的综合能力和素质都得到了一个质的提升. 实话说对于未 ...

  5. JavaScript面试的完美指南(开发者视角)

    为了说明 JS 面试的复杂性,首先,请尝试给出以下结果: onsole.log(2.0 == "2" == new Boolean(true) == "1") ...

  6. js查重去重性能优化心得

    概述 今天产品反映有个5000条数据的页面的保存按钮很慢,查看代码看到是因为点击保存按钮之后,进行了查重操作,而查重操作是用2个for循环完成了,时间复杂度是O(n^2).没办法,只能想办法优化一下了 ...

  7. 快速掌握JavaScript面试基础知识(三)

    译者按: 总结了大量JavaScript基本知识点,很有用! 原文: The Definitive JavaScript Handbook for your next developer interv ...

  8. 26个精选的JavaScript面试问题

    译者按: 从各个平台精选整理出26道由浅入深的题目助你面试 原文: Top 26 JavaScript Interview Questions I Wish I Knew 译者: Fundebug 为 ...

  9. 攻破javascript面试的完美指南【译】

    攻破javascript面试的完美指南(开发者视角) 0. 前言 本文适合有一定js基础的前端开发人员阅读.原文是我google时无意发现的, 被一些知识点清晰的解析所打动, 决定翻译并记录下来.这个 ...

随机推荐

  1. Syslog4j如何实现接收日志

    1.Syslog4j是一个实现Syslog(RFC3164)协议的Java开源类库包括客户端与服务器端.通过 UDP/IP, TCP/IP, TCP/IPover SSL/TLS, Unix Sysl ...

  2. 关于ionic开发的一些总结(项目启动设置,app图标名称更改)

    1.更改包名称 一般项目刚生成时,ionic会根据项目名称自动给你生成一个包名.要修改包名的话,在根目录的config配置文件中,<widget id="x.x.x"换成自己 ...

  3. CREELINKS平台_处理器CeAd资源使用说明(CeAd的配置与使用)

    0x00 CREELINKS平台简介     CREELINKS(创e联)是由大信科技有限公司研发,集合软硬件.操作系统.数据云储存.开发工具于一体,用于物联网产品的设计.研发与生产的平台.    平 ...

  4. Dockerfile注意事项

    准则 尽量将Dockerfile放在空目录中,如果目录中必须有其他文件,则使用.dockerignore文件. 避免安装不必须的包. 每个容器应该只关注一个功能点. 最小化镜像的层数. 多行参数时应该 ...

  5. 实例了解js面向对象的封装和继承等特点

    1.面向对象特点 相比之前按照过程式写法,面向对象有以下几个特点; 1.抽象:抓住核心问题,就是将很多个方法放在一个对象上.对象由属性和方法组成,属性就是我们定义的变量,它是静态的:方法就是行为操作, ...

  6. NSInternalInconsistencyException attempt to delete row 2 from section 4 which only contains 0 rows before the update 问题原因

    insertRowsAtIndexPaths 和 deleteRowsAtIndexPaths 同 numberOfRowsInSection 的关系 如果不处理好这个关系,大概所有的问题都是这样的: ...

  7. 【译】Nodejs最好的ORM - TypeORM

    TypeORM github: https://github.com/typeorm/typeorm 这篇译文是从TypeORM github上的使用说明上翻译过来的,已经提交PR并merge到库中了 ...

  8. 浅析NopCommerce的多语言方案

    前言 这段时间在研究多语言的实现,就找了NopCommerce这个开源项目来研究了一下,并把自己对这个项目的粗浅认识与大家分享一下. 挺碰巧的是昨天收到了NopCommerce 3.90 发布测试版的 ...

  9. 每天一个linux命令(35)--free命令

    free命令可以显示Linux系统中空闲的.易用的物理内存及swap内存,及被内核使用的buffer.在Linux系统监控的工具中,free 命令是最经常使用的命令之一. 1.命令格式: free [ ...

  10. css模拟Bootstrap响应式布局——栅格

    做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...