准确理解 JS 的 ++ 运算符

对于刚开始接触前端开发的朋友们来说，可能地一个令人苦恼的问题是关于运算符 ++ 的计算，特别是它还有前置与后置的区别。当它们和一堆运算在一起的时候，常常令人头晕目眩！

我经常性地称它是一个***难人的问题，因为它本身所发生的操作又是十分的简单——加 1。是的，++ 运算符的唯一计算操作就是给它的操作数加 1。然而，它到底是怎么加的 1 呢？就我而言，我一直都觉得这很神奇，它应该是使用了某种魔法吧！

拨开层层迷雾，在你看见了它的庐山真面目后，你又会惊讶于它是如此的简单纯粹。这一切，都要从最基本的概念——表达式说起。

什么是表达式？表达式是对一个变量或值的引用，或是一组值和变量与运算符的组合。

举例来说，像 1、2 这样的字面值就是一个表达式，尽管它没有多大意义。我们更经常接触的表达式是像 1 + 1 这样的，值与运算符的组合。

表达式的本质是值。分两点来说，一是我们使用表达式的真正目的是要取得它背后的值；二是一个表达式总是会运算并返回一个值。比如，1 + 1 和 2 是等价的，在使用 1 + 1 这个表达式的地方，我们都可以把它换成值 2。这在计算机中之所以成立，是因为 1 + 1 这个表达式它总是会运算并返回值 2。试想一下，如果表达式 1 + 1 没有被计算，它怎么能和值 2 相等呢？

所以，1 + 1 和 2 是等价的准确说法，应该是表达式 1 + 1 的返回值和值 2 是等价的，它们是相等的。尽管前者的概念是表达式，后者的概念是值。

我们再来看一个例子：

let a = 1;
let b = a + 1;

请问这里的变量 b 等于多少？要正确的回答这个问题，你得知道在 a + 1 这个表达式中变量 a 也是一个表达式。所以，我们首先得知道表达式 a 的值是多少，然后将它和 1 相加。表达式和表达式可以通过运算符组合在一起，得到一个新值。这里，表达式 a 的值就是变量 a 引用的值 1。

再来看一个例子：

let a = 1;
let b = (a = 2) + 1;

请问这里的变量 b 又等于多少呢？或者说表达式 (a = 2) + 1 的值是多少？你可能发现了，关键点是要知道表达式 a = 2 的值是多少。

这里就引出了表达式的另一个重要内涵——副作用。表达式的副作用是指表达式在返回值的过程中对别处的值也产生了影响。赋值表达式的副作用就是将某个值赋给了变量，或者说它更换了变量中的值。在 (a = 2) + 1 中，赋值表达式 a = 2 会先给变量 a 赋值 2，然后返回这个变量的值。所以，这里表达式 a = 2 的返回值便就是 2。

有了上面这些概念后，你对前 ++ 和后 ++ 的区别就会有着很好的理解。

这里顺带补充一点，++ 运算符只能和变量一起使用。也就是说，++ 运算符的操作数必须是一个变量，因为它需要一个容器（变量）来承接它的副作用。

前 ++ 和后 ++ 的关键区别就在于它们对操作数执行加 1 的操作的时机点不同。前 ++ 是在返回表达式值之前就对操作数进行了加 1 的运算，后 ++ 则是在返回表达式值之后再对操作数执行加 1 的操作。

举例来说：

let a = 1;
let b = (a++) + 1 + a + (++a) + a + 1;

请问这里的变量 b 又会是等于多少呢？关键点就在 a++ 和 ++a 这两个表达式的值是多少！

a++ 是一个后 ++ 表达式，后 ++ 的副作用发生在它返回表达式值之后。所以，这里 a++ 会先返回表达式 a 的值。所以，这里表达式 a++ 的返回值就是变量 a 的直接引用值 1。

那么紧接在 a++ 后面的那个变量 a 又会是等于多少呢？是 2。因为，前面的 ++ 操作已经给 a 加了 1。所以，这里表达式  (a++) + 1 + a  等价于 1 + 1 + 2。

注意体会这里的操作，这个地方发生且仅发生了两件事：第一件事是返回变量 a 引用的值，第二件事是给变量 a 执行加 1 的运算。这就是为什么后面的 a 会是 2 的原因了，因为这时的 a 已经被加了 1。

++a 是一个前 ++ 表达式，前 ++ 的副作用发生在它返回表达式值之前。也就是说，前 ++ 表达式得到的值是 ++ 运算符执行计算后的结果值。所以，这里表达式 ++a 的值是 3。

所以，这里表达式 (a++) + 1 + a + (++a) + a + 1 等价于 1 + 1 + 2 + 3 + 3 + 1，最终计算结果为 11。

最后，和 ++ 对应的 -- 运算符的运算规则和 ++ 是完全一致的，只不过它的操作是对操作数执行减 1 的运算。