如何遍历对象类型变量的所有值并渲染，forEach调用失败怎么解决？

问题原因 #

• 你的elements是普通对象，forEach是数组的原生方法，对象无法直接调用，执行会直接报错。
• 箭头函数不绑定独立的this指向，你代码中回调里的this指向外层作用域的全局对象，无法获取到当前遍历的歌曲数据。

解决方法 #

方案1（更推荐）：将模拟数据库改为数组结构

你需要存储多首歌曲的话，数组结构本身更适合列表类数据的存储，修改后的代码如下：

// 修正后的模拟数据库（数组结构，可随意添加多首歌曲）
const elements = [
  {
    "name": "songname",
    "author": "songauthor",
    "album": "songalbum"
  }
  // 可继续添加更多歌曲对象
];

// 修正后的遍历逻辑，直接通过回调参数拿到当前歌曲项
elements.forEach(songItem => {
    addElement(songItem)
})

你的addElement函数本身逻辑没有问题，不需要修改。

方案2：保留原对象结构，提取对象值后遍历

如果一定要保持原有的对象存储结构，可以用Object.values()提取对象所有属性值转为数组后再遍历：

const elements = {
  "song": {
    "name": "songname",
    "author": "songauthor",
    "album": "songalbum"
  }
  // 可继续添加更多歌曲属性
};

Object.values(elements).forEach(songItem => {
    addElement(songItem)
})

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