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

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

参考文章

转载于:https://juejin.im/post/5c40505b6fb9a04a0b2274a3

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值