首頁 > web前端 > js教程 > 主體

JavaScript程式碼日常注意六點

韦小宝
發布: 2018-03-14 13:06:56
原創
1242 人瀏覽過

大家在日常JavaScript開發中都需要注意一些程式碼是否會出錯,而我們今天來總結一下JavaScript中日常開發需要注意的六點易錯部分,相信很多同學都需要來看看哦!廢話少說我們直接開始進入正題吧!

立即執行函數

立即執行函數,通常也可作閉包,能夠建構一個函數層級的變數作用域。一般寫法如下:

(function () {
  // code
})();
登入後複製

但是這中寫法容易造成一些問題,如上面的程式碼如果沒有分號結尾的話:

var a = 1
(function () { // Uncaught TypeError: 1 is not a function
})()
登入後複製

那麼應該這樣寫:

void function () {
  // code
}();
登入後複製

或者:

!function () {
  // code
}();
登入後複製
;(function(){
   //code
})()
登入後複製

選擇哪一種看個人喜好,現在js中有個規範叫standardjs規範, 提倡省略行尾的分號(個人不太習慣),需要改變這個習慣。

2.空物件null

從JS誕生以來,賦予了null為Object類別型,可以說是JS的一個終生bug,從未、以後也不會改變。

null不具備作為物件的基本特徵,屬於原始資料型別。我想說明的是在判斷變數是否為物件之前,應該先判斷其是否為null。

if (opt!== null && typeof opt=== 'object') {
  // opt是一个对象
}
登入後複製

3.不要隨意對小數做比較

在做小數之間的計算時候,注意浮點數之前的精度問題。

如:0.1+0.2是否等於0.3?  答案是:0.1+0.2=0.30000000000000004

#類似:0.4-0.3=0.100000000000000#03##如果此類計算把小數轉為

字串

,使用toFixed去小數若干位進行比較:

注意:兩個數的差值小到一定範圍的時候,即可以認為他們是相等的。

Math.abs(0.1+0.2 - 0.3) <= 1e-10 // true
登入後複製

 4.時刻記住NaN

一說到NaN,那麼有個特性大夥應該都會想起,NaN !==NaN。對,就這麼屌。

如果你需要判斷一個變數是否為NaN,只要把它跟它自己比較,如果不相等,那就是NaN。

判斷一個數字是否為NaN,可以使用isNaN()方法。但如果不知道某個變數的具體資料型態的時候,不要輕易用該方法來判斷,因為isNaN有個詭異特性:它會先把要判斷的變數先轉換成數值來計算。

isNaN(&#39;abc&#39;) // true
isNaN(&#39;123&#39;) // false
isNaN(&#39;&#39;) // false
isNaN([]) // false
isNaN({}) // true
登入後複製

那麼這時候會對你的判斷結果造成意外。

還有一個注意點就是,永遠不要拿任何變數跟NaN來比較,如:opt===NaN。

5.除了比較null和undefined,永遠不要使用非嚴格==和! =

相信你會看到很多文章、規範都會說盡量使用===和! ==,不使用==和! =,原因在於後者會進行強制

類型轉換

(造成難以找到的bug)。 先看一下:

&#39;true&#39; == true // => false
'true' == false // => false
[] == {} // => false
[] == [] // => false
登入後複製

如果你對以上判斷有疑惑,那就記住一個規則:

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或undefined,那就用==,否則,永遠不要使用。

6.慎用|| 設定預設值

給一個變數設定一個預設值,相信入坑多年的JS開發者都會這樣寫:

page = page || 0;
data = data || '你好';
登入後複製

解釋下arg1 || arg2的意思是如果arg1能夠轉換為true,那麼就取arg1,否則取arg2。

那我們先來看看不可以轉換成true的值有哪些呢?

1.undefined

2.null

3.NaN

4.整數0

5.空字串「」

所以如果当用户传给arg1的参数是0或者为空字符串“”的时候,那么最终的值就会取默认的(||后面)值是不是?好,问题来了。如果用户传给后台的查询关键字data(上面代码)是空字符串“”,那么就应该按照空字符串“”去后台数据库查询,而结果传给后台的却是“你好”,显然查询结果也就不对。

好,回到主题,实际上只有undefined才应该被认为是用户没有指定其具体值,我曾看过有人这样理解(null 表示 用户让你给他把这个位置空着;而 undefined 表示 用户没发表意见

so :

page = page !== undefined ? page : 0;
data = data !== undefined ? data :'你好';
登入後複製

只需判断undefined即可。

个人理解如果有需求,可以把null加进去判断。

以上是JavaScript程式碼日常注意六點的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!