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

Question

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

使用实用的forEach循环(请参见下面的try-1)，我可以更接近地打印一个完整的对象对序列，而不需要更深入地检索数据。

我成功地打印了每个对象的详细信息(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('‘+ pokemon.name + '’+)

             '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>');

)；`

(结果使用try-1)

对象对象

0，对象对象

1，对象对象

2，对象对象

3，对象对象

4，对象对象

5，对象对象

6，对象对象

7，对象对象

(使用try-2的结果)

牛头龙

身高: 0.7

重量: 6.9

舱口步骤: 5100

种类:草、毒

卵子组:怪物，草

能力:叶绿素，过度生长

(+其他7个口袋妖怪项目)

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，那么只使用像八字胡/车把这样的模板引擎可能会更简单/更强大