在JavaScript开发中，处理后端返回的复杂数据时，经常要从嵌套的对象数组里提取某个字段并去掉重复项。比如订单列表里每个订单包含多个商品，商品又有分类信息，我们想要拿到所有不重复的分类名称。下面介绍几种高效实现方式。
基础示例数据
假设有如下结构，每个用户有tags数组，我们要提取所有不重复的tag：
const users = [
{ id: 1, tags: [{ name: 'js' }, { name: 'css' }] },
{ id: 2, tags: [{ name: 'css' }, { name: 'html' }] },
{ id: 3, tags: [{ name: 'js' }, { name: 'vue' }] }
];
使用flatMap与Set
flatMap可以先映射再扁平化一层，配合Set天然去重的特性，代码非常简短：
const uniqueTags = [...new Set( users.flatMap(user => user.tags.map(tag => tag.name)) )]; console.log(uniqueTags); // ['js', 'css', 'html', 'vue']
原理说明
- flatMap将每个user的tags映射为name数组，并压平到外层数组
- Set自动忽略重复的原始值
- 扩展运算符转回数组方便后续使用
使用reduce自定义提取
如果嵌套更深或需要额外处理，可以用reduce累积：
const result = users.reduce((acc, user) => {
user.tags.forEach(tag => {
if (!acc.includes(tag.name)) {
acc.push(tag.name);
}
});
return acc;
}, []);
console.log(result);
性能与注意事项
| 方法 | 适合场景 | 注意点 |
|---|---|---|
| flatMap+Set | 一层嵌套、原始值去重 | 不支持IE，需转译 |
| reduce | 多层或复杂逻辑 | includes在大数据量时偏慢 |
当属性值是对象而非字符串时，Set无法按内容去重，此时应在提取时先用JSON.stringify或取id等主键，再执行上述逻辑。另外，若数据量极大，可考虑分片处理避免主线程卡顿。
提取唯一值的核心是先正确展开结构，再选择合适去重容器。
小结
针对嵌套对象数组，优先用flatMap加Set写法，既清晰又高效；遇到特殊结构再用reduce灵活控制。理解数据形状才能写出易维护的代码。
JavaScript嵌套对象数组唯一属性值修改时间：2026-07-28 14:27:18