JavaScript 面试经典套路：利用 reduce 函数实现字符串查重与统计

引言：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），对数组中的每个元素依次执行。若提供第二个参数（如本例中的 {}），则该参数会作为初始值，与数组的第一个元素一同传入回调函数。

2. 传入参数后，执行逻辑与门短路操作（也可视为默认值处理）。当 a[b]++ 为真时，直接返回 a[b]；若 a[b] 不存在（如 a 为 {}，b 为 'q'），则执行 a[b]=1，此时 a[b] 被赋值为 1。由于后续是逗号表达式，最终返回包含属性 a[b]:1 的对象 a。

逻辑与门短路操作：若第一个操作数的值为 true，则进行短路操作，直接返回第一个操作数的值；若为 false，则返回第二个操作数的值。

逗号表达式:逗号表达式的一般形式是：表达式1，表达式2，表达式3……表达式n。逗号表达式的求解过程是：先计算表达式1的值，再计算表达式2的值，……一直计算到表达式n的值。最后整个逗号表达式的值是表达式n的值。

3. 关于 reduce 函数，它会将上一次执行回调后返回的结果作为累加器，继续与后续元素一同传入回调函数执行。其执行逻辑类似于 fn(fn(fn(fn(a,b),c),d),e)，其中 fn 即为回调函数。

4. 在本例中，由于传入了第二个参数 {}，回调函数共执行了 6 次（对应字符串长度）。这相当于对数组中的每个元素进行了录入和查重操作。例如，当回调运行到第四次时，累加器 a 的状态为 {q:1, w:1, e:1}。继续执行回调，此时 a[b]（即 a['q']）已存在，执行 a['q']++，a['q'] 的值变为 2。以此类推，最终得到一个对象，其属性名为数组元素，属性值为该元素出现的次数。

兼容性注意事项

需要注意的是，reduce 是 ES5 标准中引入的方法，在 IE8 及更低版本的浏览器中不兼容。

以上是对 JavaScript 面试中利用 reduce 函数进行字符串查重的经典套路解析，希望对大家有所帮助。如有疑问欢迎留言，小编会及时回复。感谢大家对本站的支持！