JavaScript中的操作符類型轉(zhuǎn)換示例總結(jié)

更新時(shí)間：2016年05月30日 18:24:37 作者：Aaron

最近發(fā)現(xiàn)在前端的面試題目中經(jīng)常出現(xiàn)操作符類型轉(zhuǎn)換的題目,于是這里來(lái)進(jìn)行一個(gè)JavaScript中的操作符類型轉(zhuǎn)換示例總結(jié),需要的朋友可以參考下

首先，我們先來(lái)做一些題目吧！為了統(tǒng)一，我不混著來(lái)寫這些題目，面試題目中，經(jīng)常將這些題目混起來(lái)，這樣對(duì)你的迷惑度會(huì)更大，為了更方便演示，我在這里分模塊寫了一些題目，大家可以看下！

操作符字符串的隱性轉(zhuǎn)換
乘法

 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%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(5+undefined);
 console.dir(5+5);
 console.dir("兩個(gè)數(shù)的和是"+5+5);
 console.dir("兩個(gè)數(shù)的和是"+(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("兩個(gè)數(shù)的差是"+5-5);
 console.dir("兩個(gè)數(shù)的差是"+(5-5));
 console.dir("-------以上減法--------");

關(guān)系操作符

 console.dir("-------以下關(guān)系操作符--------");
 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("-------以上關(guān)系操作符--------");

乘法

 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

下面說(shuō)一下乘法隱性轉(zhuǎn)換原則：

1、如果2個(gè)數(shù)值都是數(shù)字，那么直接進(jìn)行乘法運(yùn)算，（相信大家都會(huì)的，和小學(xué)數(shù)學(xué)一樣，同時(shí)要注意數(shù)字的符號(hào)），如果乘積數(shù)值超過(guò)了ECMAscript的數(shù)值表示范圍，則返回Infinity（正無(wú)窮）或者-Infinity（負(fù)無(wú)窮）
2、如果一個(gè)數(shù)是NaN,那么結(jié)果就是NaN
3、如果Infinity與0相乘，結(jié)果是NaN
4、假如一個(gè)操作符是數(shù)字，另外一個(gè)不是數(shù)值，那么先用Number()函數(shù)，將其進(jìn)行轉(zhuǎn)化，將轉(zhuǎn)化出來(lái)的值與數(shù)字進(jìn)行相乘。假如轉(zhuǎn)換出來(lái)的結(jié)果出現(xiàn)NaN，那么結(jié)果就是NaN。
除法

 console.dir(5/"5");//1  將字符轉(zhuǎn)化為數(shù)字進(jìn)行相除
 console.dir(5/"a");//NaN  將“a”用Number()函數(shù)進(jìn)行轉(zhuǎn)化，出來(lái)的值是NaN，結(jié)果就是NaN
 console.dir(5/NaN);//NaN
 console.dir(5/null);//Infinity null用Number()函數(shù)進(jìn)行轉(zhuǎn)化，結(jié)果是0，那么5/0是正無(wú)窮
 console.dir(null/5);//0 同上0/5是0
 console.dir(5/undefined);//NaN  undefined 用Number()進(jìn)行轉(zhuǎn)化，結(jié)果是NaN
 console.dir(5/5);//1
 console.dir(5/0);//Infinity
 console.dir(0/5);//0
 console.dir(0/0);//NaN //0除以0結(jié)果是NaN

下面說(shuō)一下除法隱性轉(zhuǎn)換原則：

和乘法類似，唯一多的一條就是0/0結(jié)果是NaN
取余、求模

求余在項(xiàng)目中用的最多的是求奇數(shù)偶數(shù)的時(shí)候。我們經(jīng)常用一個(gè)數(shù)值與2進(jìn)行求余，結(jié)果是0那么這個(gè)數(shù)是偶數(shù)，結(jié)果是1那么這個(gè)數(shù)是奇數(shù)。

看看上面的題目：

 console.dir(16%"5"); //1 將字符串5通過(guò)Number()轉(zhuǎn)化為5然后進(jìn)行求余
 console.dir(5%"a");//NaN
 console.dir(5%NaN);//NaN
 console.dir(5%null);//NaN 將null 通過(guò)Number()轉(zhuǎn)化，結(jié)果是0，然后計(jì)算5%0 ，結(jié)果是NaN
 console.dir(null%5);//0 同上0%5 取余，結(jié)果是0
 console.dir(5%undefined);//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

下面說(shuō)一下取余隱性轉(zhuǎn)換原則：

和乘法一樣，我說(shuō)一下比較特別的地方吧！我們都知道被除數(shù)和除數(shù)的概念吧，小學(xué)的時(shí)候就學(xué)過(guò)的。

1、被除數(shù)是無(wú)窮大，除數(shù)是有限大的值，那么結(jié)果是NaN
2、被除數(shù)是有限大的值，除數(shù)是0，那么結(jié)果是NaN
3、Infinity%Infinity結(jié)果是NaN
4、被除數(shù)是有限大的值，除數(shù)是無(wú)窮大的值，結(jié)果是被除數(shù)。
5、被除數(shù)是0，結(jié)果是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("兩個(gè)數(shù)的差是"+5-5);//NaN
 console.dir("兩個(gè)數(shù)的差是"+(5-5));//兩個(gè)數(shù)的差是0

下面說(shuō)一下減法隱性轉(zhuǎn)換原則：

和上面一樣，相同的就不說(shuō)了，我說(shuō)一下減法特有的。

1、Infinity-Infinity結(jié)果是NaN
2、-Infinity-Infinity結(jié)果是-Infinity
3、一個(gè)數(shù)字減Infinity結(jié)果是-Infinity
4、Infinity-（-Infinity）結(jié)果是Infinity
5、如果操作數(shù)是對(duì)象，則調(diào)用對(duì)象valueOf方法，如果結(jié)果是NaN那么結(jié)果就是NaN。如果沒有valueOf方法，那么調(diào)用toString()方法，并將得到的字符串轉(zhuǎn)換為數(shù)值。
關(guān)系操作符

關(guān)系運(yùn)算符統(tǒng)一返回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

下面說(shuō)一下關(guān)系運(yùn)算符隱性轉(zhuǎn)換原則：

還是和上面一樣，相同的就不說(shuō)了。

如果比較的兩個(gè)數(shù)都是字符串，那么會(huì)比較字符串對(duì)應(yīng)的字符串編碼值。

加法運(yùn)算

加法運(yùn)算隱性轉(zhuǎn)換，我之所以最后說(shuō)，是因?yàn)榧臃ㄟ\(yùn)算隱性轉(zhuǎn)換和之前的不一樣，之前的所有的運(yùn)算符號(hào)，只要一個(gè)是數(shù)字，另一個(gè)也默認(rèn)使用Number（）進(jìn)行數(shù)字轉(zhuǎn)換。加法運(yùn)算不一樣。加法運(yùn)算只要其中一個(gè)是字符串，那么另外一個(gè)也會(huì)轉(zhuǎn)換為字符串，然后進(jìn)行字符串的拼接！

 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("兩個(gè)數(shù)的和是"+5+5);//兩個(gè)數(shù)的和是55
 console.dir("兩個(gè)數(shù)的和是"+(5+5));//兩個(gè)數(shù)的和是10

下面說(shuō)一下加法運(yùn)算符隱性轉(zhuǎn)換原則：

1、有一個(gè)是字符串，那么另外一個(gè)也會(huì)轉(zhuǎn)換為字符串進(jìn)行拼接。假如一個(gè)是字符串，另外一個(gè)是null或者undefined，那么相加，null或者undefined就會(huì)調(diào)用String()方法，獲得字符串“null”或者“undefined”，然后進(jìn)行拼接。
2、假如一個(gè)數(shù)字加null或者undefined，那么還是把null或者undefined進(jìn)行Number()轉(zhuǎn)換之后再相加。
3、剩下的原則和其他的差不多，就不多說(shuō)了。

雙等號(hào)隱性轉(zhuǎn)換
把以下代碼運(yùn)行一遍，相信你自然就懂了~

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

您可能感興趣的文章: