淺析JavaScript中的隱式類型轉(zhuǎn)換
為什么會(huì)出現(xiàn)隱式類型轉(zhuǎn)換
這個(gè)問題的本質(zhì)原因是因?yàn)镴avaScript 是一種 弱類型語言 ,這意味著它會(huì)自動(dòng)轉(zhuǎn)換值的數(shù)據(jù)類型,以使數(shù)據(jù)之間更容易相互比較和操作。
在 JavaScript 中,隱式類型轉(zhuǎn)換通常發(fā)生在以下情況下:
- 當(dāng)使用不同類型的值進(jìn)行操作時(shí)(例如數(shù)字和字符串)。
- 當(dāng)使用相等或不等運(yùn)算符(== 或 !=)進(jìn)行比較時(shí)。
- 當(dāng)對一個(gè)非布爾類型的值進(jìn)行布爾運(yùn)算時(shí)(例如if語句或邏輯運(yùn)算符)。
// 1.字符串和數(shù)字的轉(zhuǎn)換
"10" + 20 = "1020"
// 2.布爾和數(shù)字的轉(zhuǎn)換
// 當(dāng)使用 if 語句或邏輯運(yùn)算符時(shí),JavaScript 會(huì)將非布爾類型的值轉(zhuǎn)換為布爾值。
if (1) {
//會(huì)執(zhí)行
}
if (0) {
//不會(huì)執(zhí)行
}
// 3.字符串和布爾的轉(zhuǎn)換
// 如果將一個(gè)字符串轉(zhuǎn)換為布爾值,它將始終為 true,除非該字符串為空字符串
Boolean('') //false
Boolean('abc') //true
// 4.null 和 undefined 的轉(zhuǎn)換
+ null // 0
+ undefined // NaN
Boolean(null) // false
Boolean(undefined) // false
隱式類型轉(zhuǎn)換的內(nèi)部轉(zhuǎn)換機(jī)制
JavaScript 中隱式類型轉(zhuǎn)換的內(nèi)部轉(zhuǎn)換機(jī)制是比較復(fù)雜的,涉及到了數(shù)據(jù)類型、操作符、運(yùn)算順序等多方面的因素。
大體上說,JavaScript 中的隱式類型轉(zhuǎn)換通過 ToPrimitive 和 ToNumber 等內(nèi)部轉(zhuǎn)換操作來進(jìn)行。ToPrimitive 操作會(huì)將一個(gè)值轉(zhuǎn)換為一個(gè)原始值或?qū)ο?,?ToNumber 操作會(huì)將任何值轉(zhuǎn)換為一個(gè)數(shù)字。
當(dāng)兩個(gè)操作數(shù)具有不同的類型時(shí),JavaScript 引擎根據(jù)一系列規(guī)則來決定將其轉(zhuǎn)換為相同的類型。這些規(guī)則包括:
- 如果一個(gè)操作數(shù)是數(shù)字,則將另一個(gè)操作數(shù)轉(zhuǎn)換為數(shù)字。
- 如果一個(gè)操作數(shù)是字符串,則將另一個(gè)操作數(shù)轉(zhuǎn)換為字符串。
- 如果一個(gè)操作數(shù)是布爾值,則將另一個(gè)操作數(shù)轉(zhuǎn)換為布爾值。
- 如果一個(gè)操作數(shù)是對象,則嘗試將另一個(gè)操作數(shù)轉(zhuǎn)換為對象,否則將其轉(zhuǎn)換為原始類型。
具體的轉(zhuǎn)換規(guī)則如下:
ToPrimitive:如果值已經(jīng)是原始類型,則返回它本身。否則,如果值有 valueOf() 方法,如果返回值為原始類型則返回 valueOf() 的結(jié)果。否則,如果值有 toString() 方法,如果返回值為原始類型則返回 toString() 的結(jié)果。否則,拋出 TypeError。
ToNumber:如果值已經(jīng)是數(shù)字,則返回它本身。否則,如果值是一個(gè)對象,則嘗試調(diào)用 valueOf() 方法,并將其結(jié)果轉(zhuǎn)換為數(shù)字。否則,如果值是字符串,則嘗試將其解析為數(shù)字,并返回解析的結(jié)果。否則,返回 NaN。
何時(shí)會(huì)觸發(fā)ToPrimitive或ToNumber
JavaScript 中的 ToPrimitive 和 ToNumber 操作通常是自動(dòng)發(fā)生的,而不需要顯式的調(diào)用。但是,在某些情況下,我們可能需要顯式地使用這些操作符來進(jìn)行類型轉(zhuǎn)換,以確保代碼的正確性和可讀性。
ToPrimitive 主要用于原始值和對象之間的轉(zhuǎn)換,而 ToNumber 則主要用于任何值和數(shù)字之間的轉(zhuǎn)換。
比如:
1. 當(dāng)使用 + 運(yùn)算符連接字符串和數(shù)字時(shí),JavaScript 會(huì)將數(shù)字轉(zhuǎn)換為字符串。在這種情況下,可以使用 ToPrimitive 將對象轉(zhuǎn)換為原始值:
const obj = {
valueOf: function() {
return 42;
}
};
const result = "The answer is " + obj; // "The answer is 42"
2. 當(dāng)使用比較運(yùn)算符(例如 < 或 >)比較對象時(shí),也可以使用 ToPrimitive 來確保比較正確:
const obj1 = {
valueOf: function() {
return 2;
},
toString: function() {
return "2";
}
};
const obj2 = {
valueOf: function() {
return 1;
},
toString: function() {
return "1";
}
};
console.log(obj1 < obj2); // false
console.log(obj1 > obj2); // true
3. 當(dāng)需要將任何值轉(zhuǎn)換為數(shù)字時(shí),可以使用 ToNumber 運(yùn)算符:
const str = "42"; const num = +str; // 42 const str = "42.24"; const num = parseFloat(str); // 42.24
具體案例分析
[]+{} == ?? // "[object Object]"
在[]+{}中,[]和{}都是對象類型,而這兩個(gè)數(shù)要相加,JavaScript 引擎會(huì)將[]和{}轉(zhuǎn)換為原始類型進(jìn)行相加,因此會(huì)發(fā)生 ToPrimitive 操作。
在使用 ToPrimitive 操作時(shí),JavaScript 會(huì)先調(diào)用對象的 valueOf 方法,如果這個(gè)方法不存在或者不能返回一個(gè)原始值,則會(huì)自動(dòng)調(diào)用對象的 toString 方法。

