通過具有增量屬性名稱的對象循環訪問

Question

我試圖像循環訪問數組一樣對象。我努力將循環計數器追加到變量名稱。

我有一個這樣的對象（output with dump(), which I found here）：

object(2): { 
    elem0: array(4): { 
    [0]: string(27): "http://placehold.it/300x300" 
    [1]: string(3): "0.8" 
    [2]: string(4): "-150" 
    [3]: string(3): "200" 
    } 
    elem1: array(4): { 
    [0]: string(27): "http://placehold.it/300x300" 
    [1]: string(3): "0.6" 
    [2]: string(3): "-70" 
    [3]: string(3): "458" 
    } 
} 

下面是我通過它試圖循環：

jQuery(document).ready(function($) { 

    // Provides object-measuring functionality 
    Object.size = function(obj) { 
     var size = 0, key; 
     for (key in obj) { 
      if (obj.hasOwnProperty(key)) size++; 
     } 
     return size; 
    }; 

    // Returns the number of objects in my object 
    var size = Object.size(window.depthElems); 

    /* 
    This is where I'm having difficulty. 
    I would like to use window.depthElems.elem0, 
    then window.depthElems.elem1, etc. 
    */ 

    for (var i = 0; i < size; i++) { 
     $('.wrapper').append('<img src="' + window.depthElems.elem+i+[0] + '" />'); 
    } 

}); 

Answer 1

我會，因爲參數的緣故，還提供我的問題作爲答案。您可以使用：

for(element in window.depthElems) { 
    if(window.depthElems.hasOwnProperty(element)) { 
     $('.wrapper').append('<img src="' + window.depthElems[element] + '" />'); 
    } 
} 

這不僅更優雅，而且需要的代碼也少得多。當然，如果有理由使用其他代碼，請說出來。

注意：此代碼被編輯爲還包含讀取'數組'的能力，但問題是使它與'對象'一起工作。如果您使用'對象'，'hasOwnProperty'檢查是多餘的。

注2：您還可以使用var hasOwn = Object.prototype.hasOwnProperty;像Azder說，這是一個很好的保障。

Answer 2

我很抱歉，如果我的答案超過了頂端，我只是想避免由於使用JS（我已經經歷了很多）的進一步傷害。

jQuery(document).ready(function($) { 

    var i; // there is no block scope in JS, so better to be clear and define i here 
    var $wrapper; // also 

    // Changing the JS built-in objects is problematic most of the time 
    // You should learn from jQuery and do wrapping instead 
    // Or at least just a good namespasing like: 
    // MyFramework.objectSize = function (obj) {} 

    Object.size = function(obj) { 
     var size = 0, key; 
     var hasOwn = Object.prototype.hasOwnProperty; // will explain further down 
     for (key in obj) { 
      // if obj has redifined hasOwnProperty = function(){ return false; }? 
      // it's better to use hasOwn like this if(hasOwn.call(obj,key)) {} 
      // and please do use braces even if only 1 statement 
      if(hasOwn.call(obj,key)) size++; 
     } 
     return size; 
    }; 

    // Returns the number of objects in my JSON object 
    var size = Object.size(window.depthElems); 

    $wrapper = $('.wrapper'); // cached so jQuery doesn't search for it each iteration  

    // i is scoped to the whole function anyways 
    for (i = 0; i < size; i++) { 

     // $.each even guards you of the changing DOM which can cause 
     // infinite loops (you don't have that problem here, but... good to know 
     $.each(window['depthElems'+i],function(index,element){ 
      $wrapper.append('<img src="' + element + '" />'); 
     }); 
    } 

}); 

而且，既然您已經使物體命名elem1，elem2時，elem3，......你還不如用一個二維數組，像window.depthElems = [[],[],[]]