ReactJS如何获取对象键值对？使用map方法遇遍历问题

你遇到的核心问题是：map()是数组的专属方法，普通JavaScript对象不能直接调用它。要遍历对象的键和值，得先把对象转换成可迭代的数组形式，再用map()处理，下面给你几种实用方案：

方案1：用Object.entries()转成键值对数组后遍历 #

Object.entries()会把对象转换成[键, 值]格式的二维数组，刚好适配map()的遍历逻辑：

// 示例对象（模拟你的数据结构）
const weatherObj = {
  main: { temp: 22, pressure: 1013 },
  weather: [{ main: "Clouds", description: "few clouds" }],
  clouds: { all: 20 },
  cors: true
};

// 遍历所有键值对
const result = Object.entries(weatherObj).map(([key, value]) => {
  // 针对weather这类数组属性，可以额外处理内部元素
  if (Array.isArray(value)) {
    return {
      属性名: key,
      属性值: value.map(item => `${item.main}: ${item.description}`)
    };
  }
  return {
    属性名: key,
    属性值: value
  };
});

console.log(result);

方案2：用Object.keys()/Object.values()单独遍历键或值 #

如果你只需要处理键或者值，可以用这两个方法：

// 遍历所有键，再通过键取对应值
const keys = Object.keys(weatherObj).map(key => {
  return { 键: key, 值: weatherObj[key] };
});

// 遍历所有值
const values = Object.values(weatherObj).map(value => {
  return value; // 根据需求加工值
});

注意点 #

如果你的weather属性是数组（从常见的天气API返回结构来看大概率是），要遍历它的内部元素，需要在map()里嵌套另一个数组遍历逻辑，比如上面方案1里的处理方式。

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