{} 的 valueOf 方法返回對象本身。因?yàn)榭諏ο鬀]有任何有意義的原始值可以返回,因此 JavaScript 引擎會(huì)嘗試調(diào)用對象的 toString 方法來獲取一個(gè)原始值。toString 方法會(huì)返回對象的字符串表示形式,其默認(rèn)值為 '[object Object]' 。[]同理,[]的 toString 方法返回的是一個(gè)空字符。
所以最終表達(dá)式變成了
'' + '[object Object]' = '[object Object]'
總結(jié)
隱式類型轉(zhuǎn)換是JavaScript語言在設(shè)計(jì)是的一個(gè)缺陷,但在學(xué)習(xí)或者工作中合理的運(yùn)用它有時(shí)能給我們帶來很大的方便??偟膩碚f,隱式類型轉(zhuǎn)換在某些情況下可能會(huì)導(dǎo)致意料之外的結(jié)果,所以還是建議在編寫代碼時(shí)盡可能顯式地進(jìn)行類型轉(zhuǎn)換。
到此這篇關(guān)于淺析JavaScript中的隱式類型轉(zhuǎn)換的文章就介紹到這了,更多相關(guān)JavaScript隱式類型轉(zhuǎn)換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 淺析JavaScript中的隱式類型轉(zhuǎn)換
- JavaScript隱式類型轉(zhuǎn)換
- 總結(jié)Javascript中的隱式類型轉(zhuǎn)換
- 對存在JavaScript隱式類型轉(zhuǎn)換的四種情況的總結(jié)(必看篇)
- JavaScript中運(yùn)算符規(guī)則和隱式類型轉(zhuǎn)換示例詳解
- JS面試題大坑之隱式類型轉(zhuǎn)換實(shí)例代碼
- 有趣的JavaScript隱式類型轉(zhuǎn)換操作實(shí)例分析
- JavaScript隱式類型轉(zhuǎn)換代碼實(shí)例
- JavaScript隱式類型轉(zhuǎn)換例子總結(jié)
- JavaScript 隱式類型轉(zhuǎn)換規(guī)則詳解
- JS不同運(yùn)算符下隱式類型轉(zhuǎn)換的實(shí)現(xiàn)示例
相關(guān)文章
借助script進(jìn)行Http跨域請求:JSONP實(shí)現(xiàn)原理及代碼
script元素的src屬性能設(shè)置URL并發(fā)起HTTP GET請求實(shí)現(xiàn)腳本操作HTTP可以跨域通信而不受限與同源策略,接下來為大家詳細(xì)介紹下Http跨域請求實(shí)現(xiàn),感興趣的你可以參考下哈2013-03-03
Chrome擴(kuò)展頁面動(dòng)態(tài)綁定JS事件提示錯(cuò)誤
開發(fā)Chrome擴(kuò)展時(shí),頁面的popup.html中需要js的時(shí)候,直接將JS寫在動(dòng)態(tài)綁定JS事件會(huì)提示錯(cuò)誤,下面有個(gè)不錯(cuò)的解決方法,大家可以參考下2014-02-02
Javascript 設(shè)計(jì)模式(二) 閉包
本來應(yīng)該是第二章,接口,但因?yàn)殚]包實(shí)在不懂,所以先看看閉包2010-05-05
js基于FileSaver.js 瀏覽器導(dǎo)出Excel文件的示例
本篇文章主要介紹了js基于FileSaver.js 瀏覽器導(dǎo)出Excel文件的示例,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08
你必須知道的Javascript知識(shí)點(diǎn)之"深入理解作用域鏈"的介紹
本篇文章小編為大家介紹,你必須知道的Javascript知識(shí)點(diǎn)之"深入理解作用域鏈"的介紹。需要的朋友參考下2013-04-04
js與jquery實(shí)時(shí)監(jiān)聽輸入框值的oninput與onpropertychange方法
這篇文章主要介紹了js與jquery實(shí)時(shí)監(jiān)聽輸入框值的oninput與onpropertychange方法,實(shí)例分析了oninput與onpropertychange實(shí)現(xiàn)下拉框里自動(dòng)匹配關(guān)鍵字實(shí)時(shí)監(jiān)聽文本框value值變化的功能,需要的朋友可以參考下2015-02-02

