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函数查重，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！