JavaScript 自增自减运算符 ++/-- 前置后置区别

++i 和 i++ 对变量的最终影响完全一样，都是加 1；区别只在于这个表达式本身返回什么值。前置的 ++i 先加再返回加完的新值，后置的 i++ 先返回原值再加。所以单独一行写 i++ 和 ++i 没有任何差别，一旦把它塞进赋值、拼接、函数参数里，结果就差 1。

这个差别在实际代码里最容易咬人的地方是「打印出来的值和页面显示的值不一致」：'b:' + b-- 拼接时用的是自减前的旧值，而下一行 console.log(b) 读到的已经是减完的新值，同一次点击里两个数字对不上。下面这个 demo 就是把四种写法各绑一个按钮，点一下同时看页面和控制台，直接把差异摆出来。

示例

四个变量 a b c d 初值都是 3，四个按钮各演示一种写法。重点对比 cutPrev（--a，页面显示 2、控制台也是 2，一致）和 cutAfter（b--，页面显示 3、控制台是 2，差一个）——同一次点击里两处取到的值不同，就是后置运算符「先返回旧值」的直接体现。

另外 addAfter 里写的是 d-- 而不是 d++，和按钮文案不一致，实际点下去数字是往下走的。末尾那段 json 不是示例代码，是 demo 容器的配置，show: true 让源码默认展开。

::: demo [vanilla]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div>
      <p class="p1"></p>
      <p class="p1"></p>
      <p class="p1"></p>
      <p class="p1"></p>

      <button onclick="cutPrev()">--前置</button>
      <button onclick="cutAfter()">后置--</button>
      <button onclick="addPrev()">++前置</button>
      <button onclick="addAfter()">后置++</button>
    </div>
    <script>
      const p1 = document.getElementsByClassName('p1');
      const h1 = document.getElementsByTagName('h1');

      let a = 3,
        b = 3,
        c = 3,
        d = 3;
      p1[0].innerText = 'a:' + a;
      p1[1].innerText = 'b:' + b;
      p1[2].innerText = 'c:' + c;
      p1[3].innerText = 'd:' + d;

      function cutPrev() {
        p1[0].innerText = 'a:' + --a;
        console.log('a:', a);
      }

      function cutAfter() {
        p1[1].innerText = 'b:' + b--;
        console.log('b:', b);
      }

      function addPrev() {
        p1[2].innerText = 'c:' + ++c;
        console.log('c:', c);
      }

      function addAfter() {
        p1[3].innerText = d--;
        console.log('d:', d);
      }
    </script>
  </body>
</html>

{
  "show": true
}

:::