JS/TS中如何从对象数组提取嵌套属性的去重唯一值

现有数据与需求 #

给定如下结构的游戏列表数组：

[
  {
    "name": "Ankh of Anubis",
    "rank": {
      "_type": "medal",
      "current": "ankh-of-anubis"
    }
  },
  {
    "name": "Bonus Roulette",
    "rank": {
      "_type": "medal",
      "current": "bonus-roulette"
    }
  },
  {
    "name": "jetx",
    "rank": {
      "_type": "medal",
      "current": "jetx"
    }
  },
  {
    "name": "Gates of Olympus",
    "rank": {
      "_type": "trophy",
      "current": "gates-of-olympus"
    }
  },
]

需要提取所有元素rank._type字段的去重值，预期输出：

uniqueValues = ["medal","trophy"]

原有写法的问题 #

之前尝试的三种写法都不生效，核心问题如下：

• 属性访问路径错误：目标字段是数组每一项下的rank._type，不存在根节点的games.category.title字段
• API使用错误：filter是用来筛选符合条件的原数组元素，不能用来提取属性值；Set需要接收可遍历的属性值集合来完成去重，不能直接传入单个属性值
• React Hook依赖缺失：useEffect没有把games加入依赖数组，数据更新时不会重新计算结果

可直接运行的正确代码 #

原生JS/TS通用写法 #

// 先用map遍历提取所有_type值，传入Set去重后转回数组即可
const uniqueValues = [...new Set(games.map(game => game.rank._type))]

React Hook场景写法 #

useEffect(() => {
  const uniqueTypes = Array.from(new Set(games.map(game => game.rank._type)))
  setTitles(uniqueTypes)
}, [games]) // 必须将games加入依赖数组，保证数据变更时结果同步

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