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^th对象的名称
users[i].age获取i^th对象的年龄

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

Answer 2

尼克·帕森斯给出的答案的另一个补充替代方法可能是使用Array.map()和Array.join()：

const users = [
  {name: "Michael", age: 37},
  {name: "John", age: 30},
  {name: "David", age: 27}
];

let text = users.map(({name, age}) => `${name} - ${age}`).join("<br>");

document.body.innerHTML += text;

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

2 个答案: