React（ES6）中遍历数组内对象并展示键值对的最优方法

嘿，这问题我碰到过好多次，给你分享个最顺手也最简洁的解法～

首先得先处理你的数组结构：你的bears数组里只存了一个对象元素，所以第一步要先把这个对象取出来，方便后续操作。

ES6+引入的Object.entries()是遍历对象键值对的最优选择——它会直接把对象转换成包含[键名, 键值]的二维数组，完美匹配你需要同时获取name和value的需求。

生成你要的<p>标签并展示的代码示例 #

// 你的原始数据
const bears = [ { Yogi: "123kg", Pooh: "110kg", Grizly: "112kg", BooBoo: "200kg", Polar: "100kg" } ];

// 取出数组中的对象
const bearData = bears[0];

// 遍历生成所有<p>标签，再拼接成完整的HTML片段
const bearHtml = Object.entries(bearData)
  .map(([name, value]) => `<p>${name} ${value}</p>`)
  .join('');

// 插入到页面的容器中（比如id为bear-container的元素）
document.getElementById('bear-container').innerHTML = bearHtml;

如果只是需要输出纯文本内容（比如你提到的最终展示格式） #

可以稍微调整一下map的返回值：

const bearText = Object.entries(bearData)
  .map(([name, value]) => `${name} ${value}`)
  .join(' ');

console.log(bearText);
// 输出：Yogi 123kg Pooh 110kg Grizly 112kg BooBoo 200kg Polar 100kg

为什么这是最优方法？ #

• 简洁直观：一步拿到键值对，不需要额外通过键名去取值，代码可读性拉满
• 安全可靠：不会遍历到对象原型链上的多余属性，比for...in循环更省心
• 兼容性好：除了IE这种淘汰的浏览器，现代浏览器和Node.js都完全支持

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