Javascript 使用.map（）将对象属性转换为数组到HTML

我正在创建一个对象，将该对象的属性放入一个数组中，然后将该数组映射到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>')

let results=[]
类多边形{
构造函数（）{
this.name=“Hexagon”
这个边=6
此值为1.size=1
}
集合名（值）{
this.name=value
}
设置边（值）{
这个边=值
}
设置大小（值）{
此值为0.size=值
}
getArea（）{
返回this.size*this.size
}
}
让形状=新多边形（）
shape.setName（“正方形”）
形状。设置边（4）
形状。设置大小（6）
结果.推送（形状.名称）
结果.推送（形状.边缘）
结果.推送（形状.大小）
results.push（shape.getArea（））
console.log（结果）
resultsDiv=document.querySelector（“#results”）
resultsDiv.innerHTML=results.map（r=>''+r+'
'）

下面是对HTML的处理：

---

map

返回另一个数组，当您将其传递给

innerHTML

时，它将成为该数组的字符串版本

试试看：

console.log（results.map（r=>''+r+'
'）。toString（））

返回：

Square
，4
，6
，36

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

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

resultsDiv.innerHTML=results.map（r=>''+r+'
'）。连接（“”）

map

返回另一个数组，当您将其传递给

innerHTML

时，它将成为该数组的字符串版本

试试看：

console.log（results.map（r=>''+r+'
'）。toString（））

返回：

Square
，4
，6
，36

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

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

resultsDiv.innerHTML=results.map（r=>''+r+'
'）。连接（“”）

您还可以使用

reduce

和

template string

解决此问题，因为map返回一个数组，而InnerHTML对数组执行

toString

：

resultsDiv.innerHTML = results.reduce((r,c) => r.concat(`<p>${c}</p>`), '')

resultsDiv.innerHTML=results.reduce（（r，c）=>r.concat（`${c}
`），“”）

您还可以使用

reduce

和

template string

解决此问题，因为map返回一个数组，而InnerHTML对数组执行

toString

：

resultsDiv.innerHTML = results.reduce((r,c) => r.concat(`<p>${c}</p>`), '')

resultsDiv.innerHTML=results.reduce（（r，c）=>r.concat（`${c}
`），“”）