从两段代码说起

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

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

参考文章

JavaScript运算符:递增递减运算符前置和后置的区别的更多相关文章

  1. c++ 前置++与后置++的区别

    用C++编程的都知道,C++提供了一个非常强大的操作符重载机制,利用操作符重载,我们可以为我们自定义的类增加更多非常有用的功能.不过,C++也有限制,就是当我们为自定义的类重载操作符时,重载操作符的含 ...

  2. C++前置++与后置++的区别与重载

    ++属于单目运算符,前置与后置的实现代码不一样,下面以整数自增为例: // 前置++,返回自增后的值,且返回的是一个左值 int& operator++(){ *this += 1; retu ...

  3. C++ Primer笔记12_运算符重载_递增递减运算符_成员訪问运算符

    1.递增递减运算符 C++语言并不要求递增递减运算符必须是类的成员.可是由于他们改变的正好是所操作对象的状态.所以建议设定为成员函数. 对于递增与递减运算符来说,有前置与后置两个版本号,因此.我们应该 ...

  4. C++之运算符重载(前置++和后置++)

    今天在阅读<google c++ 编程风格>的文档的时候,5.10. 前置自增和自减:有一句话引起了我的注意: 对于迭代器和其他模板对象使用前缀形式 (++i) 的自增, 自减运算符.,理 ...

  5. PHP中的运算符---位运算符、递增递减运算符、三元运算符、字符串运算符、数组运算符、类型运算符、错误控制运算符

    1.位运算符 位运算符用来对整型数的指定位进行置位,如果被操作数是字符串,则对该字符串的ASCII码值进行操作. 运算类型 运算符 举例 结果 按位与 & $a & $b 将$a 与 ...

  6. 谨慎使用递增/递减运算符(C++)

    递增++和递减运算符--不论看起来还是用起来,都感觉是十分简单而又优雅的,然而其中却藏有无法受控制的陷阱,我们必须小心的避免错误的用法而出现的不可控的情况发生. 比方说:x = 2* x++ *(3 ...

  7. # c++运算符重载之 前置++, 后置++, 负号运算符, 类型转换函数, 以及输入输出运算符

    c++运算符重载之 前置++, 后置++, 负号运算符, 类型转换函数, 以及输入输出运算符 标签(空格分隔): c++ 前言 我在c++学习的过程中, 对这几个不太常见的运算符重载不太会写.出现了很 ...

  8. C++的前置++、后置++和前置--、后置--

    一.C++的前置++和后置++ 在C++中,运算符重载是你必须要掌握的重点,而前置++和后置++有什么区别呢?其实前置++和后置++是有关于 影响效率的问题,前置++比后置++的效率要高,原因是因为前 ...

  9. android Camera 如何判断当前使用的摄像头是前置还是后置

    现在 android 平台的智能手机一般都标配有两颗摄像头.在 Camera 中都存在摄像头切换的功能. 并且有一些功能前后置摄像头上会有所不同.譬如人脸检测,人脸识别,自动对焦,闪光灯等功能, 如果 ...

随机推荐

  1. 数据库 - SQLite3 中的数据类型

    ------------------------------ 安装 Sqlite3 和 数据库查看工具: sudo apt-get install sqlite3 sudo apt-get insta ...

  2. git如何获取用户名和邮箱

    答: git config user.name  (获取用户名)   git config user.email (获取邮箱)

  3. luogu3935 Calculating

    标题也许叫整除分块吧 求\(1\)到\(n\)因数的个数\(\sum_{i=1}^n(\sum_{d|n}1)\) 范围\(1e14\)时限3s \(n\sqrt{n}\)的暴力铁定gg 分开考虑 \ ...

  4. JavaScript紧凑学习

    JavaScript紧凑学习 windows本地,调用命令行: win键+R 键入cmd , (cmd是Command 命令行 简称) 目录是C盘下的 C:\Users\Administrator&g ...

  5. Ubuntu 14.04 下解决maven访问速度慢问题

    参考: maven国内镜像(maven下载慢的解决方法) maven中央仓库访问速度太慢的解决办法 Ubuntu 14.04 下解决maven访问速度慢问题 在启动OVX的时候,由于sh脚本中需要使用 ...

  6. 第五次程序设计作业 C++计算器雏形 调用文件输入输出

    一.C++计算器作业系列链接 第三次作业:C++计算器雏形 第三次作业附加:代码规范 第四次作业:命令行的调用及计算 MyGithub 二.本次作业相关 要求:第五次程序设计作业 根据这一次的作业要求 ...

  7. LA 3486 Cells(判祖先+栈模拟dfs)

    https://vjudge.net/problem/UVALive-3486 题意: 判断u是否是v的祖先. 思路: 很简单,dfs遍历,记录每个节点第一次访问时的时间戳 in[i] 和第二次访问时 ...

  8. Eclipse如何快速改变主题颜色

    厌倦了Eclipse的白底黑子,我们来更换下Eclipse的主题颜色,让眼睛更舒服一点 首先先进入网址:http://eclipsecolorthemes.org/ 选择一个主题进入,点击进入如下: ...

  9. mysql创建utf8数据库

    1.创建 CREATE DATABASE db_name DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci; 2.修改 ALTER DATABASE ...

  10. angular5 directive和component的区别

    指令分为三类,组件,属性指令和结构性指令 组件(Component directive):UI组件,继承于Directive: 属性指令(Attribute directive):改变组件的样式: 结 ...