最近发现在前端的面试题目中经常出现操作符类型转换的题目, 于是这里来进行一个 JavaScript 中的操作符类型转换示例总结, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
首先,我们先来做一些题目吧!为了统一,我不混着来写这些题目,面试题目中,经常将这些题目混起来,这样对你的迷惑度会更大,为了更方便演示,我在这里分模块写了一些题目,大家可以看下!
操作符字符串的隐性转换
乘法
- console.dir("-------以下乘法---------");
- console.dir(5*"5");
- console.dir(5*"a");
- console.dir(5*NaN);
- console.dir(5*null);
- console.dir(5*undefined);
- console.dir(5*5);
- console.dir("-------以上乘法---------");
除法
- console.dir("-------以下除法---------");
- console.dir(5/"5");
- console.dir(5/"a");
- console.dir(5/NaN);
- console.dir(5/null);
- console.dir(null/5);
- console.dir(5/undefined);
- console.dir(5/5);
- console.dir(5/0);
- console.dir(0/5);
- console.dir(0/0);
- console.dir("-------以上除法---------");
取余、求模
- console.dir("-------以下取余、求模--------");
- console.dir(16%"5");
- console.dir(5%"a");
- console.dir(5%NaN);
- console.dir(5%null);
- console.dir(null%5);
- console.dir(5෯ined);
- console.dir(5%5);
- console.dir(5%0);
- console.dir(0%5);
- console.dir(0%0);
- console.dir("-------以上取余、求模---------");
加法
- console.dir("-------以下加法--------");
- console.dir(16+"5");
- console.dir(5+"a");
- console.dir(5+NaN);
- console.dir(5+null);
- console.dir(5+undefined);
- console.dir(5+5);
- console.dir("两个数的和是"+5+5);
- console.dir("两个数的和是"+(5+5));
- console.dir("-------以上加法--------");
减法
- console.dir("-------以下减法--------");
- console.dir(16-"5");
- console.dir(5-"a");
- console.dir(5-NaN);
- console.dir(5-null);
- console.dir(5-undefined);
- console.dir(5-5);
- console.dir(5-true);
- console.dir(5-"true");
- console.dir(5-"");
- console.dir("两个数的差是"+5-5);
- console.dir("两个数的差是"+(5-5));
- console.dir("-------以上减法--------");
关系操作符
- console.dir("-------以下关系操作符--------");
- console.dir(16>"5");
- console.dir("16">"5");
- console.dir(5<"a");
- console.dir(5>=NaN);
- console.dir(5<NaN);
- console.dir(NaN>=NaN);
- console.dir(5>=null);
- console.dir(5>=undefined);
- console.dir(5>=5);
- console.dir(5>=true);
- console.dir(5>="true");
- console.dir(5>="");
- console.dir("Brick">"alphabet");
- console.dir("brick">"alphabet");
- console.dir("-------以上关系操作符--------");
乘法
- console.dir(5*"5"); //25
- console.dir(5*"a");//NaN
- console.dir(5*NaN);//NaN
- console.dir(5*null);0
- console.dir(5*undefined);//NaN
- console.dir(5*5);//25
下面说一下乘法隐性转换原则:
1、如果 2 个数值都是数字,那么直接进行乘法运算,(相信大家都会的,和小学数学一样,同时要注意数字的符号),如果乘积数值超过了 ECMAscript 的数值表示范围,则返回 Infinity(正无穷)或者 - Infinity(负无穷)
2、如果一个数是 NaN, 那么结果就是 NaN
3、如果 Infinity 与 0 相乘,结果是 NaN
4、假如一个操作符是数字,另外一个不是数值,那么先用 Number() 函数,将其进行转化,将转化出来的值与数字进行相乘。假如转换出来的结果出现 NaN,那么结果就是 NaN。
除法
- console.dir(5/"5");//1 将字符转化为数字进行相除
- console.dir(5/"a");//NaN 将"a"用Number()函数进行转化,出来的值是NaN,结果就是NaN
- console.dir(5/NaN);//NaN
- console.dir(5/null);//Infinity null用Number()函数进行转化,结果是0,那么5/0是正无穷
- console.dir(null/5);//0 同上0/5是0
- console.dir(5/undefined);//NaN undefined 用Number()进行转化,结果是NaN
- console.dir(5/5);//1
- console.dir(5/0);//Infinity
- console.dir(0/5);//0
- console.dir(0/0);//NaN //0除以0结果是NaN
下面说一下除法隐性转换原则:
和乘法类似,唯一多的一条就是 0/0 结果是 NaN
取余、求模
求余在项目中用的最多的是求奇数偶数的时候。我们经常用一个数值与 2 进行求余,结果是 0 那么这个数是偶数,结果是 1 那么这个数是奇数。
看看上面的题目:
- console.dir(16%"5"); //1 将字符串5通过Number()转化为5然后进行求余
- console.dir(5%"a");//NaN
- console.dir(5%NaN);//NaN
- console.dir(5%null);//NaN 将null 通过Number()转化,结果是0,然后计算5%0 ,结果是NaN
- console.dir(null%5);//0 同上0%5 取余,结果是0
- console.dir(5෯ined);//NaN
- console.dir(5%5);//0
- console.dir(5%0);//NaN
- console.dir(0%5);//0
- console.dir(0%0);//NaN
- console.dir(Infinity%Infinity);//NaN
- console.dir(5%Infinity);//5
- console.dir(Infinity%5); //NaN
下面说一下取余隐性转换原则:
和乘法一样,我说一下比较特别的地方吧!我们都知道被除数和除数的概念吧,小学的时候就学过的。
1、被除数是无穷大,除数是有限大的值,那么结果是 NaN
2、被除数是有限大的值,除数是 0,那么结果是 NaN
3、Infinity%Infinity 结果是 NaN
4、被除数是有限大的值,除数是无穷大的值,结果是被除数。
5、被除数是 0,结果是 0
减法
看看上面的例子吧!
- console.dir(16-"5");//11
- console.dir(5-"a");//NaN
- console.dir(5-NaN);//NaN
- console.dir(5-null);//5
- console.dir(5-undefined);//NaN
- console.dir(5-5);//0
- console.dir(5-true);//4
- console.dir(5-"true");//NaN
- console.dir(5-"");//5
- console.dir(5-Infinity);//-Infinity
- console.dir(Infinity-Infinity);//NaN
- console.dir("两个数的差是"+5-5);//NaN
- console.dir("两个数的差是"+(5-5));//两个数的差是0
下面说一下减法隐性转换原则:
和上面一样,相同的就不说了,我说一下减法特有的。
1、Infinity-Infinity 结果是 NaN
2、-Infinity-Infinity 结果是 - Infinity
3、一个数字减 Infinity 结果是 - Infinity
4、Infinity-(-Infinity)结果是 Infinity
5、如果操作数是对象,则调用对象 valueOf 方法,如果结果是 NaN 那么结果就是 NaN。如果没有 valueOf 方法,那么调用 toString() 方法,并将得到的字符串转换为数值。
关系操作符
关系运算符统一返回 true 或者 false
- console.dir(16>"5"); //true
- console.dir("16">"5");//false
- console.dir(5<"a");//false
- console.dir(5>=NaN);//false
- console.dir(5<NaN);//false
- console.dir(NaN>=NaN);//false
- console.dir(5>=null);//true
- console.dir(5>=undefined);//false
- console.dir(5>=5);//true
- console.dir(5>=true);//true
- console.dir(5>="true");//false
- console.dir(5>="");//true
- console.dir("Brick">"alphabet");//false B的字符串编码值是66 ,而a的字符串编码是97.因此false
- console.dir("brick">"alphabet");//true 小写字母b比a大,所以是true
下面说一下关系运算符隐性转换原则:
还是和上面一样,相同的就不说了。
如果比较的两个数都是字符串,那么会比较字符串对应的字符串编码值。
加法运算
加法运算隐性转换,我之所以最后说,是因为加法运算隐性转换和之前的不一样,之前的所有的运算符号,只要一个是数字,另一个也默认使用 Number()进行数字转换。加法运算不一样。加法运算只要其中一个是字符串,那么另外一个也会转换为字符串,然后进行字符串的拼接!
- console.dir(16+"5"); //156
- console.dir(5+"a");//5a
- console.dir(5+NaN);//NaN
- console.dir(5+null);//5
- console.dir('5'+null);//5null
- console.dir(5+undefined);//NaN
- console.dir(null+undefined);//NaN
- console.dir(5+5);//10
- console.dir("两个数的和是"+5+5);//两个数的和是55
- console.dir("两个数的和是"+(5+5));//两个数的和是10
下面说一下加法运算符隐性转换原则:
1、有一个是字符串,那么另外一个也会转换为字符串进行拼接。假如一个是字符串,另外一个是 null 或者 undefined,那么相加,null 或者 undefined 就会调用 String() 方法,获得字符串"null"或者"undefined",然后进行拼接。
2、假如一个数字加 null 或者 undefined,那么还是把 null 或者 undefined 进行 Number() 转换之后再相加。
3、剩下的原则和其他的差不多,就不多说了。
双等号隐性转换
把以下代码运行一遍,相信你自然就懂了~
- var a;
- console.dir(0 == false); //true
- console.dir(1 == true); //true
- console.dir(2 == {
- valueOf: function() {
- return 2
- }
- }); //true
- console.dir(a == NaN); //false
- console.dir(NaN == NaN); //false
- console.dir(8 == undefined); //false
- console.dir(1 == undefined); //false
- console.dir(2 == {
- toString: function() {
- return 2
- }
- }); //true
- console.dir(undefined == null); //true
- console.dir(null == 1); //false
- console.dir({
- toString: function() {
- return 1
- },
- valueOf: function() {
- return []
- }
- } == 1); //true
- console.dir(1 == "1"); //true
- console.dir(1 === "1"); //false
来源: http://www.phperz.com/article/17/0301/265303.html