如何使用array.map方法打印对象数组的键与值

完全可以用Array.map()遍历对象数组输出对应键值，你的现有思路方向是对的，只需要修正几个语法和逻辑问题即可。

现有代码的问题 #

• map方法返回的是数组，直接和字符串拼接时会默认调用toString()方法，在每个元素之间插入多余的逗号，需要追加.join('')把map返回的数组合并为普通字符串
• 你当前返回的span标签里硬编码了固定的"value"，需要替换成访问遍历项x对应的属性，比如要取键为userName的属性值就写x.userName
• 注意模板字符串的反引号闭合，你提供的示例代码中模板字符串没有写闭合反引号

修正后的参考代码 #

// 以输出对象的key属性值为例
const resultHtml = `<div>` +
array.map( x => {
  return `<span class="key">${x.key}</span><br>`
}).join('') +
`</div>`

遍历输出单个对象所有键值的方法 #

如果需要打印数组中每个对象的全部键值对，可以结合Object.entries()实现：

const resultHtml = `<div>` +
array.map( item => {
  // 遍历单个对象的所有键值对生成标签
  return Object.entries(item).map(([key, value]) => {
    return `<span class="${key}">${key}: ${value}</span><br>`
  }).join('')
}).join('') +
`</div>`

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