JavaScript reduce处理含数组属性的对象数组去重取值异常问题

两个版本的代码都存在逻辑缺陷：

• 第一版直接将item.data[key]作为整体做去重校验，当字段值为数组类型（如type字段）时，逻辑会把整个数组当成单个元素对比，不会展开读取数组内的单个值，自然无法汇总到所有类型项。此外初始值直接取data[0]的对应字段，传入空数据集时会直接抛出报错。
• 第二版虽然加了数组遍历逻辑，但for循环第一次执行就会触发return，直接终止当前reduce回调的执行，根本不会遍历完当前字段下的所有数组元素；同时初始值硬编码取数组第一个元素，完全不兼容color这类值为字符串的字段——字符串取[0]只会拿到第一个字符，逻辑完全不通用。

核心思路是抹平单值和数组值的类型差异，不在遍历过程中提前返回累加器，初始值使用空数组做边界兼容：

const getValues = (data, key) => {
  return data.reduce((acc, item) => {
    const currentVal = item.data[key]
    // 统一将当前字段值转为数组：本身是数组就直接用，单值就包装为长度1的数组，消除类型差异
    const pendingValues = Array.isArray(currentVal) ? currentVal : [currentVal]
    pendingValues.forEach(val => {
      // 累加器里不存在该值才追加，实现去重
      if (!acc.includes(val)) {
        acc.push(val)
      }
    })
    // 等当前项的所有值都处理完，再返回累加器，不要在循环内提前return
    return acc
  }, []) // 初始值设为空数组，兼容空数据场景
}

• 执行getValues(mainData, "color")，返回["red", "green"]，和预期结果一致
• 执行getValues(mainData, "type")，返回["metal", "wood", "stone", "marble"]，所有类型值完成去重汇总，无遗漏
• 传入空数组调用函数时，不会抛出读取属性的报错，直接返回空数组，边界场景兼容正常

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