字符串字符计数：经典循环与 Reduce 的魔法-CSDN博客

本文链接：https://blog.csdn.net/dongxiaod1/article/details/147962787

字符串字符计数：经典循环与 Reduce 的魔法 ✨

在 JavaScript 开发中，我们经常会遇到统计字符串中每个字符出现次数的需求。这看似简单，但可以通过不同的方法来实现，每种方法都有其独特的魅力和应用场景。今天，我们就来探讨两种常见的解决方法：传统的 for 循环和函数式编程利器 reduce。

🔄 方法一：经典的 `for` 循环

最直观、最容易想到的方法就是使用一个 for 循环遍历字符串的每一个字符，并用一个对象来存储每个字符的计数。

const str = "fgasdfadfdasd";

// 1.传统解决办法
const obj = {}; // 创建一个空对象用于存储字符计数
for (let i = 0; i < str.length; i++) {
  const char = str[i]; // 获取当前字符
  if (obj[char]) {
    // 如果对象中已经有该字符的键，则计数加一
    obj[char]++;
  } else {
    // 如果对象中没有该字符的键，则初始化计数为一
    obj[char] = 1;
  }
}

console.log(obj); // 输出：{ f: 2, g: 1, a: 3, s: 3, d: 4 }

思路解析：

初始化一个空对象 obj。
使用 for 循环从第一个字符遍历到最后一个字符。
在每次循环中，获取当前字符 char。
检查 obj 对象中是否已经存在以 char 为键的属性。
- 如果存在，说明之前已经遇到过这个字符，将对应的计数值加一。
- 如果不存在，说明是第一次遇到这个字符，在 obj 对象中创建一个以 char 为键的属性，并将值初始化为 1。
循环结束后，obj 对象就包含了每个字符及其出现的次数。

这种方法易于理解，逻辑清晰，是新手入门时常用的解决思路。

🚀 方法二：拥抱 Reduce 的函数式风格

reduce 是 JavaScript 数组的一个高阶函数，它可以将一个数组“归约”为一个单一的值。虽然它通常用于计算总和、平均值等，但它的强大之处在于其灵活性，可以用于各种累计操作，包括我们这里的字符计数。

const str = "fgasdfadfdasd";

// 2.使用reduce解决
const result = str.split("").reduce(function (accumulator, currentValue) {
  // accumulator (a): 累加器，这里是用于存储字符计数的对象，初始值为 {}
  // currentValue (b): 当前正在处理的字符
  if (accumulator[currentValue]) {
    accumulator[currentValue]++;
  } else {
    accumulator[currentValue] = 1;
  }
  return accumulator; // 每次迭代后，返回更新后的累加器对象
}, {}); // reduce 的第二个参数是累加器的初始值，我们传入一个空对象

console.log("result", result); // 输出：result { f: 2, g: 1, a: 3, s: 3, d: 4 }

思路解析：

首先，使用 str.split("") 将字符串转换为一个字符数组。
然后，对这个字符数组调用 reduce 方法。
reduce 方法接收一个回调函数和一个初始值（这里是 {}）。
回调函数有两个主要参数：
- accumulator（累加器）：在每次迭代中，它会持有之前迭代的结果。在第一次迭代时，它是我们提供的初始值 {}。
- currentValue（当前值）：当前正在处理的数组元素，也就是字符串中的一个字符。
在回调函数内部的逻辑与传统方法类似：检查 accumulator 对象中是否已存在当前字符的计数，存在则加一，不存在则初始化为一。
关键点：每次回调函数都需要返回更新后的累加器。reduce 会将这个返回值作为下一次迭代的 accumulator。
reduce 方法执行完毕后，返回最终的累加器对象，即包含所有字符计数的对象。

✨ 优化 Reduce 代码：更简洁的写法

reduce 的写法可以进一步简化，尤其是在回调函数逻辑比较简单的情况下。

const str = "fgasdfadfdasd";

// 优化代码
const result = str.split("").reduce((a, b) => (a[b]++ || (a[b] = 1), a), {});
// a: 累加器对象
// b: 当前字符
// (a[b]++ || (a[b] = 1), a) 是使用了逗号运算符 (,)
// 逗号运算符会从左到右依次执行表达式，并返回最后一个表达式的值
// a[b]++：尝试将 a[b] 的值加一，如果 a[b] 是 undefined 或 0，则结果为 NaN 或 0 (取决于 ++ 的位置，这里是后置++)
// || (a[b] = 1)：如果 a[b]++ 的结果是“假值”（例如 NaN, 0），则执行 a[b] = 1，将计数初始化为 1。
// a：最后返回累加器对象 a

console.log("result", result); // 输出：result { f: 2, g: 1, a: 3, s: 3, d: 4 }

思路解析：

这种优化主要利用了 JavaScript 的一些特性：

箭头函数：简化了函数定义。
逗号运算符 (,)：允许在同一个表达式中执行多个操作，并返回最后一个操作的结果。
逻辑或运算符 (||) 的短路特性：a[b]++ || (a[b] = 1) 这部分是核心。
- a[b]++ 会尝试对当前字符的计数进行自增。如果 a[b] 之前是 undefined 或 0，a[b]++ 的结果会是 NaN 或 0，这些都是“假值”。
- 当 a[b]++ 的结果是“假值”时，逻辑或运算符会继续判断右边的表达式 (a[b] = 1)。这时，a[b] 被赋值为 1，即初始化了该字符的计数。
- 如果 a[b] 之前有值（大于 0），a[b]++ 的结果是该值加一，这是一个“真值”，逻辑或运算符会短路，不会执行右边的赋值操作。
最后返回 a：逗号运算符确保最后返回的是更新后的累加器对象 a。