本文介绍在 javascript 中比较多个变量值并获取最大值的实用方法，特别适用于答题系统中根据点击次数判定用户偏好，包含数组排序法和更优的 math.max() 方案，并附可直接运行的完整示例。
在构建互动式小测验（如行星偏好测试）时，常需根据用户对不同选项的点击次数（即得分）判断其“最匹配”的答案。你已正确初始化了 earthScore 和 venusScore 变量，并通过事件监听器为按钮点击累加分数。下一步的核心任务是：高效、可靠地比较多个分数变量，找出最高分对应的选项，并动态更新页面结果。
✅ 推荐方案：使用 Math.max() + 对象映射（简洁、安全、无需修改原数组）
相比将函数引用（如 earth、venus）推入数组再排序（原文案中的 tmpArray.push(earth) 实际会存入函数本身而非数值，存在逻辑错误），更准确、高效的做法是：
- 将所有分数变量组织为一个键值对对象，便于关联名称与数值；
- 使用 Math.max(...Object.values()) 快速获取最大分；
- 通过 Object.entries() 遍历找到对应选项名。
// 初始化分数（建议用 const/let 替代 var）
let earthScore = 0;
let venusScore = 0;
let questionCount = 0;
// 点击处理函数（保持原逻辑）
function earth() {
earthScore++;
questionCount++;
}
function venus() {
venusScore++;
questionCount++;
}
// 绑定事件监听器（确保 DOM 加载完成后执行）
document.addEventListener('DOMContentLoaded', () => {
const q1a4 = document.getElementById('q1a4');
const q1a5 = document.getElementById('q1a5');
q1a4.addEventListener('click', earth);
q1a5.addEventListener('click', venus);
});
// 判定并显示最终结果
function showResult() {
// 构建分数映射对象（可轻松扩展更多行星）
const scores = {
earth: earthScore,
venus: venusScore
// 如需添加：mars: marsScore, jupiter: jupiterScore
};
// 获取最高分
const maxScore = Math.max(...Object.values(scores));
// 找到第一个匹配该分数的选项名（支持同分时取首个）
const winner = Object.keys(scores).find(key => scores[key] === maxScore);
// 更新页面结果（假设 result 元素存在）
const result = document.getElementById('result');
if (result) {
result.innerHTML = `You are ${winner}!`;
}
}
// 在合适时机调用（例如：所有题目答完后）
// showResult();⚠️ 注意事项与最佳实践
- 避免排序陷阱：原文建议 tmpArray.push(earth) 实际推入的是函数对象，b - a 会导致 NaN；若想用数组，应推入数值：[earthScore, venusScore].sort((a,b) => b-a)[0]，但此法无法回溯选项名。
- 扩展性：使用对象映射（scores）后，新增选项只需在对象中添加一行，无需修改判定逻辑。
- 同分处理：当前 find() 返回首个匹配项；若需随机选择或提示“平局”，可改用 filter() 获取所有最高分键名再处理。
- 性能：Math.max() 对少量数值效率远高于排序，且语义清晰。
✅ 总结
对于初学者项目，不要对函数名排序，而要对数值本身比较。Math.max() 配合对象映射是最直观、健壮且易维护的解法。它既解决了“找出最大值”的核心需求，又自然关联了业务语义（如 "earth" → "You are earth!"），为后续功能（如多题统计、图表展示）打下良好基础。
