Js中使用hasOwnProperty方法檢索ajax回應物件的範例_javascript技巧

經常使用百度搜尋的同學，一定不會忽視輸入框的下拉索引，它是如此方便，然而得天獨厚的條件使得這項非同步技術多少面臨些考驗，高並發的服務端請求督促著他們的前端攻城師必須盡可能減少發送ajax的次數。聽起來似乎與本文無關，但不是這樣。首先就暫且讓我們為百度免費做個廣告吧。在百度首頁輸入「前端」一詞，利用chromebug可以輕鬆看到所發送的回應，結果顯示如下：

複製程式碼 程式碼如下:

window.bdsug.sug({q:'前端';,p:false,s:['前端開發','前端工程師','前端匯流排','前端開發工程師','前端框架','前端匯流排頻率','前端面試題','前端分析','前端開發工具','前端觀察']});

百度試圖透過返回一個帶有obj參數的sug方法，來進行對下拉資料的渲染，當你在不刷新頁面的情況下再次輸入“前端”，類似的請求並沒有發生，這說明他們很可能建立了一個快取對象，它的作用是臨時儲存請求過來的object，當後面輸入同樣的詞彙時，會先檢索快取對象的鍵，匹配成功後，直接讀取該對象的值，並不再向服務端發送請求，這樣就可以有效地節約成本了。

拋磚引玉，接下來談談真正的主角：hasOwnProperty方法。

相信jser們對hasOwnProperty並不陌生，我在這裡也只是江邊賣水了。

它是物件的專屬，用來判斷一個屬性是否存在於某物件的鍵中，return的是一個boolean值。這是一個例子：

複製程式碼 程式碼如下:

var test0 = Array.prototype.hasOwnProperty('split'); //false，因為陣列不存在split方法
var test1 = String.prototype.hasOwnProperty('split'); //true，因為split是String物件的內建方法

當你知道這些的時候，似乎還不足以看到hasOwnProperty的作用力，那麼下面簡單地重現一下百度下拉的例子：

複製程式碼 程式碼如下:

var data = {}, saveObj = function(val){
 if(data.hasOwnProperty(val)){ //如果提交的值存在於data物件中，則不傳送請求
  var len = data[val].length;
  for(var i = 0; i    console.log(data[val][i]);
  }
 }else{
  var url = 'http://suggestion.baidu.com/su?wd=' val;
  $.ajax({ //為了範例清晰，此處以jquery的ajax為例
   url : url '&p=3&cb=window.bdsug.sug&sid=1421_1513_1541_1542_1582&t=1353756355137', //最後面一個參數t是一個時間戳
   dataType : 'jsonp',
   type : 'GET',
   success : function(res){
    var msg = res.data, len = msg.length;
    msg == null && (msg = []);
    if(len > 0){
     data[val] = msg; //快取搜尋結果
     for(var i = 0; i       console.log(msg[i]); //列印出請求結果
     }
    }
   }, error : function(){
    alert('error');
   }
  });
 }
};

有同事質疑，這樣一來，快取物件data佔用的記憶體將會隨著儲存鍵值的越多而越大。那麼我想說這是不可避免的，要節約服務端的請求，就必然要犧牲其它，而事實上緩存對象佔據的空間通常情況下是可以忽略的，因為它並非“常駐內存”，一旦頁面刷新它將銷毀。然而我們可以給出另一個解決方案，給此物件約定一個峰值，例如最多它只允許儲存100個鍵值對，當超過100的數量時，透過delete運算子刪除前十條儲存的鍵或乾脆就不存儲，這樣就可以避免此問題了。

hasOwnProperty方法在物件的檢測中用得特別普遍，當然有興趣的同學也可以去了解下propertyIsEnumerable方法，它是hasOwnProperty的增強版，能檢測自有屬性且該屬性的可枚舉性，本文就不再做詳細說明了。