如何操作JavaScript运算符类型转换

目录
文章目录隐藏
  1. 乘法隐性转换
  2. 除法隐性转换
  3. 取余、求模
  4. 减法
  5. 关系操作符
  6. 双等号隐性转换
  7. 加法运算
  8. 结束语

本文主要讲的是有关 javascript 的操作运算符类型转换,对于大牛来说很简单,但是对于刚入门的前端同学想要记住这么多运算符之间的转换可能有点吃力。其实我们在前端面试题中,很多同学在实际运算的时候经常出错。之前有一篇文章是写的关于《js ==号引起的隐性类型转化方法》,那么这篇文章也算是一个补充,需要的朋友可以收藏下来,记不清的时候可以当做字典一样翻阅查看。

乘法隐性转换

乘法隐性转换原则:

1、如果 2 个数值都是数字,那么直接进行乘法运算,(相信大家都会的,和小学数学一样,同时要注意数字的符号),如果乘积数值超过了 ECMAscript 的数值表示范围,则返回 Infinity(正无穷)或者-Infinity(负无穷)

2、如果一个数是 NaN,那么结果就是 NaN

3、如果 Infinity 与 0 相乘,结果是 NaN

4、假如一个操作符是数字,另外一个不是数值,那么先用 Number()函数,将其进行转化,将转化出来的值与数字进行相乘。假如转换出来的结果出现 NaN,那么结果就是 NaN。
举个例子:

console.log(6*"6"); //36
console.log(6*"a");//NaN
console.log(6*NaN);//NaN
console.log(6*null);0
console.log(6*undefined);//NaN
console.log(6*6);//36

按着这些题目自己下去敲一遍,巩固一下。

除法隐性转换

除法隐性转换原则 和乘法类似,唯一多的一条就是 0/0 结果是 NaN 如下例子:

console.log(6/"6");//1    将字符转化为数字进行相除
console.log(6/"a");//NaN   将“a”用 Number()函数进行转化,出来的值是 NaN,结果就是 NaN
console.log(6/NaN);//NaN
console.log(6/null);//Infinity  null 用 Number()函数进行转化,结果是 0,那么 5/0 是正无穷
console.log(null/6);//0  同上 0/5 是 0
console.log(6/undefined);//NaN   undefined 用 Number()进行转化,结果是 NaN
console.log(6/6);//1
console.log(6/0);//Infinity
console.log(0/6);//0
console.log(0/0);//NaN //0 除以 0 结果是 NaN

取余、求模

求余在项目中用的最多的是求奇数偶数的时候。我们经常用一个数值与 2 进行求余,结果是 0 那么这个数是偶数,结果是 1 那么这个数是奇数。
取余隐性转换原则:
和乘法一样,这里说一下比较特别的地方吧!在小学的时候就学过被除数和除数的概念。
1、被除数是无穷大,除数是有限大的值,那么结果是 NaN
2、被除数是有限大的值,除数是 0,那么结果是 NaN
3、Infinity%Infinity 结果是 NaN
4、被除数是有限大的值,除数是无穷大的值,结果是被除数。
5、被除数是 0,结果是 0
看一下例子:

console.log(16%"5"); //1  将字符串 5 通过 Number()转化为 5 然后进行求余
console.log(6%"a");//NaN
console.log(6%NaN);//NaN
console.log(6%null);//NaN  将 null 通过 Number()转化,结果是 0,然后计算 5%0 ,结果是 NaN
console.log(null%6);//0  同上 0%5 取余,结果是 0
console.log(6%undefined);//NaN
console.log(6%6);//0
console.log(6%0);//NaN
console.log(0%6);//0
console.log(0%0);//NaN
console.log(Infinity%Infinity);//NaN
console.log(6%Infinity);//6
console.log(Infinity%6); //NaN

减法

下面说一下减法隐性转换原则:

和上面一样,相同的就不说了,我说一下减法特有的。

1、Infinity-Infinity 结果是 NaN

2、-Infinity-Infinity 结果是-Infinity

3、一个数字减 Infinity 结果是-Infinity

4、Infinity-(-Infinity)结果是 Infinity

5、如果操作数是对象,则调用对象 valueOf 方法,如果结果是 NaN 那么结果就是 NaN。如果没有 valueOf 方法,那么调用 toString()方法,并将得到的字符串转换为数值。
看一下例子:

console.log(16-"5");//11
console.log(5-"a");//NaN
console.log(5-NaN);//NaN
console.log(5-null);//5
console.log(5-undefined);//NaN
console.log(5-5);//0
console.log(5-true);//4
console.log(5-"true");//NaN
console.log(5-"");//5
console.log(5-Infinity);//-Infinity
console.log(Infinity-Infinity);//NaN
console.log("两个数的差是"+5-5);//NaN
console.log("两个数的差是"+(5-5));//两个数的差是 0

关系操作符

关系运算符隐性转换原则:

还是和上面一样,相同的就不说了。

如果比较的两个数都是字符串,那么会比较字符串对应的字符串编码值。
看一下例子,关系运算符统一返回 true 或者 false

console.log(16>"6"); //true
console.log("16">"6");//false
console.log(6<"a");//false console.log(6>=NaN);//false
console.log(6<NaN);//false console.log(NaN>=NaN);//false
console.log(6>=null);//true
console.log(6>=undefined);//false
console.log(6>=6);//true
console.log(6>=true);//true
console.log(6>="true");//false
console.log(6>="");//true 
console.log("Brick">"alphabet");//false  B 的字符串编码值是 66 ,而 a 的字符串编码是 97.因此 false
console.log("brick">"alphabet");//true 小写字母 b 比 a 大,所以是 true

双等号隐性转换

具体请看:《js ==号引起的隐性类型转化方法

加法运算

加法运算隐性转换,我之所以最后说,是因为加法运算隐性转换和之前的不一样,之前的所有的运算符号,只要一个是数字,另一个也默认使用 Number()进行数字转换。加法运算不一样。加法运算只要其中一个是字符串,那么另外一个也会转换为字符串,然后进行字符串的拼接!
先说一下加法运算符隐性转换原则:

1、有一个是字符串,那么另外一个也会转换为字符串进行拼接。假如一个是字符串,另外一个是 null 或者 undefined,那么相加,null 或者 undefined 就会调用 String()方法,获得字符串“null”或者“undefined”,然后进行拼接。

2、假如一个数字加 null 或者 undefined,那么还是把 null 或者 undefined 进行 Number()转换之后再相加。

3、剩下的原则和其他的差不多,就不多说了。

看看一开始的例子吧!

console.log(16+"5"); //165
console.log(5+"a");//5a
console.log(5+NaN);//NaN
console.log(5+null);//5
console.log('5'+null);//5null
console.log(5+undefined);//NaN
console.log(null+undefined);//NaN
console.log(5+5);//10
console.log("两个数的和是"+5+5);//两个数的和是 55
console.log("两个数的和是"+(5+5));//两个数的和是 10

结束语

以上就是 js 的运算符隐性转换全部内容,虽然很简单,但是老话说得好,温故而知新,可以为师矣!多看看多敲几遍,你就可以完全掌握了。

「点点赞赏,手留余香」

3

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 如何操作JavaScript运算符类型转换

发表回复