通过具有增量属性名称的对象循环访问

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 = [[],[],[]]