使用.map()将对象属性转换为HTML

Question

我正在创建一个对象,将该对象的属性放入一个数组中,然后将数组映射到HTML输出,我最后一行一行的逗号？这些逗号来自哪里？

let results = []

class Polygon {
  constructor() {
    this.name = "Hexagon"
    this.edges = 6
    this.size = 1
  }
  setName(value) {
    this.name = value
  }
  setEdges(value) {
    this.edges = value
  }
  setSize(value) {
    this.size = value
  }
  getArea() {
    return this.size * this.size
  }
}

let shape = new Polygon()
shape.setName("Square")
shape.setEdges(4)
shape.setSize(6)

results.push(shape.name)
results.push(shape.edges)
results.push(shape.size)
results.push(shape.getArea())

console.log(results)

resultsDiv = document.querySelector('#results')
resultsDiv.innerHTML = results.map(r => '<p>' + r + '</p>')

这是HTML的小提琴:https: //jsfiddle.net/ruzel/qyrczkup/3/

Answer 1

map返回另一个数组,当你传递给innerHTML它时,它变成了它的字符串版本.

试试看:console.log(results.map(r => '<p>' + r + '</p>').toString()) 返回:<p>Square</p>,<p>4</p>,<p>6</p>,<p>36</p>

要解决此问题,只需将该数组转换为字符串,然后再将其设置为HTML:

resultsDiv.innerHTML = results.map(r => '<p>' + r + '</p>').join('')