React Native中如何将对象数组转换为仅含目标值的字符串数组

按照需求的转换链路，整体逻辑拆分为3步：

• 遍历全量餐厅对象，逐个提取每个对象的category字段值
• 将每个category字段内按英文逗号拼接的多值字符串拆分为独立分类项，同时清理每个分类值前后的冗余空格，避免脏值干扰
• 对拆分后的全量分类值做去重处理，解决同一分类出现在多家餐厅分类字段中的重复问题

原生JS最简实现（无第三方依赖，贴合示例场景） #

直接使用数组原生API完成转换，无需引入额外工具库：

// 原输入餐厅数组
const restaurantList = [
  {
    id: '1',
    title: 'Italian Dream',
    category: 'Pizza, Pasta, Snack',
    opening_hours: '08:00-24:00',
  },
  {
    id: '2',
    title: 'Turkish Man',
    category: 'Döner, Pizza, Lahmacun',
    opening_hours: '08:00-24:00',
  }
]

// 转换逻辑
const pureCategoryArr = Array.from(new Set(
  restaurantList
    // 提取所有分类字段
    .map(item => item.category)
    // 拆分多值字符串、清理空格、自动去重
    .flatMap(catStr => catStr.split(',').map(cat => cat.trim()))
))

// 最终输出分类集合：["Pizza", "Pasta", "Snack", "Döner", "Lahmacun"]
// 与需求期望的分类值完全匹配，仅元素顺序和手写示例存在微小差异，可根据业务需要调整排序规则

健壮性优化版本（适配异常数据场景） #

如果实际业务中存在数据缺失（比如部分餐厅无category字段、category值为空字符串），可补充兜底逻辑避免代码报错：

const buildCategoryArray = (restaurantList) => {
  return Array.from(new Set(
    restaurantList
      // 过滤无有效分类字段的异常数据
      .filter(item => typeof item?.category === 'string' && item.category.trim())
      .flatMap(item => 
        item.category
          .split(',')
          .map(cat => cat.trim())
          // 过滤拆分后产生的空值
          .filter(cat => Boolean(cat))
      )
  ))
}

• 拆分分类字符串后必须执行trim()处理，原数据里逗号后通常带空格，不清理会导致" Pizza"和"Pizza"被判定为两个独立值，无法正常去重
• 去重优先使用Set实现，比传统的indexOf遍历判断写法性能更高，代码也更简洁
• 不要默认对最终分类数组做字典序排序，会打乱原有数据的遍历顺序，除非业务明确要求按字母序排列

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