Печать / запись объектов из массива с использованием метода for

Question

Как мне напечатать / записать имя и возраст каждого пользователя, используя цикл for?

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

Я пытался установить цикл для получения имени и возраста, но я просто регистрирую объект

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

Другой дополнительной альтернативой ответу, данным Ником Парсонсом , может быть использование 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;

Answer 2

В данный момент вы только просматриваете ваш массив.Таким образом, users[i] даст вам конкретный объект в вашем массиве.

Итак, если вы хотите получить name и age данного объекта, вы можете использовать точечную нотацию :

• users[i].name для получения имени i<sup>th</sup> объекта

• users[i].age для получения возраста i<sup>th</sup>object

Кроме того, поскольку строимая вами строка (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