如何在JavaScript中提取嵌套对象中不重复的sideName集合

以下是纯JavaScript实现方案，React JSX中可直接复用：

简洁高效的ES6+方案 #

// 假设data为读取到的JSON数组
const data = [
  // 你的JSON数据
];

// 提取所有不重复的sideName
const uniqueSideNames = [...new Set(
  data.flatMap(item => 
    Object.values(item.sides).map(side => side.sideName)
  )
)];

// 结果：["A", "B", "C", "D", "H", "U", "L", "Q"]

代码逻辑说明：

• Object.values(item.sides)：将每个对象的sides键值对对象转换为包含side对象的数组
• flatMap：遍历所有数据项，将每个item的sideName集合扁平为一维数组
• new Set()：利用Set的唯一性自动去重
• [...Set]：将去重后的Set转换为普通数组

兼容旧环境的方案 #

如果需要兼容不支持ES6+的环境，可使用reduce实现：

const uniqueSideNames = data.reduce((result, item) => {
  // 遍历当前item的所有side对象
  Object.values(item.sides).forEach(side => {
    // 仅当结果数组中不存在当前sideName时添加
    if (!result.includes(side.sideName)) {
      result.push(side.sideName);
    }
  });
  return result;
}, []);

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