摘要：請注意，由于的分號插入機制如果語句沒有使用分號結束，會自動補充分號，因此上面的代碼實際相當于如下寫法自動插入分號正確的寫法應該是輸出更新判斷語句的優化在業務中經常會遇到類似對請求結果判斷后讀取的情況。

（難得從繁重的業務代碼中抽身，更新一下文章）前端框架和技術日益發展，但是不管怎么變，js永遠都是最重要的基礎，本文記錄和總結一些日常開發中常見的js代碼技巧和誤區，不定期更新。

后果：可能引入全局變量

    //錯誤的寫法
    var a = b = 0;

這段代碼中,b實際上被聲明為全局變量。因為操作符優先級是是從右往左，所以該語句相當于:

    var a = (b = 0)

此時b未聲明就被直接賦值，所以b成了全局變量

這條規則的意思是，把函數內部的所有變量，放到頂部聲明。比如：

    //示例
    function A(){
      var a = 1,
          b = 2,
          c = a + b ;
    }

優點：

便于查找函數內部使用的局部變量

防止變量未定義時就被使用

防止變量聲明提升后引發的誤解

關于第三點，這里舉個例子說明：

  var x = 1;
  function A(){
    console.log(x);//第一處輸出 ，注意結果
    var x = 2;
    console.log(x);//第二處輸出 2，沒問題
  }  

從代碼上看，第二處輸出肯定沒問題，可能會有人認為第一處輸出的是1，因為此時在函數內部還沒聲明變量x，根據作用域鏈，向外層查找的話，x值為1。但是實際輸出的值應該是undefined，因為js允許在函數任何地方聲明變量，并且無論在哪里聲明都等同于在頂部聲明，這就是聲明提升。所以上面的代碼相當于:

  var x = 1;
  function A(){
    var x;//提升到頂部
    console.log(x);//此時已聲明 未賦值
    x = 2;//賦值
    console.log(x);
  }  

通常用使用for循環遍歷數組時，會采用以下寫法：

