JavaScript自增自减运算符用法解析

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《JavaScript 自增自减运算符前后置区别详解》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

本文解析 JavaScript 中 `i++` 与 `++i`（及 `i--` 与 `--i`）的关键差异，说明为何捐赠计数器需两次点击才更新数字，并提供正确写法与健壮性优化方案。

在你提供的代码中，计数器首次点击不更新显示数字的根本原因，源于对后置自增/自减运算符（i++ / i--）执行顺序的误解。

JavaScript 中：

• i++ 是先使用当前值，再加 1；
• ++i 是先加 1，再使用新值。

来看原始逻辑：

tracker.innerHTML = i++; // 先赋值 i 的旧值（如 0），再将 i 变为 1

这意味着：
✅ 按钮颜色立即改变（副作用发生）
❌ tracker.innerHTML 被设为 旧值（如第 1 次点击时仍显示 0），而 i 已悄然变为 1
➡️ 第 2 次点击时，i++ 才把 1 赋给 innerHTML，用户终于看到 1 —— 这就是“两击生效”的根源。

✅ 正确做法是使用前置运算符，确保更新后的值被立即显示：

donate = function() {
    donateButton.style.backgroundColor = 'red';
    tracker.innerHTML = ++i; // 先 i+1，再赋值（如 0→1，显示 1）
};

undonate = function() {
    if (i > 0) { // 防止负数捐赠量，增强健壮性
        unDonateButton.style.backgroundColor = 'blue';
        tracker.innerHTML = --i; // 先 i-1，再赋值（如 1→0，显示 0）
    }
};

⚠️ 补充重要注意事项：

• 边界防护必不可少：undonate 中未检查 i > 0 会导致数量变为负数（如 -1, -2），语义错误且易引发后续逻辑问题；
• 避免全局变量污染：建议用 let i = 0 替代 var i = 0，并考虑封装为模块或 IIFE；
• 样式重置缺失：当前代码点击“Donate”后红色常驻，“Un-Donate”后蓝色常驻，理想体验应支持状态互斥（例如点击任一按钮时，另一按钮恢复默认色）；
• 可访问性建议：为按钮添加 aria-live="polite" 或更新 aria-valuenow 属性，提升屏幕阅读器兼容性。

完整修复版示例（含状态清理）：

const donateButton = document.getElementById("donate");
const unDonateButton = document.getElementById("undonate");
const tracker = document.getElementById("container");
let i = 0;

tracker.textContent = i;

function updateTracker(value) {
    tracker.textContent = value;
}

donateButton.addEventListener("click", () => {
    donateButton.style.backgroundColor = "red";
    unDonateButton.style.backgroundColor = ""; // 重置另一按钮
    updateTracker(++i);
});

unDonateButton.addEventListener("click", () => {
    if (i > 0) {
        unDonateButton.style.backgroundColor = "blue";
        donateButton.style.backgroundColor = ""; // 重置另一按钮
        updateTracker(--i);
    }
});

掌握 ++i 与 i++ 的语义差异，不仅是修复此 Bug 的关键，更是理解 JavaScript 表达式求值顺序的重要基础。每一次看似微小的运算符选择，都可能成为 UI 行为是否符合直觉的分水岭。

好了，本文到此结束，带大家了解了《JavaScript自增自减运算符用法解析》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！