javascript - 使用 for 循环方法打印/记录数组中的对象

Question

如何使用 for 循环打印/记录每个用户的姓名和年龄？

var users = [
  {name: "Michael", age:37},
  {name: "John", age:30}, 
  {name: "David", age:27}
];

我尝试设置一个 for 循环来获取姓名和年龄，但我只是记录对象

var users = [
  {name: "Michael", age:37},
  {name: "John", age:30}, 
  {name: "David", age:27}
];

var i, len, text;

for (i = 0, len = users.length, text = ""; i < len; i++)
{
    text += users[i] + "<br>";
}

预期结果:

Michael - 37
John - 30
David - 27

如何获得该输出？

Answer 1

目前您只是循环遍历数组。因此users[i]将为您提供数组中的特定对象。

所以，如果你想获得name和age对于给定对象，您可以使用 dot notation :

• users[i].name获取 i<sup>th</sup> 的名称对象

• users[i].age获取 i<sup>th</sup> 的年龄对象

此外，由于您正在构建的字符串 ( text ) 包含 HTML ( <br /> )，我假设您希望将其结果添加到页面中(而不是将其打印到控制台)。您可以使用以下方法来做到这一点:

document.body.innerHTML += text

这将添加您的 text将字符串作为 HTML 添加到 HTML 正文中。

请参阅下面的工作示例:

var users = [{
    name: "Michael",
    age: 37
  }, {
    name: "John",
    age: 30
  },
  {
    name: "David",
    age: 27
  }
];

var text = "";
for (var i = 0; i < users.length; i++) {
  var name = users[i].name; // get the name
  var age = users[i].age; // get the age
  text += name + " - " +age + "<br>";
}

document.body.innerHTML = text; // add the text to the page

此外，如果您愿意，一旦您熟悉了循环等，您就可以使用函数式编程、ES6 解构和模板文字来完成相同的任务:

const users = [{name: "Michael", age: 37}, {name: "John", age: 30}, {name: "David", age: 27}],

text = users.reduce((acc, {name, age}) => `${acc}${name} - ${age}<br />`, ``);
document.body.innerHTML = text; // add the text to the page