JavaScript map遍历对象数组提取指定key唯一值的方法

当前使用map遍历数组的逻辑会对每一个数组元素执行判断，数组内存在多少个携带目标key的对象，就会返回多少个对应值，必然出现重复结果。该需求本质是查找首个匹配目标key的有效值，属于查找类操作，并非全量映射操作，不适合用map实现。

原生JS实现（无第三方依赖） #

使用Array.prototype.find方法即可，该方法找到匹配项后会立刻终止遍历，不会继续读取后续重复key的内容：

// 定义要查找的目标key
const TARGET_KEY = 'Niveau sonore';
// 查找首个有效值，找不到则返回空字符串
const matchItem = arr.find(item => Object.prototype.hasOwnProperty.call(item, TARGET_KEY) && item[TARGET_KEY]);
const result = matchItem ? matchItem[TARGET_KEY] : '';

console.log(result) // 针对示例数组输出：silencieux 46 dB

如果是在JSX渲染场景中使用，可以直接写成内联形式：

{
  (() => {
    const matched = arr.find(d => d['Niveau sonore']);
    return matched ? matched['Niveau sonore'] : '';
  })()
}

提示：使用hasOwnProperty做判断是为了避免key对应falsy值（如0、false）时被误判为不存在，如果你确定目标key对应的有效值都是非空字符串，可以简化判断条件。

Lodash 实现方案 #

Lodash的_.find方法逻辑和原生一致，兼容性更强：

import _ from 'lodash';

const matchItem = _.find(arr, item => _.has(item, 'Niveau sonore') && item['Niveau sonore']);
const result = matchItem ? matchItem['Niveau sonore'] : '';

批量去重方案（适合需要取多个key值的场景） #

如果你后续需要从数组中取多个不同key的值，可以先把数组转换为单对象结构，所有重复key只保留第一个出现的有效值，后续直接从对象取值即可，无需重复遍历：

const uniqueData = arr.reduce((acc, cur) => {
  const key = Object.keys(cur)[0];
  // 仅当key不存在且值有效时赋值，跳过后续重复项
  if (!acc.hasOwnProperty(key) && cur[key]) {
    acc[key] = cur[key];
  }
  return acc;
}, {});

// 后续直接取值
console.log(uniqueData['Niveau sonore']); // silencieux 46 dB
console.log(uniqueData['Marque']); // INDESIT

针对你提供的示例数组，上述方案会返回第一个匹配Niveau sonore的值silencieux 46 dB，不会返回后续重复的46 dB silencieux、Silencieux，满足仅返回一个有效值的需求。

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