如何使用JavaScript遍歷對象數組？

Question

我試圖循環包含對象的數組，但我不斷出錯：“無法設置未定義的屬性'color'”。 我究竟做錯了什么？

 var ObjectTest = function(something1, something2){ this.Name = something1; this.Job = something2; this.color = ''; this.numbers = []; } var first = new ObjectTest('Paul', 'teacher'); var second = new ObjectTest('Jane', 'doctor'); var third = new ObjectTest('Mike', 'student'); var someArray = []; someArray.push(first, second, third); console.log(someArray); for(var i =0; i <= someArray.length; i++){ someArray[i].color = 'red'; }; 

Answer 1

您需要迭代直到數組的長度，但不能超過，因為索引是從零開始的

for (var i = 0; i < someArray.length; i++) {
//                ^

對於不存在的項目，數組返回undefined 。 undefined沒有屬性可分配新值。

 var ObjectTest = function(something1, something2) { this.Name = something1; this.Job = something2; this.color = ''; this.numbers = []; }; var first = new ObjectTest('Paul', 'teacher'); var second = new ObjectTest('Jane', 'doctor'); var third = new ObjectTest('Mike', 'student'); var someArray = []; someArray.push(first, second, third); for (var i = 0; i < someArray.length; i++) { someArray[i].color = 'red'; } // no semicolon here console.log(someArray); 

Answer 2

<=是榮

 var ObjectTest = function(something1, something2){ this.Name = something1; this.Job = something2; this.color = ''; this.numbers = []; } var first = new ObjectTest('Paul', 'teacher'); var second = new ObjectTest('Jane', 'doctor'); var third = new ObjectTest('Mike', 'student'); var someArray = []; someArray.push(first, second, third); for(var i =0; i < someArray.length; i++){ someArray[i].color = 'red'; }; console.log(someArray); 

Answer 3

在循環中將<=替換為< 。

這里只有3個項目的陣列上，這意味着你已經索引0 ， 1和2 。 循環應在到達3時停止。 但是由於您使用了<=而不是< ，所以當i為3時， i <= 3 3為true因此可以執行代碼。 該錯誤是由someArray[3]不存在引起的。

在數組中循環而不處理索引的一種更安全的方法是使用array.forEach 。 它只會循環執行數組中存在的項的次數。

someArray.forEach((object, index) => {
  object.color = 'red'
})

Answer 4

遍歷數組的一種更簡單的方法是使用forEach。 像這樣：

someArray.forEach(data =>  data.color = 'red');