前言

首先拋出幾個問題：

console.log(Boolean({}));
console.log(Number([]));
console.log(Number([6]));
console.log(([] + []).length);
console.log(({} + {}).length);

打印結(jié)果都是啥？不知道各位能答對幾題。文章末尾，我們會揭曉答案。這篇文章建議大家耐心閱讀，相對來說比較繞而且乏味 - -。

三種算法

JavaScript 將對象轉(zhuǎn)換為原始值時遵循的算法規(guī)則比較復雜，這些規(guī)則冗長、晦澀，我們先簡單了解一下，具體實現(xiàn)后面再詳細展開。

對象轉(zhuǎn)換成原始值有三種基本算法：

• 偏字符串算法。該算法返回原始值，而且只要可能就返回字符串。
• 偏數(shù)值算法。該算法返回原始值，而且只要可能就返回數(shù)值。
• 無偏好算法。該算法不傾向于任何原始值類型，而是由類定義自己的轉(zhuǎn)換規(guī)則。JavaScript 內(nèi)置類除了 Date 類，其他都實現(xiàn)了偏數(shù)值算法。Date 類實現(xiàn)了偏字符串算法。

對象轉(zhuǎn)換成布爾值

對象到布爾值的轉(zhuǎn)換最簡單：所有對象都轉(zhuǎn)換為true。這個轉(zhuǎn)換不需要使用前面介紹的轉(zhuǎn)換算法，直接適用于所有對象，包括空數(shù)組、包裝對象：

console.log(Boolean([])); // => true

const wrapperObject = new Boolean(false); // 這是一個對象，而不是原始值
console.log(Boolean(wrapperObject)); // => true

對象轉(zhuǎn)換成字符串

在將對象轉(zhuǎn)換成字符串時，首先使用偏字符串算法將它轉(zhuǎn)換為一個原始值，然后將得到的原始值再轉(zhuǎn)換為字符串。

這種轉(zhuǎn)換會發(fā)生在把對象傳給一個接收字符串參數(shù)的內(nèi)置函數(shù)時，比如將String()作為轉(zhuǎn)換函數(shù)，或者將對象插入模板字面量中時就會發(fā)生這種轉(zhuǎn)換：

console.log(String({})); // => '[object Object]'
console.log(String([])); // => ''
console.log(String(function () {})); // => 'function () {}'

對象轉(zhuǎn)換成數(shù)值

當需要把對象轉(zhuǎn)換為數(shù)值時，首先使用偏數(shù)值算法將它轉(zhuǎn)換為一個原始值，然后將得到的原始值再轉(zhuǎn)換為數(shù)值。

接收數(shù)值參數(shù)的內(nèi)置函數(shù)和方法都以這種方式將對象轉(zhuǎn)換為數(shù)值，除數(shù)值操作符之外的多數(shù)操作符也按照這種方式把對象轉(zhuǎn)換為數(shù)值：

console.log(Number([])); // => 0
console.log(Number({})); // => NaN
console.log(+[]); // => 0

上面的栗子了解一下即可，具體的轉(zhuǎn)換算法后面會詳細解釋。

轉(zhuǎn)換時使用的方法

toString()、valueOf()，所有對象都會繼承這兩個在對象到原始值轉(zhuǎn)換時使用的方法，在接下來解釋偏字符串、偏數(shù)值、無偏好轉(zhuǎn)換算法之前，我們必須先了解這兩個方法。

toString()

toString()的任務是返回對象的字符串表示。

默認情況下，toString()方法會返回特殊值：

const obj = {
    x: 1,
    y: 2,
}
obj.toString(); // => '[object Object]'

但是很多類都定義了自己特有的toString()版本。

比如，Array類的toString()方法會將數(shù)組的每個元素轉(zhuǎn)換為字符串，然后再使用逗號作為分隔符將它們拼接起來：

const array = [1, 2, 3];
array.toString(); // => '1', '2', '3'

Function類的toString()方法會將用戶定義的函數(shù)轉(zhuǎn)換為 JavaScript 源代碼的字符串：

const f = function () {};
f.toString() // => 'function () {}'

Date類定義的toString()方法返回一個對人類友好的日期和時間字符串。