for(var i = 0;i
這段代碼存在的問題在于，在循環的每個迭代步驟，都必須訪問一次arr的長度。如果arr是靜態數值還好，但是我們在使用js時可能會碰到arr是dom元素對象，由于dom對象載頁面下是活動的查詢，這個長度查詢就相當耗時，
//用len緩存長度值
for(var i = 0,len = arr.length;i
按照上面的代碼，我們在第一次獲取長度值時就緩存這個長度值，就可以避免上述問題。
4. 使用for-in時，增加hasOwnProperty()判斷
for-in通常用來枚舉對象的屬性和方法，但是這個方法會枚舉范圍包括對象和對象的原型對象（對原型對象不了解的可以看看我之前寫的文章傳送門）此時，利用hasOwnProperty()方法可以幫我們過濾出只在對象本身上的屬性和方法，或者只在原型鏈的屬性和方法
for(var key in obj){
   if(obj.hasOwnProperty(key)){
     // 對象本身的屬性或者方法
  }
  else{
     // 原型鏈的屬性和方法
  }
}

/* 下面是一個具體的例子 */
 function A(name){
    this.type = "A類";
    this.name = name || "未命名"
}

var a = new A("a");

function B(name){
  this.subtype = "B類";
}

// 建立原型鏈
B.prototype = a;
B.prototype.sayHello = function(){}

var b = new B();

// 遍歷屬性
for(var key in b){
  //對象自身屬性
  if(b.hasOwnProperty(key)){
    console.log("對象自身的屬性或方法:"+key) 
  }

  //上述表達式的另一種寫法
  if(Object.prototype.hasOwnProperty.call(b,key)){
    console.log("對象自身的屬性或方法:"+key)
  }
  else {
    console.log("原型鏈的屬性或方法:"+key)
  }
}
5. 使用===代替==

這個算是比較常見的了，因為js在做比較判斷時，會執行強制類型轉換，比如false == 0返回true這樣的情況，使用===可以執行嚴格的等價比較，更易于閱讀代碼（后來閱讀的人就不需要判斷這個是遺漏還是故意使用強制類型轉換簡寫）
6. 使用parseInt()時，帶上第二個參數。
parseInt()用于從字符串中獲取數值，第二個參數代表進制,默認是10。我們在使用的時候可能習慣性忽略這個參數，但是在一些情況下會有問題：當字符串的開頭為0時，在es3里會被當做是八進制，es5里面仍然當做10進制，為了代碼的一致性以及避免不必要的失誤，應該每次使用時都帶上參數:
var x = parseInt("089",10);//使用時都帶上進制參數
7. 大括號的使用
大括號的使用主要是2個方面：
第1，不要省略大括號，即使可以忽略,比如：
for(var i =1;i<10 ;i++)
    console.log(i) //此處原則上可以忽略大括號
上述語句并沒有問題，但是如果后期函數體內增加了其他語句的時候，很容易忘記補上大括號，因此建議都帶上大括號；
第2，大括號的必須跟在前一個語句的同一行
這個地方為什么加粗了呢？因為這個問題非常容易被忽略，通常我們都覺得大括號是跟在語句的同一行還是下一行只是習慣問題，但是實際上不是的！看下面這個例子：
function func(){
  return 
  {
    name:"xxx"
  }
}
var res = func()
console.log(res)//輸出undefined
是不是覺得很奇怪，看代碼第一感覺應該是輸出一個包含name屬性的對象。請注意，由于js的分號插入機制：如果語句沒有使用分號結束，會自動補充分號，因此上面的代碼實際相當于如下寫法：
function func(){
  return undefined;//自動插入分號
  {
    name:"xxx"
  }
}
正確的寫法應該是：
function func(){
  return {
    name:"xxx"
  }
}
var res = func()
console.log(res)//輸出{name:"xxx"}
（----------------------06.15更新------------------------）
8 . 判斷語句的優化
在業務中經常會遇到類似對請求結果判斷后讀取的情況。比如：
requset().then(function(res){
    if(res){
        //對返回數據進行操作的代碼
    } else{
        
    }
})
這種寫法沒有問題，但是有時候邏輯比較長，嵌套的大括號比較多。此時可以采用另一種寫法
requset().then(function(res){
    // 先判斷!res
    if(!res){
        ///
    }
    //對返回數據進行操作的代碼
})
這種寫法可以減少一次嵌套，在邏輯判斷較多時，嵌套層數減少可以增加代碼可讀性。
（----------------------06.20更新------------------------）
9 . 對url進行encode
此條主要是在這兩天修復一個遺留bug時候發現，一個上傳組件在ie下失效，其中一個原因是上傳的請求url參數中包含中文參數，但是未手動encodeURI,原先的開發者可能只考慮了chrome下的情況。由于chrome會自動對url進行encode，所以很容易忽略其他瀏覽器，為了避免此類的兼容問題，建議總是手動做好編碼處理。
（----------------------08.16更新------------------------）
10.空對象判斷（要考慮不可枚舉屬性）
先上代碼：
   function X() {

  }
  //原型上的屬性
  X.prototype.age = "22"
  var x = new X()
  Object.defineProperty(x, "name", {
    enumerable: false,
    value: "張三"
  })
  console.log(x)

  //方法1 使用for...in遍歷
  function isEmptyObject1(obj) {
    for (var attr in obj) {
      return false
    }
    return true
  }

  //方法2 使用JSON.stringify
  function isEmptyObject2(obj) {
    return (JSON.stringify(obj) === "{}")
  }

  //方法3 使用Object.keys
  function isEmptyObject3(obj) {
    return Object.keys(obj).length === 0
  }

  //方法4 使用getOwnPropertyNames

  function isEmptyObject4(obj) {
    return Object.getOwnPropertyNames(obj).length === 0
  }
  console.log(isEmptyObject1(x)) //true
  console.log(isEmptyObject2(x)) //true
  console.log(isEmptyObject3(x)) //true
  console.log(isEmptyObject4(x)) //false
（----------------------2019.01.17更新------------------------）
11.封裝請求函數時，考慮使用對象代替數組傳參
// 1.使用數組方式傳參，需要嚴格按照參數順序，并且對于多個可選參數的情況不好處理
const getMethod = (id,uid,option1,option2)=>{
    const config = {
        // 參數處理
    } 
    request.get(config)
}
// 如果此時可選參數1不傳，卻要傳入可選參數2，則必須傳入空值占位
getMethod("e3ruewruwieru","231423asd",null,"asdasd")

// 2. 使用對象傳參時，可以不按照順序傳入參數
const getMethod  = (query) =>{
    const { id, uid, option1,option2} = query //直接解構出需要的參數
    const config = {
        option1:option1 ||"" //即使多個可選參數，處理起來也很方便
    } 
    request.get(config)
}
// 使用比較靈活 并且不用考慮參數順序
const query = {
    id:"123",
    uid:"asd",
    option2:"goodjob"
}
getMethod(query)
小結
本文會長期更新和補充（如果我沒被淹沒在業務中的話），歡迎讀者提出建議和意見。
然后依然是每次都一樣的結尾，如果內容有錯誤的地方歡迎指出；如果對你有幫助，歡迎點贊和收藏，轉載請征得同意后著明出處，如果有問題也歡迎私信交流，主頁添加了郵箱地址~溜了