JS隐式类型转换规则

JavaScript中,类型转换只有三种:
1、转换成数字
2、转换成布尔值
3、转换成字符串

1、加法运算操作符

加号运算操作符在Javascript可以做为数字的相加,也用于字符串连接符,所以要特别注意。其转换规则是:\color{red}{当加号两边都是数字的时候执行加法,否则一律连接}。所以加号操作符的规则分种情况:

\color{red}{(1)如果有一侧为String类型}

加法运算在这种情况下,如果有一侧为String类型,则将另一侧转换为字符串,最后连接起来。
注意:对象,数组,函数,布尔, 则先调用toString()方法取得字符串值,调用其valueOf()方法,然后在拼接到一起。对于undefined和null,分别调用String()显式转换为字符串。

console.log('1' + 2) // '12'
console.log('1' + {}) // '1[object Object]' 等价于 console.log('1' + {}.toString());
console.log('1' + []) // '1' 空数组执行toString()方法后被转义成空字符串
console.log('1' + ['1','2','a']) // '11','2','a'
console.log('1' + function(){}) //'1function(){}'
console.log('1' + true) // '1true'
console.log('1' + undefined) // '1undefined' 等价于 console.log('1' + String(undefined));
console.log('1' + null) // '1null'
console.log('1' + NaN) // '1NaN'

\color{red}{(2)如果有一侧是Number类型,另一侧是原始类型,则将元素类型转换成Number类型}

console.log(1 + 1) // 2
console.log(1 + true) // 2
console.log(1 + null) // 1

\color{red}{(3)如果有一侧是Number类型,另一侧为引用类型,将引用类型和Number类型转换成字符串后拼接。}

console.log(1 + {}) // '1[object Object]'
console.log(1 + []) // '1'
console.log(1 + [1,2,3]) // '11,2,3'

\color{red}{以上 3 点,优先级从高到低}

下边的是一些特殊情况。

console.log(1 + NaN) // 'NaN'
console.log('1' + NaN) // '1NaN'
console.log({} + NaN) // NaN
console.log({} + []) // 0
console.log([] + []) // ''
console.log({} + {}) // '[object Object][object Object]'

2、减号(-)运算符、乘除(*, /)、取模运算符(%)

这些操作符针对的是运算,所以他们具有共同性:如果操作值之一不是数值,则被隐式调用Number()函数进行转换。可以看出,这里必须的搞懂各种类型调用Number()函数后的结果。

console.log('2' - 1) // 1
console.log('2' - {}) // NaN
console.log(2 * ['10']) // 20  ['10']首先会变成 '10', 然后再变成数字 10

3、逻辑语句中的类型转换

比如if,for,while循环,其表达式结果往往是一个Boolean类型,这时候就会出现js的隐式类型转换。

(1)单个变量时候,会先将变量转换为Boolean值

转换规则是:只有 null undefined '' NaN 0 false 这几个是 false,其他的情况都是 true,比如 {} , []。

(2)使用 == 比较的情况,有5种情况

\color{red}{1)NaN和其他任何类型比较永远返回false,包括和他自己}

NaN == 0 //false
NaN == NaN  //false

$\color{red}{2)Boolean 和其他任何类型比较,Boolean 首先被转换为 Number 类型。</font>

true == 1 // true
true == ['1']  // true  true会转换成1,['1']会拆解成'1',在参考下边的规则3
true == ['1','2']  // false  
false == undefined //false 首先 false 变成 0,然后参考规则4
false == null //false 

\color{red}{3)String和Number比较,先将String转换为Number类型}

'1' == 1 // true
'' == 0  // true  ''会转变成0

\color{red}{4)null == undefined比较结果是true,除此之外,null、undefined和其他任何结果的比较值都为false}

null == undefined // true
null == 0  // false 
null == false  // false 
undefined == 0  // false 
undefined == false  // false 

\color{red}{5)原始类型和引用类型做比较时,引用类型会依照ToPrimitive规则转换为原始类型}

什么是ToPrimitive规则?

JS引擎内部转换为原始值ToPrimitive(obj,preferredType)函数接受两个参数,第一个obj为被转换的对象,第二个preferredType为希望转换成的类型(默认为空,接受的值为Number或String)在执行ToPrimitive(obj,preferredType)时如果第二个参数为空并且obj为Date的实例时,此时preferredType会被设置为String,其他情况下preferredType都会被设置为Number.

如果preferredType为Number,ToPrimitive执行过程如下:

1、如果obj为原始值,直接返回;
2、否则调用 obj.valueOf(),如果执行结果是原始值,返回之;
3、否则调用obj.toString(),如果执行结果是原始值,返回之;
4、否则抛异常。

如果preferredType为String,将上面的第2步和第3步调换,即:

1、如果obj为原始值,直接返回;
2、否则调用obj.toString(),如果执行结果是原始值,返回之;
3、否则调用 obj.valueOf(),如果执行结果是原始值,返回之;
4、否则抛异常。

1 == {} // false
0 == [] // true
'1,2' == [1, 2 ] //true [1, 2]通过 toString 得到一个基本类型值
'[object Object]' == { name: '小坦克'} //true 
'[object Object]' == {  } //true 

今天就是中秋节啦,提前祝大家新年快乐!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容