通過對象中的多個數組進行計數和循環

Question

我基本上只是試圖循環訪問一系列數組（動態創建）並在控制檯中輸出結果。調試器告訴我this.allitems[i]未定義。如何遍歷allItems對象中的每個數組？

var warehouse = { 
    allItems: { 
    shirts:[], 
    shorts:[] 
    }, 

// Counts how many arrays are in the object 
countArraysInAllItems: function(obj){ 
    var size = 0,key; 
    for(key in obj){ 
     if(obj.hasOwnProperty(key)) size++; 
    } 
    return size; 
    }, 

    // Display the items from the arrays (in no particular order) 
    displayItems: function(){ 
    var allItemsLength = this.countArraysInAllItems(this.allItems); 

    for(var i=0; i<allItemsLength; i++){ 
     var itemSubArray = this.allItems[i]; 

     for(var j=0; j<itemSubArray.length; j++){ 
     var itemType = this.itemSubArray[j].itemType; 
     var itemName = this.itemSubArray[j].itemName; 
     var itemQuantity = this.itemSubArray[j].itemQuantity; 

     console.log('Type:' + itemType + '\n' + 
        'Name: ' + itemName + '\n' + 
        'Qty:' + itemQuantity); 
     } 
     } 
    } 

Answer 1

正如其他的答案說， allItems是一個對象，所以你不能以數組的形式迭代它。

這是我的溶液，用2個for..in環路，使得代碼更簡潔：

var warehouse = { 
    allItems: { 
    shirts:[ 
     { 
     itemType: "type1", 
     itemName: "shirt1", 
     itemQuantity: 1 
     }, 
     { 
     itemType: "type2", 
     itemName: "shirt2", 
     itemQuantity: 10 
    } 
    ], 
    shorts:[ 
     { 
     itemType: "type3", 
     itemName: "short1", 
     itemQuantity: 4 
     } 
    ] 
    }, 

// Counts how many arrays are in the object 
countArraysInAllItems: function(obj){ 
    var size = 0,key; 
    for(key in obj){ 
     if(obj.hasOwnProperty(key)) size++; 
    } 
    return size; 
    }, 

    // Display the items from the arrays (in no particular order) 
    displayItems: function(){ 
    // this variable is not useful right now 
    var allItemsLength = this.countArraysInAllItems(this.allItems); 

    for(var i in this.allItems){ 
     var itemSubArray = this.allItems[i]; 

     for(var j in itemSubArray){ 
     var itemType = itemSubArray[j].itemType; 
     var itemName = itemSubArray[j].itemName; 
     var itemQuantity = itemSubArray[j].itemQuantity; 

     console.log('Type:' + itemType + '\n' + 
        'Name: ' + itemName + '\n' + 
        'Qty:' + itemQuantity); 
     } 
    } 
    } 
} 

Answer 2

的問題是，傳統的for環在JS可用於循環一個數組但不是對象。如果你仔細想想，這是有道理的 - 對象中沒有任何財產本身在特定的索引本身。

你在找什麼是for...in循環 - 你已經在使用它作爲計數，但後來出於某種原因在後面的循環中放棄了它。

嘗試這樣 - 我不能用不完整的代碼/數據集對其進行測試，但我認爲它會更接近您要完成的任務（並且您甚至可能不需要使用countArraysInAllItems方法）：

var warehouse = { 
    allItems: { 
     shirts: [], 
     shorts: [] 
    }, 

    // Counts how many arrays are in the object 
    countArraysInAllItems: function(obj) { 
     var size = 0, 
      key; 
     for (key in obj) { 
      if (obj.hasOwnProperty(key) && Array.isArray(obj[key])) { 
      size++; 
      } 
     } 
     return size; 
    }, 

    // Display the items from the arrays (in no particular order) 
    displayItems: function() { 
     var allItemsLength = this.countArraysInAllItems(this.allItems); 
     var key; 
     var j; 
     var itemSubArray; 
     var itemType; 
     var itemName; 
     var itemQuantity; 

     for (key in this.allItems) { 

      if (obj.hasOwnProperty(key) && Array.isArray(obj[key])) { 

      itemSubArray = obj[key]; 

      for (j = 0; j < itemSubArray.length; j++) { 
       itemType = this.itemSubArray[j].itemType; 
       itemName = this.itemSubArray[j].itemName; 
       itemQuantity = this.itemSubArray[j].itemQuantity; 

       console.log('Type:' + itemType + '\n' + 
        'Name: ' + itemName + '\n' + 
        'Qty:' + itemQuantity); 
      } 

      } 

     } 
    } 
}; 

PS - 我做了一些其他的小changes--首先，我感動了所有var聲明到功能範圍的頂級管理hoisting，我也包括了檢查，以確保財產事實上，allItems對象是一個數組（以防萬一你打算在對象上存儲其他東西）。

Answer 3

您可以使用for..in循環。對於allTtems屬性的第一個環和另一種嵌套循環的陣列襯衫和短褲：

var warehouse = { 
    allItems: { 
    shirts:[1,2,3,], 
    shorts:[10,11,12] 
    } 
}; 
for (var item in warehouse) 
    for (var element in warehouse[item]) 
    console.log(warehouse[item][element]); 
// [ 1, 2, 3 ] 
// [ 10, 11, 12 ] 

Answer 4

您可以使用

Object.keys(this.allItems).forEach(item => { 
     console.log(item); 
    }); 

更精確的答案

const warehouse = { 
    allItems: { 
     shirts: [ 
      { 
       itemType: '1', 
       itemName: '2', 
       itemQuantity: '3', 
      } 
     ], 
     shorts: [ 
      { 
       itemType: '5', 
       itemName: '6', 
       itemQuantity: '7', 
      } 
     ] 
    }, 

    // Display the items from the arrays (in no particular order) 
    displayItems: function() { 
     Object.keys(this.allItems).forEach(items => { 
      Object.keys(this.allItems[items]).forEach(item => { 
       const {itemType, itemName, itemQuantity} = this.allItems[items][item]; 
       console.log(itemType, itemName, itemQuantity); 
      }); 
     }); 
    } 
    } 

Answer 5

迭代使用Object.keys()和Array.prototype.forEach()的對象。然後使用forEach()遍歷每個數組：如果你結婚用的..循環

var warehouse = { 
 
    allItems: { 
 
    shirts: [{ 
 
     itemType: "type1", 
 
     itemName: "shirt1", 
 
     itemQuantity: 1 
 
    }, { 
 
     itemType: "type2", 
 
     itemName: "shirt2", 
 
     itemQuantity: 10 
 
    }], 
 
    shorts: [{ 
 
     itemType: "type3", 
 
     itemName: "short1", 
 
     itemQuantity: 4 
 
    }] 
 
    }, 
 
    displayItems: function() { 
 
    var items = this.allItems; 
 
    Object.keys(items).forEach(function(key) { 
 
     items[key].forEach(function(item) { 
 
     console.log('Type:' + item.itemType + '\n' + 
 
      'Name: ' + item.itemName + '\n' + 
 
      'Qty:' + item.itemQuantity); 
 
     }); 
 
    }); 
 
    } 
 
}; 
 

 
warehouse.displayItems();

Answer 6

，你可以做到這一點，像這樣：

var warehouse = { 
    allItems: { 
    shirts:{itemType:"type1", itemName:"name1", itemQuantity:"qty1"}, 
    shoes:{itemType:"type2", itemName:"name2", itemQuantity:"qty2"} 
    }, 

    // Display the items from the arrays (in no particular order) 
    displayItems: function(){ 
     for (var item in this.allItems) { 
     console.log(item); 
     var itemType = this.allItems[item].itemType; 
     var itemName = this.allItems[item].itemName; 
     var itemQuantity = this.allItems[item].itemQuantity; 
     console.log('Type: ' + itemType + '\n' + 
        'Name: ' + itemName + '\n' + 
        'Qty: ' + itemQuantity); 
     } 
    } 
} 

warehouse.displayItems(); 

Othewrwise，你可以（也應該）按照其他人的建議迭代Object.keys（）。