我该如何循环遍历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]。

有任何想法我做错了什么吗？

- Alosyius

---

console.log(obj, prop); - zerkms

通常情况下，你应该避免使用for..in来迭代数组。 - Jonathan Lonowski

不使用for..in与数组的唯一可信原因是属性可能无法按预期顺序返回。否则，它与在任何其他对象上使用for..in一样好或一样差（意外属性，来自[[Prototype]]的属性等）。 - RobG

Answer 1

看起来你可能只是错过了"messages"属性在data中的位置，因此循环可能正在迭代根Object而不是Array：

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

除非在给定代码片段之前将 data 设置为 messages。

但是，你应该考虑将其改为普通的 for 循环，针对 Array：

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

- Jonathan Lonowski

---

非常感谢你帮我改成了普通的 for 循环！尽快接受。 - Alosyius

他为什么要考虑使用普通的for循环？ - Travis Heeter

for...in 循环将数组视为一个普通对象，按照不确定的顺序迭代所有可枚举的键，而不仅仅是它的索引，即 0 到 length - 1。在某些情况下，这可能是需要的。但通常不建议这样做。- 为什么使用 for...in 进行数组迭代是个坏主意？ - Jonathan Lonowski

@JonathanLonowski 谢谢，也许你可以把这个加到你的答案里？ - Travis Heeter

Answer 2

你可以使用forEach方法迭代对象数组。

你可以使用forEach方法迭代对象数组。

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

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

- sandeep rajbhandari

---

这个更简单和高效。 - Shift 'n Tab

@sandeep rajbhandari，您能否进一步告诉我如何一次只返回一条消息而不是全部？ - CodeConnoisseur

需要ECMA Script 2015才能运行，旧版浏览器和移动设备不支持。 - andreszs

Answer 3

所有提供的答案都使用普通函数，但现在我们的大部分代码都使用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);
 });

- Hemadri Dasari

---

需要ECMA Script 2015，不支持旧版浏览器。 - andreszs

Answer 4

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

关键字是 "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]);
               }
           }
       }
    }

- JustAndrei

Answer 5

迭代

方法1：forEach方法

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

方法 2：for..of 方法

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

注意：此方法可能无法使用在对象等情况下：

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

方法2：for..in方法

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

- Arshid KV

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);
}

还有一个更加“JavaScript风格”的函数forEach()，它的代码更少但语法更复杂：

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

他们两个都输出以下内容：

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

- Tarvo Mäesepp

---

谢谢Tarvo，你的建议完美地满足了我的需求。 - user752746

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]);
    });
});

- Booster2ooo

Answer 8

let data = {
      "messages": [{
           "msgFrom": "13223821242",
           "msgBody": "Hi there"
       }, 
{
          "msgFrom": "Bill",
          "msgBody": "Hello!"
       }]
 }
 data.messages.forEach((obj, i) => {
     console.log("msgFrom", obj.msgFrom + " msgBody", obj.msgBody);
 });

- prathamchande

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

Answer 9

这里有一种通用的方法可以循环遍历对象（人）中的字段对象：

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

这个人物对象看起来像这样：

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

- Gene

Answer 10

要引用包含一个或多个对象的单个数组的内容，即类似于以下内容括号中的所有内容 {messages: [{"a":1,"b":2}] }，只需将 [0] 添加到查询中以获取第一个数组元素。

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

从那里，您可以像使用典型对象一样处理结果，并使用 Object.keys 例如获取 "a" 和 "b"。

- sarora