JavaScript如何将数组内对象的所有属性输出到页面标记中

问题原因 #

• 直接对数组cars做模板字符串插值时，会自动调用数组的toString()方法，将所有元素转为字符串后拼接，你的元素都是对象，就会输出[object Object]，等于每次循环都把整个数组的内容拼了进去，才会出现重复输出的问题。
• 直接对单个车辆对象cars[key]做插值也会调用对象的toString()方法，同样得到[object Object]，无法输出属性内容。
• 补充：不推荐用for...in遍历数组，这种方式会遍历到数组的可枚举自定义属性，优先用for...of或者下标遍历更稳妥。

修正方案 #

你可以直接读取对象的每个属性拼接成你要的HTML结构，示例代码如下：

let cars = [];

cars[0] = {
  img: 'assets/img/img-1.webp',
  car: 'Audi',
  model: 'A6',
  age: 2014,
  price: 20900
}
// 其余9个车辆对象的定义保持不变

let div = document.createElement('div');
div.className = 'cars-list';
// 用for...of遍历数组更合适
for (let carItem of cars) {
  let div_child = document.createElement('div');
  div_child.className = 'cars-list__item';
  // 单独拼接每个属性的内容，img可以直接渲染成图片
  div_child.innerHTML = `
    <img src="${carItem.img}" alt="${carItem.car} ${carItem.model}">
    <p>car: '${carItem.car}'</p>
    <p>model: '${carItem.model}'</p>
    <p>age: ${carItem.age}</p>
    <p>price: ${carItem.price}</p>
  `;
  div.append(div_child);
}
document.body.append(div);

如果需要动态输出对象所有属性，不需要手动写每个属性名，可以用Object.entries遍历对象的键值对：

for (let carItem of cars) {
  let div_child = document.createElement('div');
  div_child.className = 'cars-list__item';
  let htmlStr = '';
  for (let [key, value] of Object.entries(carItem)) {
    if (key === 'img') {
      htmlStr += `<img src="${value}" alt="车辆图片">`;
      continue;
    }
    htmlStr += `<p>${key}: ${typeof value === 'string' ? `'${value}'` : value}</p>`
  }
  div_child.innerHTML = htmlStr;
  div.append(div_child);
}

内容的提问来源于stack exchange，提问作者Vladyslav Mazur