RegExp類定義的toString()方法會將RegExp對象轉(zhuǎn)換為一個看起來像RegExp字面量的字符串。

valueOf()

valueOf()方法的設計意圖是返回對象的原始值表示。

然而大多數(shù)對象都沒有缺省的原始值表示，為此valueOf()的默認實現(xiàn)是返回對象本身，內(nèi)置的函數(shù)、數(shù)組等類型都是如此：

const obj = {x: 666};
const arr = [1, 2, 3];
const fn = function () {};

obj.valueOf(); // => {x: 666}
arr.valueOf(); // => [1, 2, 3]
fn.valueOf(); // => ? () {}

極少數(shù)對象才具有有意義的原始值表示，比如String、Number、Boolean這樣的包裝類定義的valueOf()方法會簡單地返回被包裝的原始值：

const wrapperObj1 = new String(666);
const wrapperObj2 = new Number(888);
const wrapperObj3 = new Boolean(false);

wrapperObj1.toString(); // => '666'
wrapperObj2.toString(); // => '888'
wrapperObj3.toString(); // => 'false'

還有Date對象定義的valueOf()方法返回時間戳：

const d = new Date(2022, 6, 24);
d.valueOf(); // => 1658592000000

了解完toString()和valueOf()方法后，接下來我們看看轉(zhuǎn)換算法是如何實現(xiàn)的。

轉(zhuǎn)換算法

偏字符串算法

偏字符串算法首先嘗試toString()方法。如果這個方法有定義且返回原始值，則使用這個原始值，即使這個值不是字符串。如果toString()方法不存在，或者存在但返回對象，則嘗試valueOf()方法。如果valueOf()方法存在且返回原始值，就使用該值。否則，轉(zhuǎn)換失敗，報 TypeError。

偏數(shù)值算法

偏數(shù)值算法與偏字符串算法類似，只不過是先嘗試valueOf()方法，再嘗試toString()方法。

無偏好算法

無偏好算法取決于被轉(zhuǎn)換的對象。如果是一個Date對象，則使用偏字符串算法。如果是其他類型的對象，就使用偏數(shù)值算法。

以上規(guī)則適用于所有的內(nèi)置 JavaScript 類型。

練習題

文章開頭列舉的五個問題，下面我們逐一揭曉答案。

console.log(Boolean({}))：對象轉(zhuǎn)換成布爾值時，所有對象都轉(zhuǎn)換為true，所以打印true。

console.log(Number([]))：對象轉(zhuǎn)換成數(shù)值，首先使用偏數(shù)值算法把對象轉(zhuǎn)換為一個原始值，然后再把得到的原始值轉(zhuǎn)換為數(shù)值。偏數(shù)值算法會先嘗試valueOf()，將toString()作為備用。Array類繼承了默認的valueOf()方法，所以不會返回原始值，因此最終會調(diào)用toString()方法?？諗?shù)組會被轉(zhuǎn)換成空字符串，而空字符串轉(zhuǎn)換成數(shù)值為 0，所以打印 0。

console.log(Number([6]))：同樣，使用偏數(shù)值算法，最終會調(diào)用toString()方法。因為數(shù)組中只包含一個數(shù)值，所以該數(shù)值首先會被轉(zhuǎn)換成字符串 '6'，再轉(zhuǎn)換回數(shù)值 6，打印結(jié)果為 6。

console.log(([] + []).length)：兩個數(shù)組相加，首先會將數(shù)組轉(zhuǎn)換為字符串，使用偏字符串算法，空數(shù)組會轉(zhuǎn)換為空字符串，空字符串相加還是空字符串，長度為 0，打印結(jié)果為 0。

console.log(({} + {}).length)：兩個對象相加，首先會將對象轉(zhuǎn)換成字符串，使用偏字符串算法，對象轉(zhuǎn)換成字符串后是'[object Object]'，兩個'[object Object]'拼接后的長度是 30，打印結(jié)果為 30。

到此這篇關(guān)于淺析JavaScript對象轉(zhuǎn)換成原始值的文章就介紹到這了,更多相關(guān)JS對象轉(zhuǎn)換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論