給初學者：JavaScript 的常見注意點

長沙7喜 2018-01-23

展開全文

作者： CarterLi
原文：https://segmentfault.com/a/1190000012730162

上篇說了一些 JS 中數組操作的常見誤區(qū)，這次來總結一下初學者常見的其他易錯點。

寫立即執(zhí)行函數時前置 void

立即執(zhí)行函數（IIFE）在 JS 非常常用，作用就是構造一個函數級的變量作用域。常見的寫法如下：

(function () {
// code
})();

這樣寫可能會被 JS 理解成為一個函數調用

var a = 1
(function () { // Uncaught TypeError: 1 is not a function
})()

從今天改變習慣，這樣寫：

void function () {
// code
}();

有些人喜歡以 ! 打頭，個人習慣問題。

在 standardjs 規(guī)范日益流行的今天，忽略行尾分號成為了主流（但是筆者不喜歡），更要改變這個習慣

注：standardjs 本身禁止行首括號（https:///readme-zhcn.html#user-content-細則）

檢查一個變量是否為對象之前，首先判斷其值是否為 null

雖然不愿承認，JS 標準說：

typeof null === 'object' // true

毋庸置疑的， null 不具備作為對象類型的基本特征，是原始類型。這是一個廣為人知的 JS 的 bug，，它從 JS 誕生開始就存在，從未、而且永遠不會被修復

我們不必去探究它的黑歷史，但是我們寫代碼時判斷一個變量的類型時，首先需要判斷它是否為 null

if (someVal !== null && typeof someVal === 'object') {
// someVal 是一個對象
}

做數值計算時，注意 JS 數值類型的精度

在 JS 里，所有的 number 原始值都是一個雙精度浮點數，對應 Java 的 double 類型，對應標準 IEEE754。小心它的精度問題。

做整數處理時，注意數值的大小

JS 最大可存儲的安全整數（不存在精度問題）為 9007199254740991 (16位，Number.MAXSAFEINTEGER )，注意比 Java 的 long 類型最大整數 9223372036854775807 (19位) 小幾個數量級，所以有時 JS 的 number 類型是不能精確存儲 Java 的整數的（當然通常情況下不是問題）。

問題通常出在前后端數據傳輸上。數據庫中的主鍵通常是一個自增長的長整型數，有可能會超出 JS 的安全整數范圍，這時請考慮使用字符串傳輸。

做小數計算時，注意浮點數的精度問題

例如：0.1+0.2 => 0.30000000000000004，0.4-0.3 => 0.10000000000000003

將小數轉化為字符串時，永遠記得使用 toFixed 取小數點后若干位數字：

(0.1 + 0.2).toFixed(2) === '0.30'

比較小數相等時，切記不要直接使用 ===，而要使用相減取絕對值的方式（表示兩數相差在一定范圍內即認為他們相等）。

0.1+0.2 === 0.3 // false
Math.abs(0.1+0.2 - 0.3) <=>1e-10 // true

NaN !== NaN

NaN 之所以 NB，因為它有一個獨一無二的特性。對！獨一無二！那就是：

NaN === NaN // false
var a = NaN; a === a // false

NaN 不等于它自己。你可以使用這個特性判斷一個變量是否為 NaN，一個變量如果不等于它自己，這個變量一定是 NaN。

還有一個方式是使用 Number.isNaN。注意如果不已知這個變量的類型是數字時，不要使用 isNaN做判斷，因為 isNaN 有個很詭異的特性：它會先將待判斷的變量轉換為數值類型。

isNaN('abc') // true
isNaN('123') // false
isNaN('') // false
isNaN([]) // false
isNaN({}) // true

永遠不要寫 someVal===NaN

正確使用 parseInt

首先parseInt接受兩個參數，第一個參數為待parse的字符串（如果不是字符串則會首先轉換為字符串）；第二個參數為使用的進制數。

如果不傳第二個參數，則進制由第一個參數決定。什么意思呢？比如以 0x 開頭的字符串，會被解析為16進制數。

我們知道以數字 0 開頭的數字為8進制數（非嚴格模式），比如 011 === 9，0 本身也是8進制數。那么問題來了， parseInt('011') = ?

答案是看瀏覽器。目前絕大多數瀏覽器都會作為10進制數解析，結果為11。但是還有一些老舊的瀏覽器以8進制數解析（例如IE8和一批老Android瀏覽器）

所以如果你非要用 parseInt：

`parseInt` 使用規(guī)則一：請傳入第二個參數

回到 parseInt 本身的含義。顧名思義這個函數是在parse，被parse的一定是個字符串。如果第一個參數不是字符串，那么會首先被轉換為字符串。

問： parseInt(0.0000000008) =?

答：

String(0.0000000008) => '8e-10'
parseInt('8e-10') => 8

自己打開調試器去試

parseInt使用規(guī)則二：永遠不要使用parseInt給小數取整

建議對于數值轉換一概使用強制轉換函數 Number，如果你JS用6了可以使用 +（正號）。如果需要對某個數字取整，建議使用 Math.trunc。如果你能確定數值在 32 位以內，可以使用 x|0 或 ~~x等方式

parseInt的用處在于轉換一些CSS里帶單位的值： parseInt('10px',10) => 10。但這里建議使用parseFloat，可以解析小數又沒有進制問題。

除了用于比較 null 或 undefined，永遠不要使用非嚴格相等 `==`

絕不要簡單的把非嚴格相等 == 理解為兩者表示的數字一樣，它有一套非常復雜的轉換規(guī)則：它會先將 %%轉換為 @@，然后把 !! 轉換為 **，如果 %% 是 ?? 類型，還會 xx 一把……

看不懂對吧，我相信你就算看懂了也記不住的。不然請問：

'true' == true // => false
'true' == false // => false
[] == {} // => false
[] == [] // => false

關于非嚴格相等，你只需要記住這個規(guī)則：

null == null // => true
undefined == undefined // => true
null == undefined // => true
undefined == null // => true
x == null // => false (x 非 null 或 undefined）
x == undefined // => false (x 非 null 或 undefined）

簡言之：

x == null // 或 x == undefined

是最簡單的判斷 x 為 null 或 undefined 的方式，相對應的

x != null // 或 x != undefined

是最簡單的判斷 x 非 null 和 undefined 的方式。這就是 == 存在的唯一意義。

日期處理

new Date(year, month, day) 注意其參數的數值范圍

由于可能的歷史傳承原因，JS 內置對象 Date 的構造函數比較特殊。

如果 year 是 0 ~ 99 之間，year 默認加 1900。比如 1 代表公元 1901 年，99 代表公元 1999 年，100 代表公元 100 年。（你問 -1 是幾？公元前 1 年。。。）
month 從 0 開始算。0 代表一月，1 代表二月，以此類推。12 代表下一年的一月（自動進位）

第一點不知道也沒什么，畢竟一般不會操作公元 99 年之前的時間。但第二點就很容易出錯，切記它是以 0 開始的數字。

這樣得到的日期對象是本地時間（采用客戶端時區(qū)）