React Native：遍历键名不同但值结构一致的嵌套JSON对象

刚接触React Native和ES6的时候，遇到对象遍历确实容易懵，毕竟.map()是数组专属的方法嘛！别担心，咱们用几个ES6的对象方法就能轻松解决这个问题——不用逐个写键名，就能批量获取每个键对应的value和label。

核心思路：把对象转成数组再遍历 #

因为.map()只能用于数组，所以第一步要把你的jsonData对象转换成可遍历的数组，ES6提供了几个好用的方法，按需选择即可：

方案1：保留原键名（推荐，适合需要用到键名的场景）

用Object.entries()方法，它会把对象转换成[键名, 对应值]格式的数组，之后就能用.map()遍历了：

// 假设你的jsonData长这样
const jsonData = {
  username: { value: "hulkinBrain", label: "用户名" },
  email: { value: "example@test.com", label: "邮箱" },
  occupation: { value: "Developer", label: "职业" }
};

// 遍历处理
const processedItems = Object.entries(jsonData).map(([key, item]) => {
  return {
    // 保留原键名（如果不需要可以删掉这行）
    originalKey: key,
    // 提取需要的value和label
    value: item.value,
    label: item.label
  };
});

这样processedItems就是一个包含所有键值对信息的数组，比如输出会是：

[
  { originalKey: "username", value: "hulkinBrain", label: "用户名" },
  { originalKey: "email", value: "example@test.com", label: "邮箱" },
  { originalKey: "occupation", value: "Developer", label: "职业" }
]

方案2：只提取value和label（不需要原键名时用）

如果不需要保留原键名，用Object.values()更简洁，它直接返回对象所有值的数组：

const processedItems = Object.values(jsonData).map(item => {
  return {
    value: item.value,
    label: item.label
  };
});

输出结果会是：

[
  { value: "hulkinBrain", label: "用户名" },
  { value: "example@test.com", label: "邮箱" },
  { value: "Developer", label: "职业" }
]

拓展：在React Native列表中使用 #

如果是要把这些数据渲染到FlatList里，直接用处理后的processedItems就行，记得给每个item设置唯一的key（用原键名或者value都可以，只要唯一）：

<FlatList
  data={processedItems}
  keyExtractor={(item) => item.originalKey || item.value}
  renderItem={({ item }) => (
    <View>
      <Text>*{item.label}*: {item.value}</Text>
    </View>
  )}
/>

这样就能轻松渲染出所有的label和value啦～

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