使用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,您可以使用点表示法:

• users[i].name获取对象的名称ith

• users[i].age获得对象的年龄ith

此外,由于您正在构建的字符串(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