JavaSript自增自减运算符流程详细解析

235 阅读5分钟

自增自减运算使用的符号规范说法为操作符,符号为 ++ 、 - - 。

操作符流程

操作符分为两个流程

  • 递增或递减 是 +1 或 -1
  • 参与其他运算

为什么要分出操作符的流程?因为前置和后置的流程是相反的,并且操作符后置还有特殊情况,所以提前强调操作符的流程让你便于理解。

操作符前置和后置 ++ - -

流程的先后顺序非常重要这会导致某些情况操作符的程序能不能完整的运行。

操作符 前置 流程

  • 操作符 前置 会 先让变量自增 1 ,也就是 + 1
  • 操作符 + 1 再参与其他运算

运行条件:只要出现使用操作符的变量

操作符 前置 流程 执行顺序

变量 + 1 + 其他运算

操作符 前置 的 值

操作符 前置结果 的 值 等于 原变量的值 + 1

操作符 后置 流程

  • 操作符 后置 会 先 参与其他运算
  • 操作符 再变量自增 1 ,也就是 + 1

运行条件:使用操作符后置的变量在当前表达式中有其他运算 的时候才会开始

操作符 后置 流程 执行顺序

变量 + 其他运算 + 1

操作符 后置 的 值

操作符 后置结果的 值 等于 原变量的值

对 值 的解释

  • 注意这里说的 值 是操作符经过两个流程的计算结果,计算结果属于 1+1 肯定等于 2 的概念。

中场思考

现在我要求你回头看到后置的流程和后置的值的结果,在后置流程中讲到的自增运算在后面会进行 + 1,但是后置操作符说是等于原变量的值是不是互相矛盾的感觉?首先这个是对的但是这里又分两种情况,下面我面来看看是什么!

流程详解

流程声明

前置和后置决定操作符先执行哪一个流程,如果需要执行的流程没有条件就不能执行,那么之后的流程也不会执行。

操作符前置单独解释运行流程

操作符前置是先执行自增运算,所以无论有没有其他运算,你看到的结果都会是变量 + 1,

操作符后置单独解释运行流程

当操作符后置并且当前表达式中没有其他运算时,操作符后置的流程就无法执行,因为操作符后置的程序执行顺序是先进行其他运算,再进行自增 + 1 的运算,所以才会出现操作符后置并且当前表达式没有其它运算时它的结果值会等于使用操作符后置的变量的原值的情况。

那么就意味着操作符后置的时候会先查看当前表达式中有没有其他运算,有则执行程序,没有则不执行,即变量根本没有进行任何操作所以会等于原变量的值。

流程总结

那么通过上面的讲述,我们可以得知操作符前置是比较简单的无论怎么样都会进行 变量 + 1操作,但是操作符后置会出现使用操作符后置的变量值等于原变量值的情况,也就是程序根本不执行的情况,下面我们来区分操作符后置的情况有什么变化。

后置 操作符 的 两种情况

下列我会用 a 来代表某个变量或者其他类型,而且操作符的使用其实是没有限制的,任何类型都可以使用操作符进行计算,无论多复杂计算机都已经设置了相应的方法获取运算结果。

情况一

  • 在当前表达式中只有 a++ 时

此时 a++ 的变量就是如同上列说的一样,会等于原变量的 值。

因为 a++的流程是先 有其他运算,再进行自增的 + 1 ,所以当只有 a++的时候他会变成只是 a++ 的里的 a 的原值也就是原变量的值。

情况二

  • 在当前表达式中不仅有 a++, a 还要再次参与其他运算的时候

在参与其他运算的时候,a 的值就需要被使用,那么他会在被使用之前完成 a + 1 的操作,因为当前有其他运算会先进行,才开始进行 + 1 的操作,可能你会觉得这样的话顺序不是反了吗?一开始说是需要参与其他运算才会进行自增操作 a + 1,然后 a + 1 又会在参与其他运算之前就进行自增操作,确实这样说来互相矛盾,但是我们需要再次注意条件必须是先让程序检测到当前 a 会参与其他运算,之后才会让他进行 + 1,严格来说就是 a + 其他运算 + 1 ,你也可以理解为 有其他运算之后 才会有 a + 1 + 其他运算 结果都是一样的。

白话解释

其实这两种情况也就是因为他们的前后顺序导致的,在前置操作符当中变量先进行自增再进行运算,他的变量立刻就 + 1,即时没有参加其他运算过程,前置操作符的第一步变量自增已经实现了。后置操作符在只有一个递增操作的时候他又需要执行其他运算,这个时候他没有其他运算可以参与,只有自己的递增运算可以进行,但是递增运算的前提条件就是先参与其他运算,也就是说在只有后置操作符的而且后置操作符不参与其他运算的时候,后置操作符的流程跑不起来,也就会等于原变量的值,跑都跑步起来都没开始计算不等于原值等于什么?当有其他运算的时候 他的 + 1 才能跑出来,才会 + 1。

参考书籍原文

  • 图灵程序设计丛书 JavaScript高级程序设计 (第3版) L)C}995W(ZLK1I[YLSPTH.png