前言

相信大家都知道因?yàn)镴avaScript是弱類型的語(yǔ)言，項(xiàng)目寫大了會(huì)非常難以把控，容易出各種問題。幸好有強(qiáng)類型的TypeScript可以很大程度上彌補(bǔ)這一缺陷，但TypeScript提供的強(qiáng)類型是編譯階段的，雖然絕大部分類型相關(guān)的問題在編譯階段都能被覆蓋到，但對(duì)于小部分在運(yùn)行時(shí)才會(huì)出錯(cuò)的錯(cuò)誤還是無(wú)能為力。

例如以下幾種常見的情況：

     1、定義為number的屬性，賦值的時(shí)候，如果賦值源沒有定義強(qiáng)類型，這樣就會(huì)繞過編譯檢查的階段，到運(yùn)行時(shí)發(fā)現(xiàn)可能傳進(jìn)來的是個(gè)字符串。類內(nèi)部再一頓加減乘除，很容易導(dǎo)致一大片數(shù)據(jù)全都被污染為NaN。

     2、定義boolean類型的屬性，經(jīng)常會(huì)賦值為一個(gè)對(duì)象，雖然運(yùn)行起來不會(huì)出明顯問題，但其實(shí)只想存儲(chǔ)一下對(duì)象是否為空的狀態(tài)，卻有可能導(dǎo)致那個(gè)對(duì)象始終無(wú)法被回收。

     3、定義為整型的屬性，比如index。這點(diǎn)即使TS也無(wú)能為力，因?yàn)門S里也沒有int。很容易傳入一個(gè)浮點(diǎn)數(shù)，導(dǎo)致從數(shù)組取索引時(shí)產(chǎn)生報(bào)錯(cuò)。

在JavaScript運(yùn)行時(shí)，任何用法都有可能發(fā)生，如果要寫出強(qiáng)壯的組件或框架，類似這些問題，都是必須要考慮到的。解決方案就是對(duì)于任何來自于外部傳入的參數(shù)或變量進(jìn)行格式化，這樣只要格式化一次，組件和框架內(nèi)部就能高效地正常運(yùn)轉(zhuǎn)，不用再各種特殊判斷。

下面列舉幾種常用類型的高性能格式化方法：

格式化浮點(diǎn)數(shù)

value = +value || 0;

測(cè)試輸出：

function test(value) {
 value = +value || 0;
 return value;
}

test("123"); //123
test("123.5"); //123.5
test(123); //123
test(123.5); //123.5
test("abc"); //0
test("123ab"); //0
test(NaN); //0
test(null); //0
test(undefined); //0

格式化有符號(hào)整數(shù)(int32)

value = +value | 0;

等價(jià)于:

value = ~~value;

測(cè)試輸出：

function test(value) {
 value = +value | 0;
 return value;
}

test("123"); //123
test("123.5"); //123
test(123); //123
test(123.5); //123
test("-123.5"); //-123
test("abc"); //0
test(NaN); //0
test(null); //0
test(undefined); //0

要特別注意一下：以上這種格式化方式只適用于32位有符號(hào)整型數(shù)，也就類似其他語(yǔ)言里的int，正整數(shù)部分最大只能到2147483647（2^31-1） 。uint32或者更大的int64是不行的,會(huì)被截?cái)?。具體可以參考這里：按位操作符。通常在其他語(yǔ)言里，可以使用int的場(chǎng)景使用這種格式化方法都完全沒問題。

格式化無(wú)符號(hào)整數(shù)(uint32)

value = +value >>> 0;

測(cè)試輸出：

function test(value) {
 value = +value >>> 0;
 return value;
}

test("123"); //123
test("123.5"); //123
test(0xFFFFFFFF); //0xFFFFFFFF
test(0xFFFFFFFF+).5; //0xFFFFFFFF
test("-123.5"); //0xFFFFFF85
test("abc"); //0
test(NaN); //0
test(null); //0
test(undefined); //0

要注意一下：位移運(yùn)算符是三個(gè)箭頭>>>,有且只有這個(gè)運(yùn)算符是操作無(wú)符號(hào)整型，結(jié)果是一個(gè)uint32，范圍從0~4294967295（2^32-1），其他所有位移運(yùn)算符的結(jié)果都是有符號(hào)整型（int32），因此也沒法表示大于2147483647（2^31-1）的數(shù)字。

格式化布爾值

value = !!value;

測(cè)試輸出：

function test(value) {
 value = !!value;
 return value;
}

test(true); //true
test(123); //true
test(123.5); //true
test({}); //true
test([]); //true
test("abc"); //true
test(""); //false
test(false); //false
test(NaN); //false
test(null); //false
test(undefined); //false

格式化字符串

字符串的格式化沒有那么固定的需求，一般情況下避免null就行了，因?yàn)槠渌麑?duì)字符串變量的操作，比如加號(hào)，都會(huì)自動(dòng)轉(zhuǎn)換類型。

value = value || "";

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家學(xué)習(xí)或者使用Javascript能帶來一定的幫助，如果有疑問大家可以留言交流。

最新評(píng)論