JavaScript中极易出错的操作符运算总结

 更新时间:2021年08月10日 12:57:38   作者:Charonmomo  
这篇文章主要给大家介绍了关于JavaScript中极易出错的操作符运算的相关资料,包括了算术运算符、比较运算符、逻辑运算符、赋值运算符、一元运算符以及运算优先级等问题,需要的朋友可以参考下

算术运算符

+ - * / % ()

非正常情况1: 有特殊值字面量参与的运算

  • NaN参与的运算:得到的结果都是NaN
  • Infinity参与的运算,视情况而定, 比如:
5/Infinity=0
5%Infinity=5
Infinity%5=NaN
Infinity+5=Infinity
Infinity / Infinity = NaN
Infinity - Infinity = NAN
Infinity % Infinity = NAN

工作中并不会使用特殊值运算,没有实际应用的意义,但是要了解,以防面试遇到

非正常情况2: 其他类型的数据参与数学运算。

有字符串参与的 + 运算(包括只有符号一边有字符的情况):+ 号变为连字符将前后连接成整体字符串。

例如:

        var a = 3 - "36" % 5 + "2" - 2
        console.log(a)
        var b = "36" % 5
        console.log(b)
        var c = 3 - "36" % 5 + "2"
        console.log(c)

输出:

20
1
22

隐式转换:除了字符串参与的 + 运算,其他情况下,所有其他数据类型参与数学运算时,计算机暗中将其他数据类型先自动转换成数字类型,再参与运算,这个过程中不需要使用parseInt()、Number() 等方法,过程是暗中进行,这就是一个隐式转换的过程。

隐式转换

其他的数据类型会隐式转换为数字类型:

  • 对应数字:纯数字字符串会转为对应的数字”123”→123
  • 转换为1: true
  • 转换为0:false、null、 “”空字符串、空白字符串
  • 转换为NaN:undefined、非空非纯数字字符串

比较运算符

也叫作关系运算符。一个 比较运算符 comparison operator 比较它的操作数并返回一个布尔类型值。运算结果要么是true,要么是false。

>  大于

<  小于

>= 大于等于

<= 小于等于

== 相等,只判断值大小是否相等,不判断数据类型

!= 不等,与相等完全相反

===全等,不光判断值相等,还要判断数据类型相等

!==不全等,与全等于完全相反

非正常情况1: 特殊值参与比较运算

  • NaN参与:不等于和不全等于结果是 true,其他的都得到 false
  • Infinity参与的运算,视情况而定, 比如:
Infinity == Infinity ->True
Infinity === Infinity ->True
Infinity > Infinity ->False
Infinity >= Infinity ->True

