zoukankan      html  css  js  c++  java
  • JavaScript运算符:递增递减运算符前置和后置的区别

    从两段代码说起

    var num1 = 2;
    var num2 = 20;
    var num3 = --num1 + num2;
    var num4 = num1 + num2;
    console.log(num1 +'-' + num2 +'-'+ num3 +'-' + num4)
    

    将四个数分别打印是多少?

    var num1 = 2;
    var num2 = 20;
    var num3 = num1-- + num2;
    var num4 = num1 + num2;
    console.log(num1 +'-' + num2 +'-'+ num3 +'-' + num4)
    

    这段代码运行之后将四个数分别打印又是多少?

    如果你能果断地说出答案并且能自圆其说,那也就没必要继续看下去了。

    递增运算符和递减运算符

    我们都知道,JavaScript中的递增运算符是 ++,递减运算符是 --。简单来说,递增运算符就是将变量+1,递减运算符就是让变量-1,可是前置和后置结果是不一样的,也是很容易混淆的。

    前置型递增(递减)

    前置型简单理解就是先计算再赋值。例如

    var a = 1;
    var b = ++a;
    console.log(a);  //2
    console.log(b);  //2
    

    上面的表达式也可以理解为:

    var a = 1;
    a = a + 1;
    var b = a;
    

    后置型递增(递减)

    后置型简单理解就是先赋值再计算。例如

    var a = 1;
    var b = a++;
    console.log(a);  //2
    console.log(b);  //1
    

    上面的表达式也可以理解为:

    var a = 1;
    var i = a;
    a = a + 1;
    var b = i;
    

    原理

    前置和后置型运算符之所以有上面的区别,是因为运算符的优先级。在各运算符按照优先级的不同由高到低排列顺序中:

    • 后置型递增(递减)运算符的优先级是17
    • 前置型递增(递减)运算符的优先级是16
    • 赋值运算符=的优先级是3

    所以,++和--会优先于=执行。但是这边我自己也还有个疑问,前置型的还可以用优先级解释,但是后置型的怎么解释呢,讲道理它也比=的优先级高啊,这个我还有点疑问。

    然后根据MDN上对递增(++)的解释:

    • 如果后置(postfix)使用,即运算符位于操作数的后面(如 x++),那么将会在递增前返回数值。
    • 如果前置(prefix)使用,即运算符位于操作数的前面(如 ++x),那么将会在递增后返回数值。

    根据这个解释,在例子中

    var a = 1;
    console.log(a++)  //1
    

    a++实际上是等于a递增之前的数值的,也就是1,这个在开发中容易被忽略,要谨记。

    总结

    回到最上面的代码,第一段代码分别会打印:1-20-21-21,第二段代码会打印:1-20-22-21

    我们开发中需要记住的是:前置型是先计算再返回数值,后置型是先返回数值再计算。

    参考文章

  • 相关阅读:
    20 行代码:Serverless 架构下用 Python 轻松搞定图像分类
    Serverless 的内存配置与超时时间
    Serverless 架构与事件规范
    如何用 Serverless 优雅地给网站图片加水印
    修改rpmbuild构建目录的位置
    rpmbuild之构建目录结构解析
    全量编译与增量编译
    c堆排序的实现
    c优先队列的实现
    c栈的实现
  • 原文地址:https://www.cnblogs.com/wancheng7/p/10283668.html
Copyright © 2011-2022 走看看