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 < len; 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 < len; i++){
      console.log(msg[i]); //列印出請求結果
     }
    }
   }, error : function(){
    alert('error');
   }
  });
 }
};

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

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