forEach 遍历对象并使用 document.write() 进行打印；

Question

有一个数组，由我需要循环的几个对象组成（最好使用 forEach 循环，这是练习的范围）。我需要在屏幕上打印它们的详细信息（不能只在控制台上看到它们，这本来要简单得多）并且理想情况下，有工具将它们格式化为 CSS.

我可以通过实际的 forEach 循环（见下文，try-1）更接近于打印完整的 [object Object] 对序列，而无法更深入地检索数据。

我设法打印了每个对象的详细信息 (try-2)，但只是通过手动调用的每个属性的繁琐列表。

有没有一种方法可以遍历对象并以有序的方式检索其数据并将其打印在屏幕上？提前致谢

var bulbasaur = { name: "Bulbasaur", height: 0.7, weight: 6.9, hatchSteps: 5100, types: ["Grass", " Poison"], eggGroups: ["Monster", " Grass"], abilities: ["Chlorophyll", " Overgrow"]};

var ivysaur = { name: "Ivysaur", height: 1, weight: 13, hatchSteps: 5100, types: ["Grass", " Poison"], eggGroups: ["Monster", " Grass"], abilities: ["Chlorophyll", " Overgrow"]};

var venusaur = { name: "Venusaur", height: 2, weight: 100, hatchSteps: 5100, types: ["Grass", " Poison"], eggGroups: ["Monster", " Grass"], abilities: ["Chlorophyll", " Overgrow"]};

var charmander = { name: "Charmander", height: 0.6, weight: 8.5, hatchSteps: 5100, types: ["Fire"], eggGroups: ["Monster", " Dragon"], abilities: ["Blaze", " Solar-power"]};

var charmeleon = { name: "Charmeleon", height: 1.1, weight: 19, hatchSteps: 5100, types: ["Fire"], eggGroups: ["Monster", " Dragon"], abilities: ["Blaze", " Solar-power"]};

var charizard = { name: "Charizard", height: 1.7, weight: 90.5, hatchSteps: 5100, types: ["Fire", " Flying"], eggGroups: ["Monster", " Dragon"], abilities: ["Blaze", " Solar-power"]};

var squirtle = { name: "Squirtle", height: 0.5, weight: 9, hatchSteps: 5100, types: ["Water"], eggGroups: ["Monster", " Water 1"], abilities: ["Rain-dish", " Torrent"]};

var wartortle = { name: "Wartortle", height: 1, weight: 22.5, hatchSteps: 5100, types: ["Water"], eggGroups: ["Monster", " Water 1"], abilities: ["Rain-dish", " Torrent"]};

var repository = [
  bulbasaur,
  ivysaur,
  venusaur,
  charmander,
  charmeleon,
  charizard,
  squirtle,
  wartortle
];


(try-1)

const keys = Object.entries(repository)

keys.forEach(function(item, key) {
  document.write(repository[key] + '<br>');
  document.write(item);
});```

try-2
```repository.forEach(function(pokemon){
  document.write('<p class="pokeTitle">' + pokemon.name + '</p>' +
                 'Height: ' + pokemon.height + '<br>' +
                 'Weight: ' + pokemon.weight + '<br>' +
                 'Hatch Steps: ' + pokemon.hatchSteps + '<br>' +
                 'Types: ' + pokemon.types + '<br>' +
                 'Egg Groups: ' + pokemon.eggGroups + '<br>' +
                 'Abilities: ' + pokemon.abilities + '<br>');
});```

(results using try-1)
[object Object]
0,[object Object][object Object]
1,[object Object][object Object]
2,[object Object][object Object]
3,[object Object][object Object]
4,[object Object][object Object]
5,[object Object][object Object]
6,[object Object][object Object]
7,[object Object]

(results using try-2)
Bulbasaur

Height: 0.7
Weight: 6.9
Hatch Steps: 5100
Types: Grass,Poison
Egg Groups: Monster,Grass
Abilities: Chlorophyll, Overgrow
(+other 7 pokemon items)

Answer 1

查看实际数据的一种快速方法是使用 JSON.stringify 将数据转换为字符串。

var bulbasaur = { name: "Bulbasaur", height: 0.7, weight: 6.9, hatchSteps: 5100, types: ["Grass", " Poison"], eggGroups: ["Monster", " Grass"], abilities: ["Chlorophyll", " Overgrow"]};
var ivysaur = { name: "Ivysaur", height: 1, weight: 13, hatchSteps: 5100, types: ["Grass", " Poison"], eggGroups: ["Monster", " Grass"], abilities: ["Chlorophyll", " Overgrow"]};
var venusaur = { name: "Venusaur", height: 2, weight: 100, hatchSteps: 5100, types: ["Grass", " Poison"], eggGroups: ["Monster", " Grass"], abilities: ["Chlorophyll", " Overgrow"]};
var charmander = { name: "Charmander", height: 0.6, weight: 8.5, hatchSteps: 5100, types: ["Fire"], eggGroups: ["Monster", " Dragon"], abilities: ["Blaze", " Solar-power"]};
var charmeleon = { name: "Charmeleon", height: 1.1, weight: 19, hatchSteps: 5100, types: ["Fire"], eggGroups: ["Monster", " Dragon"], abilities: ["Blaze", " Solar-power"]};
var charizard = { name: "Charizard", height: 1.7, weight: 90.5, hatchSteps: 5100, types: ["Fire", " Flying"], eggGroups: ["Monster", " Dragon"], abilities: ["Blaze", " Solar-power"]};
var squirtle = { name: "Squirtle", height: 0.5, weight: 9, hatchSteps: 5100, types: ["Water"], eggGroups: ["Monster", " Water 1"], abilities: ["Rain-dish", " Torrent"]};
var wartortle = { name: "Wartortle", height: 1, weight: 22.5, hatchSteps: 5100, types: ["Water"], eggGroups: ["Monster", " Water 1"], abilities: ["Rain-dish", " Torrent"]};

var repository = [
  bulbasaur,
  ivysaur,
  venusaur,
  charmander,
  charmeleon,
  charizard,
  squirtle,
  wartortle
];

document.querySelector('#repository').textContent = JSON.stringify(repository,null,2);

<pre id="repository"></pre>

如果你想生成 HTML，使用像 Mustache/Handlebars

这样的模板引擎可能会 simpler/more 强大

forEach 遍历对象并使用 document.write() 进行打印；

forEach Looping through objects and printing with document.write();

javascript

object

foreach

document.write