如何循环遍历 JavaScript 对象数组？

Question

我正在尝试遍历以下内容：

{
    "messages": [{
        "msgFrom": "13223821242",
        "msgBody": "Hi there"
    }, {
        "msgFrom": "Bill",
        "msgBody": "Hello!"
    }]
}

我想检索msgFrom 和msgBody

我试过了：

        for (var key in data) {
           var obj = data[key];
           for (var prop in obj) {
              if(obj.hasOwnProperty(prop)){
                console.log(prop + " = " + obj[prop]);
              }
           }
        }

但是控制台日志打印[Object]

任何想法我做错了什么？

Answer 1

看来您可能只是错过了data 中的"messages" 属性，因此循环可能会迭代根Object 而不是Array：

for (var key in data.messages) {
    var obj = data.messages[key];
    // ...
}

除非在给定的 sn-p 之前将 data 设置为 messages。

不过，您应该考虑将其更改为 Array 的普通 for 循环：

for (var i = 0, l = data.messages.length; i < l; i++) {
    var obj = data.messages[i];
    // ...
}

Answer 2

您可以使用 forEach 方法遍历对象数组。

data.messages.forEach(function(message){
    console.log(message)
});

参考： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Answer 3

在您的脚本中，数据就是您的整个对象。

key 是“messages”，这是一个你需要像这样迭代的数组：

    for (var key in data) {
       var arr = data[key];
       for( var i = 0; i < arr.length; i++ ) {
           var obj = arr[ i ];
           for (var prop in obj) {
               if(obj.hasOwnProperty(prop)){
                   console.log(prop + " = " + obj[prop]);
               }
           }
       }
    }

Answer 4

这里提供的所有答案都使用普通函数，但现在我们的大部分代码都使用 ES6 中的箭头函数。我希望我的回答能帮助读者了解当我们对对象数组进行迭代时如何使用箭头函数

let data = {
      "messages": [{
           "msgFrom": "13223821242",
           "msgBody": "Hi there"
       }, {
          "msgFrom": "Bill",
          "msgBody": "Hello!"
       }]
 }

使用箭头函数对数组执行 .forEach

 data.messages.forEach((obj, i) => {
     console.log("msgFrom", obj.msgFrom);
     console.log("msgBody", obj.msgBody);
 });

使用箭头函数在数组上做 .map

 data.messages.map((obj, i) => {
     console.log("msgFrom", obj.msgFrom);
     console.log("msgBody", obj.msgBody);
 });

Answer 5

迭代

方法一：forEach方法

messages.forEach(function(message) {
   console.log(message);
}

---

方法二：for..of方法

for(let message of messages){
   console.log(message);
}

注意：此方法可能不适用于对象，例如：

let obj = { a: 'foo', b: { c: 'bar', d: 'daz' }, e: 'qux' }

---

方法二：for..in方法

for(let key in messages){
       console.log(messages[key]);
 }

Answer 6

要在 javascript 中循环遍历对象数组或仅数组，您可以执行以下操作：

var cars = [{name: 'Audi'}, {name: 'BMW'}, {name: 'Ferrari'}, {name: 'Mercedes'}, {name: 'Maserati'}];

for(var i = 0; i < cars.length; i++) {
    console.log(cars[i].name);
}

还有forEach() 函数，它更“javascript-ish”，代码更少，但语法更复杂：

cars.forEach(function (car) {
    console.log(car.name);
});

它们都输出以下内容：

// Audi
// BMW
// Ferrari
// Mercedes
// Maserati

Answer 7

建议的 for 循环非常好，但您必须使用 hasOwnProperty 检查属性。我宁愿建议使用Object.keys()，它只返回对象的“自己的属性”（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys）

var data = {
    "messages": [{
        "msgFrom": "13223821242",
        "msgBody": "Hi there"
    }, {
        "msgFrom": "Bill",
        "msgBody": "Hello!"
    }]
};

data.messages.forEach(function(message, index) {
    console.log('message index '+ index);
    Object.keys(message).forEach(function(prop) {    
        console.log(prop + " = " + message[prop]);
    });
});

Answer 8

引用包含一个或多个对象的单个数组的内容，即像这样的括号中的所有内容 {messages: [{"a":1,"b":2}] } ，只需在查询中添加 [0] 即可获取第一个数组元素

例如messages[0] 将引用对象 {"a":1,"b":2} 而不是 messages 会引用整个数组 [{"a":1,"b":2}]

从那里您可以将结果作为典型对象使用，例如使用 Object.keys 来获取“a”和“b”。

Answer 9

for (let key in data) {
    let value = data[key];
    for (i = 0; i < value.length; i++) {
      console.log(value[i].msgFrom);
      console.log(value[i].msgBody);
    }
  }

Answer 10

下面是一个通用的方法来遍历一个对象（人）中的字段对象：

for (var property in person) {
    console.log(property,":",person[property]);
}

人 obj 看起来像这样：

var person={
    first_name:"johnny",
    last_name: "johnson",
    phone:"703-3424-1111"
};

Answer 11

arr = [{food:"Mandazi", Price: 5},{food:"红茶", Price: 20},{food:"Black Coffee", Price: 20} ]; txt = ""; 对于 (i = 0; 我 "; } document.getElementById("show").innerHTML = txt;