1. 挑战背景：模拟点赞/点踩按钮行为
在许多用户界面中，按钮的点击行为不仅仅是简单的触发事件，还可能涉及复杂的状态切换。以YouTube的点赞/点踩按钮为例，其行为规则如下：
- 互斥性： 不能同时点赞和点踩。
- 取消操作： 再次点击已激活的按钮会取消当前状态，恢复到“无状态”（Nothing）。
- 覆盖操作： 如果当前状态是“点赞”，点击“点踩”按钮会直接切换到“点踩”状态，反之亦然。
- 初始状态： 没有任何按钮被激活时，状态为“无状态”（Nothing）。
- 空输入： 如果没有提供任何按钮输入序列，最终状态也应为“无状态”（Nothing）。
我们的目标是创建一个函数，接收一个按钮点击序列作为输入，并返回最终的按钮状态。
示例输入与预期输出：
- [Dislike] => Dislike
- [Like, Like] => Nothing
- [Dislike, Like] => Like
- [Like, Dislike, Dislike] => Nothing
2. 初始尝试与常见误区分析
在解决此类问题时，初学者常犯的错误是未能充分考虑所有状态转换规则，特别是“取消”和“覆盖”行为。
立即学习“Java免费学习笔记（深入）”；
考虑以下一种常见的错误实现：
function likeOrDislike(buttons) {
let answer = 'Nothing'; // 初始化状态为 'Nothing'
for (let i = 0; i < buttons.length; i++) {
// 这里的逻辑只判断当前按钮是否不是 'Nothing'
// 如果是 'Like' 或 'Dislike'，就直接赋值给 answer
if (buttons[i] !== 'Nothing') {
answer = buttons[i];
}
// 缺少了对当前状态和新点击按钮之间关系的判断
// 比如：如果当前状态是 'Like'，再次点击 'Like'，应该变为 'Nothing'
// 但此代码会保持 'Like' 不变。
}
return answer;
}问题分析：
上述代码的问题在于，它只关注了当前输入 buttons[i] 本身是否是有效的操作（即不是“Nothing”），然后无条件地将其赋值给 answer。它没有考虑以下关键规则：
- 取消操作： 当 buttons[i] 与当前的 answer 状态相同时，应该将 answer 重置为 Nothing。此代码无法实现这一点。例如，[Like, Like] 序列，第一次点击后 answer 变为 Like，第二次点击 Like 时，answer 仍会保持 Like，而不是预期的 Nothing。
- 覆盖操作： 虽然在 [Dislike, Like] 这种情况下，最终结果 Like 是正确的，但这只是因为 Like 是序列中的最后一个有效按钮。这种逻辑无法正确处理所有状态转换，因为它没有明确地根据当前状态来决定新状态。
本质上，这段代码只是简单地记录了序列中最后一个非“Nothing”的按钮，而没有模拟按钮的“按压”和“释放”的交互逻辑。
3. 基于循环的命令式解决方案
为了正确实现点赞/点踩逻辑，我们需要在每次迭代中比较当前按钮输入与当前的激活状态，并根据规则更新状态。
function likeOrDislike(buttons) {
let state = 'Nothing'; // 初始化当前状态为 'Nothing'
for (let i = 0; i < buttons.length; i++) {
// 规则1：如果当前按下的按钮与当前激活的状态相同，表示取消操作
if (buttons[i] === state) {
state = 'Nothing'; // 将状态重置为 'Nothing'
}
// 规则2：如果当前按下的按钮与当前激活的状态不同，表示新的激活或覆盖操作
else {
state = buttons[i]; // 将状态更新为当前按下的按钮
}
}
return state;
}代码解释：
- let state = 'Nothing';: 我们用 state 变量来跟踪当前的按钮激活状态，并将其初始化为 Nothing，符合规则。
- for (let i = 0; i < buttons.length; i++): 遍历输入的按钮序列。
- if (buttons[i] === state): 这是处理“取消操作”的关键。如果用户点击的按钮 (buttons[i]) 与当前激活的状态 (state) 相同，这意味着用户正在取消当前的选择。例如，如果 state 是 Like，用户再次点击 Like，那么 state 应该变回 Nothing。
-
else { state = buttons[i]; }: 这是处理“覆盖操作”或“首次激活”的关键。
- 如果 state 是 Nothing，用户点击 Like 或 Dislike，buttons[i] 将与 state 不同，此时 state 会被更新为 buttons[i]（首次激活）。
- 如果 state 是 Like，用户点击 Dislike，buttons[i] 将与 state 不同，此时 state 会被更新为 Dislike（覆盖操作）。
- 如果 state 是 Dislike，用户点击 Like，buttons[i] 将与 state 不同，此时 state 会被更新为 Like（覆盖操作）。
这种基于 if-else 判断的循环方法清晰地模拟了按钮的交互逻辑，是理解状态转换的直观方式。
4. 利用 reduce 实现函数式解决方案
对于这种需要根据一系列输入序列累积计算最终状态的场景，JavaScript 的 Array.prototype.reduce() 方法是一个非常优雅且强大的工具。
// 定义常量，提高代码可读性
const Nothing = 'Nothing';
const Like = 'Like';
const Dislike = 'Dislike';
function likeOrDislikeFunctional(seq) {
// reduce 方法接受一个回调函数和一个初始值
// 累加器 'a' (accumulator) 代表当前状态
// 当前值 'c' (current value) 代表当前按下的按钮
return seq.reduce((a, c) => {
// 如果当前按下的按钮与当前状态相同，则取消操作，状态变为 Nothing
if (a === c) {
return Nothing;
}
// 否则，当前按下的按钮成为新的状态
else {
return c;
}
}, Nothing); // 初始状态为 Nothing
}代码解释：
- const [Nothing, Like, Dislike] = ['Nothing', 'Like', 'Dislike']: 定义常量有助于避免魔法字符串，提高代码的可读性和维护性。
-
seq.reduce((a, c) => { ... }, Nothing):
- reduce 方法会遍历 seq 数组中的每个元素。
- 回调函数 (a, c) => { ... } 接收两个参数：a 是累加器（即上一次迭代的返回值，代表当前的状态），c 是当前数组元素（即当前按下的按钮）。
- Nothing 是 reduce 的第二个参数，表示累加器的初始值，这里就是初始状态。
- if (a === c) { return Nothing; }: 这与命令式解决方案中的 if (buttons[i] === state) 逻辑相同。如果当前状态 a 与当前按钮 c 相同，说明是取消操作，返回 Nothing 作为新的累加器值。
- else { return c; }: 这与命令式解决方案中的 else { state = buttons[i]; } 逻辑相同。如果当前状态 a 与当前按钮 c 不同，说明是新的激活或覆盖操作，返回 c 作为新的累加器值。
reduce 方法以其简洁和函数式编程的特性，使得代码更加紧凑和富有表达力，尤其适合处理这种序列状态转换的场景。
5. 示例与总结
让我们使用两种解决方案来验证之前的示例：
// 导入或定义常量
const Nothing = 'Nothing';
const Like = 'Like';
const Dislike = 'Dislike';
// 循环解决方案
function likeOrDislikeLoop(buttons) {
let state = Nothing;
for (let i = 0; i < buttons.length; i++) {
if (buttons[i] === state) {
state = Nothing;
} else {
state = buttons[i];
}
}
return state;
}
// Reduce 解决方案
function likeOrDislikeReduce(seq) {
return seq.reduce((a, c) => a === c ? Nothing : c, Nothing);
}
console.log("--- 循环解决方案 ---");
console.log(`[${Dislike}] => ${likeOrDislikeLoop([Dislike])}`); // Dislike
console.log(`[${Like}, ${Like}] => ${likeOrDislikeLoop([Like, Like])}`); // Nothing
console.log(`[${Dislike}, ${Like}] => ${likeOrDislikeLoop([Dislike, Like])}`); // Like
console.log(`[${Like}, ${Dislike}, ${Dislike}] => ${likeOrDislikeLoop([Like, Dislike, Dislike])}`); // Nothing
console.log(`[] => ${likeOrDislikeLoop([])}`); // Nothing
console.log("\n--- Reduce 解决方案 ---");
console.log(`[${Dislike}] => ${likeOrDislikeReduce([Dislike])}`); // Dislike
console.log(`[${Like}, ${Like}] => ${likeOrDislikeReduce([Like, Like])}`); // Nothing
console.log(`[${Dislike}, ${Like}] => ${likeOrDislikeReduce([Dislike, Like])}`); // Like
console.log(`[${Like}, ${Dislike}, ${Dislike}] => ${likeOrDislikeReduce([Like, Dislike, Dislike])}`); // Nothing
console.log(`[] => ${likeOrDislikeReduce([])}`); // Nothing输出：
--- 循环解决方案 --- [Dislike] => Dislike [Like, Like] => Nothing [Dislike, Like] => Like [Like, Dislike, Dislike] => Nothing [] => Nothing --- Reduce 解决方案 --- [Dislike] => Dislike [Like, Like] => Nothing [Dislike, Like] => Like [Like, Dislike, Dislike] => Nothing [] => Nothing
两种方法都正确地实现了逻辑。
总结与注意事项：
- 状态管理的核心： 解决此类问题的关键在于准确地定义和更新“当前状态”。每次处理新的输入时，都必须考虑它与当前状态的关系，并据此决定如何转换到下一个状态。
- 规则的精确实现： 严格按照所有规则（取消、覆盖、初始状态、空输入）来设计逻辑，是确保代码正确性的基础。
-
命令式 vs. 函数式：
- 循环（命令式） 方法通常更直观，易于理解其一步步的执行过程，适合初学者或逻辑复杂需要详细追踪的场景。
- reduce（函数式） 方法更简洁、表达力强，特别适合将一个数组“归约”为一个单一结果的场景。它强调数据的不可变性和转换，是现代JavaScript开发中常用的模式。
- 代码可读性： 使用有意义的变量名和常量（如 Nothing, Like, Dislike）可以显著提高代码的可读性和维护性。
- 测试： 针对所有边缘情况和示例进行测试是必不可少的，以确保逻辑的健壮性。
通过理解和掌握这两种实现方式，开发者可以更灵活、高效地处理各种复杂的状态管理和序列处理问题。
