前言

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

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

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

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

     3、定義為整型的屬性，比如index。這點即使TS也無能為力，因為TS里也沒有int。很容易傳入一個浮點數(shù)，導致從數(shù)組取索引時產(chǎn)生報錯。

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

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

格式化浮點數(shù)

value = +value || 0;

測試輸出：

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

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

value = +value | 0;

等價于:

value = ~~value;

測試輸出：

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位有符號整型數(shù)，也就類似其他語言里的int，正整數(shù)部分最大只能到2147483647（2^31-1） 。uint32或者更大的int64是不行的,會被截斷。具體可以參考這里：按位操作符。通常在其他語言里，可以使用int的場景使用這種格式化方法都完全沒問題。

格式化無符號整數(shù)(uint32)

value = +value >>> 0;

測試輸出：

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

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

格式化布爾值

value = !!value;

測試輸出：

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就行了，因為其他對字符串變量的操作，比如加號，都會自動轉(zhuǎn)換類型。

value = value || "";

總結(jié)

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

最新評論