如何获取对象的键值对并在页面中渲染展示？

没问题，我来帮你搞定这个需求！你已经尝试了Object.keys()来获取对象的键，但要同时拿到键和对应的值，Object.entries()就是最适合的工具——它会把对象转换成一个嵌套数组，每一项都是[键, 值]的组合。拿你的对象举例：

var a = {"e":1,"d":3,"f":4};
Object.entries(a); // 返回 [["e", 1], ["d", 3], ["f", 4]]

下面分两种常见场景给你具体实现方案：

1. 原生JavaScript直接操作DOM #

如果是在纯前端项目里不用框架，你可以这样遍历并渲染：

var a = {"e":1,"d":3,"f":4};
// 先获取要插入内容的容器（假设页面里有个id为"content-container"的div）
const container = document.getElementById('content-container');

// 遍历每个键值对
for (const [key, value] of Object.entries(a)) {
  // 创建一个新的div元素
  const itemDiv = document.createElement('div');
  // 设置div的内容，这里假设value是图片的路径，你可以根据实际情况调整
  itemDiv.innerHTML = `
    <img src="${value}" alt="图片-${key}">
    <span>${key}</span>
  `;
  // 把创建好的div加到容器里
  container.appendChild(itemDiv);
}

2. React框架下的JSX渲染 #

看你例子里用了{value}这种语法，应该是在React项目里。这种情况下用map()遍历Object.entries()返回的数组即可：

const a = {"e":1,"d":3,"f":4};

function ImageList() {
  return (
    <div className="image-list">
      {/* 遍历键值对数组，注意要给每个子元素加唯一的key属性 */}
      {Object.entries(a).map(([key, value]) => (
        <div key={key}>
          <img src={value} alt={`图片-${key}`} />
          {key}
        </div>
      ))}
    </div>
  );
}

备选方案：用Object.keys()间接获取值 #

如果你不想用Object.entries()，也可以继续用Object.keys()，再通过键来取值：

for (const key of Object.keys(a)) {
  const value = a[key];
  // 后续渲染逻辑和上面一致
}

不过这种写法比Object.entries()多了一步取值操作，稍显繁琐。

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