JS隱式轉(zhuǎn)換與類型比較

隱式轉(zhuǎn)換

隱式轉(zhuǎn)換（Implicit Conversion）是指在表達(dá)式求值或操作中自動發(fā)生的類型轉(zhuǎn)換。當(dāng)使用不同的數(shù)據(jù)類型進(jìn)行操作時，JavaScript 會自動進(jìn)行類型轉(zhuǎn)換以滿足操作的要求。

隱式轉(zhuǎn)換在編寫邏輯時經(jīng)常會出現(xiàn)，特別是在需要進(jìn)行判斷的邏輯場景中。舉個例子：

// 字符串和數(shù)字
var num = 42;
var str = "The answer is " + num; // 字符串拼接
console.log(str); // 輸出 "The answer is 42"
var result = "3" - "1"; // 數(shù)字運算
console.log(result); // 輸出 2

// 布爾值
if (1) {
console.log("條件為真"); // 1 被隱式轉(zhuǎn)換為 true
}
var bool = !0; // 數(shù)字 0 被隱式轉(zhuǎn)換為 false
console.log(bool); // 輸出 false

需要注意的是，隱式轉(zhuǎn)換雖然可以簡化代碼編寫，但有時也可能導(dǎo)致意外的行為和錯誤。因此，當(dāng)涉及類型轉(zhuǎn)換時，建議使用顯式轉(zhuǎn)換（如 Number()、String()、parseInt() 等）來明確表達(dá)意圖，使代碼更加可讀和可維護(hù)。

類型比較

一、基本數(shù)據(jù)類型的比較(String/Number/Boolean/undefined/null)

• 第一步，將當(dāng)前的變量值轉(zhuǎn)換為Number類型的值
• 第二步，將轉(zhuǎn)換后的變量值進(jìn)行比較

'23' == 23; // -> 23 == 23 -> true
'0' == false; // -> 0 == 0 -> true
'0' == undefined; // -> 0 == NaN -> false
'asd' == null; // -> NaN == NaN -> false

需要注意的是，不能轉(zhuǎn)換為數(shù)字的值 / undefined / null最終都會變成NaN，而NaN是不等于任何值的，包括它自己。

二、引用數(shù)據(jù)類型的比較(Object/Array)

此類數(shù)據(jù)類型的比較通常是判斷指針的地址是否指向同一片內(nèi)存空間，如果是的話則會返回true。

const arr = [1, [2, 3], 4];
const copy1 = arr[1];
const copy2 = arr[1];
const copy3 = [2, 3];

copy1 == copy2; // true
copy1 == copy3; // false

三、基本數(shù)據(jù)類型和引用數(shù)據(jù)類型之間的比較

• 第一步：將引用數(shù)據(jù)類型的數(shù)據(jù)轉(zhuǎn)換
• 第二步：將轉(zhuǎn)換后的數(shù)據(jù)與基本數(shù)據(jù)類型進(jìn)行比較

在第一步中，會先調(diào)用引用數(shù)據(jù)類型變量的valueOf方法，期待返回一個標(biāo)量，如果沒有返回標(biāo)量，則繼續(xù)執(zhí)行數(shù)據(jù)的toString方法。將執(zhí)行toString方法后得到的返回值與基本數(shù)據(jù)類型變量進(jìn)行比較。

const arr = [1];
arr == 1; // 猜測一下返回什么
// 調(diào)用valueOf方法，期待返回標(biāo)量
arr.valueOf(); // [1]
// 返回的不是標(biāo)量，繼續(xù)執(zhí)行toString方法，獲取返回值
arr.toString(); // '1'

// 最后的比較就變成了如下
// 相當(dāng)于變成了基本數(shù)據(jù)類型的比較
'1' == 1; // -> 1 == 1 -> true

再來深入理解一下

const arr = [0];
arr == false;

arr.valueOf(); // [0]
arr.toString(); // '0'

'0' == false; // -> 0 == 0 -> true 

再使用對象試試

const obj = { a: 1 };
obj == true;

obj.valueOf(); // { a: 1 }
obj.toString(); // '[object Object]'

// 最后的比較變成了如下代碼
'[object Object]' == true; // -> NaN == 1 -> false

當(dāng)然，如果對象返回了標(biāo)量，結(jié)局就不同了。

const obj = {
  a: 1,
  valueOf: () => 32
};
obj == '32';

// 返回了標(biāo)量32，不再執(zhí)行toString方法
obj.valueOf(); // 32

// 最后的比較變成了如下代碼
32 == '32'; // -> 32 == 32 -> true

至此，是不是理解的更深了，領(lǐng)悟了以后面對各種類型判斷都無需緊張了！文章來源地址http://www.zghlxwxcb.cn/news/detail-469346.html

到了這里，關(guān)于JS隱式轉(zhuǎn)換與類型比較的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！