【JS系列】盤點那些惹是生非的語法

前言

  不少朋友在學習之初都感覺到了JS的靈活強大，可是也發現了一些蹩腳的語法，在使用時咱們如履薄冰

  以前個人想法是把它們牢記，以便使用時知道如何避坑，而且它們還可能會在面試中被問到

  這兩天翻看了《JavaScript語言精粹》這本書，讓我換了一種思路——既然是蹩腳的語法，那就儘可能避開它們

  本文將選取一些常見的坑坑語法進行討論

1. 全局變量

  當一個程序變得龐大時，全局變量將變得難以維護，由於全部做用域均可以改變它們，所以容易形成全局污染

  建立全局變量的方式有三種：

• 在函數外使用var建立變量
• 添加屬性到window對象，如 window.key = value
• 不使用var建立變量（隱式全局變量），如 a = 1

  如何將全局變量的影響最小化？

• 只定義一個全局變量，將其餘變量都歸於其下

var App = {}

App.person = {
  name: "一燈",
  age: 23
}

App.car = {
  color: "red",
  name: "桑塔拉"
}
複製代碼

• 經過閉包

2. 塊做用域

  ES6以前只有var關鍵字定義變量，是沒有塊級做用域的。ES6出現後誕生了let和const解救了這個問題

3. 自動插入分號機制

  JavaScript會自動插入分號修正缺損的代碼，但有時候會出現意外的「驚喜」

return
{
  name: "一燈"
}

//以上代碼本意是要返回一個對象，然而JS處理事後是這樣：
//直接結束，沒有返回對象
return;
{
  name: "一燈"
};

//所以使用return時，不要單獨一行寫return
return {
  name: "一燈"
}
複製代碼

4. 保留字問題

  保留字不能用來命令變量、參數，但可用來命名對象的鍵值，只是必須用引號括起來，而且不可用「點表示法」訪問，而可用「[]表示法」訪問

var object = {
  class: "AAA",   //非法，但在火狐下又是合法
  'class': "AAA"  //合法
}

object.class = "BBB"      //非法
object['class'] = "BBB"   //合法
複製代碼

  這是什麼玩意兒，咱不用了不用了好不！

5. typeof

  typeof是用於檢測變量類型的運算符，然而它的做用很是有限

  typeof能準確檢測的類型以下：

• string
• number
• boolean
• function

  這裏推薦一種類型檢測比較全面的方法：

Object.prototype.toString.call('') ;  // [object String]
Object.prototype.toString.call(88) ;   // [object Number]
Object.prototype.toString.call(true) ;// [object Boolean]
Object.prototype.toString.call(Symbol());//[object Symbol]
Object.prototype.toString.call(undefined) ;// [object Undefined]
Object.prototype.toString.call(null) ;// [object Null]
Object.prototype.toString.call(new Function()) ;// [object Function]
Object.prototype.toString.call(new Date()) ;// [object Date]
Object.prototype.toString.call([]) ;// [object Array]
Object.prototype.toString.call(new RegExp()) ;// [object RegExp]
Object.prototype.toString.call(new Error()) ;// [object Error]
Object.prototype.toString.call(document) ;// [object HTMLDocument]
Object.prototype.toString.call(window) ;//[object global]
複製代碼

6. +

   + 不只是加號，也是鏈接符。除非兩邊的運算數都是數字，不然會看成鏈接符，結果變成字符串

  所以作加法運算必定確保兩邊的是數字類型，尤爲JS是弱類型語言

  這裏補充一點，其實對於減號，會更加複雜繁瑣（不了不了傷身體.jpg），最好也確保兩邊的是數字類型

7. 浮點數

  想起了被小學數學老師看到會打死的 0.1+0.2 不等於 0.3

  咱們都知道二進制浮點數沒法精確運算十進制小數，所以避免直接運算小數

  先將小數放大爲整數再運算（整數運算是精確的），運算完再轉換爲小數

8. 假值

  JS中不少值都被定義爲假，然而它們相互之間是不能互換的

• false
• 0
• NaN
• 空串
• null
• undefined

var object = {
  name: "一燈"
}

if(object.age == null) {
  console.log("沒找到此屬性")
}

//上面代碼中，若是age屬性不存在，應該使用undefined判斷
//即便使用null沒有出現問題，但有些狀況下會帶給你意外「驚喜」
複製代碼

後記

  關於JS那些蹩腳的語法本文列舉不全，歡迎在下方評論列出你認爲值得注意反思的語法