非正常情况2: 其他数据类型参与比较运算(排除字符串与字符串的比较

其他数据类型也会隐式转换为数字参与比较。

“123”→123 true→1 false→0 null→0 undefined→NaN “”→0 “abc”→NaN

null 的判断比较特殊:null 与 0 判断时,相等判断为 false,>= 和 <= 判断为 true

null == undefined -> True

非正常情况3: 字符串与字符串比较

不会发生隐式转换为数字,而是比较两个字符串的 Unicode 编码顺序

字符编码顺序:从前往后 0-9,A-Z,a-z,前面的小于后面的

比较时,不关心两个字符串的长度,从第一个字符开始比较,依次往后顺延比较,直到比较出大小,就不再往后比较

逻辑运算符

逻辑运算符常用于布尔类型值之间; 当操作数都是布尔值时,返回值也是布尔值

&&      逻辑与运算符且
||      逻辑或运算符
!       逻辑非运算符

非正常情况

  • 除了布尔类型的值之外,其他数据类型的值也可以参与逻辑运算。运算过程中需要将操作数隐式转换为布尔类型的值,参与判断计算,最终运算结果还是原来的某个位置的数据.
  • 并不是所有逻辑运算返回结果都是布尔值,其他数据参与得到的就是数据本身

隐式转换为布尔值的规律

  • 转为false:NaN、0、 “”空字符串、null、undefined
  • 转为true:非0 非NaN数字、非空字符串

当它们用于非布尔值的时候,返回值就可能是非布尔值。其实这种运算非常简单:

  • (逻辑与 a && b ) 如果a能被转换为false,那么返回a;否则,返回b
  • (逻辑或 a || b ) 如果a能被转换为true,那么返回a;否则,返回b

逻辑运算符运算顺序

综合运算顺序:非、与、或

赋值运算符

=   等于
+=  加等于
-=  减等于
*=  乘等于
/=  除等于
%=  取余等于
++  递加
--  递减

一元运算符

++ -- !

++ 或 -- 符号可以写在变量前和变量后面,位置不同可能导致程序运行结果不同

以 ++ 为例:

  • a++: ++ 符号在变量之后,a++ 在参与程序过程中使用的原始没有加 1 的值,使用完后第二次用 a 变量时,a 用的就是加 1 后的新值。先参与,后自加.
  • ++a:++ 符号在变量之前,++a 在参与过程中整体就使用 a 加 1 之后的新值,使用完后第二次用 a 变量时,a 用的也是加 1 的新值。先自加,后参与

例1

var a = 3; 
var b = a++; 
var c = ++a;
console.log(a,b,c)

输出:

5 3 5

例2

输出:

运算优先级

优先级从高到底:

1. () 优先级最高

2. 一元运算符 ++ -- !

3. 算数运算符 先* / % 后 + -

4. 关系运算符 > >= < <=

5. 相等运算符 == != === !==

6. 逻辑运算符 先&& 后||

7. 赋值运算符

var a = 4; var num = 1 * (2 + 3) && a++ || 5 > 6 && 7 < 8 || !9; 
console.log(num)

输出:

4

总结

到此这篇关于JavaScript中极易出错的操作符运算总结的文章就介绍到这了,更多相关JavaScript操作符运算内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js分页显示div的内容

    js分页显示div的内容

    对于div内容过高的情况,我们可以用js控制div分页
    2008-07-07
  • 对layui中的onevent 和event的使用详解

    对layui中的onevent 和event的使用详解

    今天小编就为大家分享一篇对layui中的onevent 和event的使用详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS实现用户注册时获取短信验证码和倒计时功能

    JS实现用户注册时获取短信验证码和倒计时功能

    在用户注册时,通常需要短信验证码,而且为了交互效果,也需要增加倒计时。该如何实现获取验证码倒计时功能呢?下面小编给大家分享JS实现用户注册时获取短信验证码和倒计时的代码,一起看看吧
    2016-10-10
  • uni-app使用uniCloud实现图形验证码(uni-captcha)详细过程

    uni-app使用uniCloud实现图形验证码(uni-captcha)详细过程

    这篇文章主要给大家介绍了关于uni-app使用uniCloud实现图形验证码(uni-captcha)的相关资料,实际开发工作中在登陆的时候经常需要图形验证码,需要的朋友可以参考下
    2023-07-07
  • webpack是如何实现模块化加载的方法

    webpack是如何实现模块化加载的方法

    这篇文章主要介绍了webpack是如何实现模块化加载的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • js统计页面上每个标签的数量实例代码

    js统计页面上每个标签的数量实例代码

    这篇文章通过实例代码给大家讲解了通过js统计页面上每个标签的数量,代码很简单,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-05-05
  • 前端使用正则表达式进行校验的方法总结大全

    前端使用正则表达式进行校验的方法总结大全

    很多时候我们需要校验用户输入的值是否正确,如果格式固定的,直接把错误的值传给后端显然是不合理的,所以我们要直接在前端进行正则校验,这篇文章主要给大家介绍了关于前端使用正则表达式进行校验的相关资料,需要的朋友可以参考下
    2024-07-07
  • uniapp实现横向滚动选择日期

    uniapp实现横向滚动选择日期

    这篇文章主要为大家详细介绍了uniapp实现横向滚动选择日期,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • IE的有条件注释判定IE版本详解(附实例代码)

    IE的有条件注释判定IE版本详解(附实例代码)

    IE的有条件注释是一种专有的(因此是非标准的)、对常规(X)HTML注释的Miscrosoft扩展。顾名思义,有条件注释使你能够根据条件(比如浏览器版本)显示代码块(不一定就是css,也可以是html代码,甚至是JavaScript代码)。
    2012-01-01
  • JS使用Date对象实时显示当前系统时间简单示例

    JS使用Date对象实时显示当前系统时间简单示例

    这篇文章主要介绍了JS使用Date对象实时显示当前系统时间,涉及javascript基于定时器动态操作Date对象相关实现技巧,需要的朋友可以参考下
    2018-08-08

最新评论