0

0

JavaScript 数组按属性拆分:分离重复项与唯一项的高效实现

聖光之護

聖光之護

发布时间:2026-03-06 14:49:03

|

797人浏览过

|

来源于php中文网

原创

JavaScript 数组按属性拆分:分离重复项与唯一项的高效实现

本文介绍如何基于指定属性(如 name)将数组精准拆分为两个子数组——一个包含所有重复项(即该属性值出现多次的所有对象),另一个仅含完全唯一的项,适用于数据清洗与校验场景。

本文介绍如何基于指定属性(如 name)将数组精准拆分为两个子数组——一个包含所有重复项(即该属性值出现多次的所有对象),另一个仅含完全唯一的项,适用于数据清洗与校验场景。

在实际前端开发中,尤其是处理用户导入的结构化数据(如客户列表、商品清单)时,常需识别并隔离重复记录——不是简单去重,而是明确区分“哪些是重复的”和“哪些是真正唯一的”,以便后续人工审核或差异化处理。例如,当多个客户共享相同姓名但 ID 或地址不同时,系统应将全部同名记录归入“待确认重复集”,而将姓名完全无冲突的记录送入主业务流程。

以下是一个健壮、可复用的解决方案,使用 Map 按指定键(如 name)聚合同名对象,再依据分组长度严格划分:

/**
 * 将数组按指定属性拆分为重复项数组和唯一项数组
 * @param {Array} arr - 原始对象数组
 * @param {string} key - 用于判断重复的属性名(如 'name')
 * @returns {{duplicates: Array, uniques: Array}} 包含两个数组的对象
 */
function splitByDuplicates(arr, key) {
  const groupMap = new Map();

  // 第一步:按 key 聚合所有对象
  for (const item of arr) {
    const keyValue = item[key];
    if (!groupMap.has(keyValue)) {
      groupMap.set(keyValue, []);
    }
    groupMap.get(keyValue).push(item);
  }

  const duplicates = [];
  const uniques = [];

  // 第二步:按分组长度分配到对应数组
  for (const group of groupMap.values()) {
    if (group.length > 1) {
      duplicates.push(...group); // 所有同 key 的项均视为重复成员
    } else {
      uniques.push(...group);
    }
  }

  return { duplicates, uniques };
}

// 使用示例
const customers = [
  { id: 1, name: "John", address: "123 street" },
  { id: 2, name: "Alex", address: "456 street" },
  { id: 3, name: "John", address: "674 street" },
  { id: 4, name: "Stacy", address: "534 street" },
  { id: 5, name: "Blair", address: "634 street" }
];

const { duplicates, uniques } = splitByDuplicates(customers, 'name');
console.log("重复项(需人工校验):", duplicates);
// → [{ id:1, name:"John", ... }, { id:3, name:"John", ... }]

console.log("唯一项(可直接处理):", uniques);
// → [{ id:2, name:"Alex", ... }, { id:4, name:"Stacy", ... }, { id:5, name:"Blair", ... }]

关键优势说明

摄图AI
摄图AI

摄图网旗下AI视觉创作平台

下载
  • 语义清晰:duplicates 包含 所有 出现在重复组中的元素(不止“第二个以后”的项),确保无遗漏;
  • 性能可靠:时间复杂度 O(n),仅遍历两次,Map 查找为 O(1),远优于嵌套循环;
  • 灵活可扩展:只需修改 key 参数即可适配任意字段(如 email、phone);
  • 强类型友好:函数签名明确,便于 TypeScript 类型推导(可补充泛型定义)。

⚠️ 注意事项

立即学习Java免费学习笔记(深入)”;

  • 若 key 对应值为 undefined 或 null,会被统一归为同一组——建议预处理确保字段存在,或添加空值校验逻辑;
  • 本方案不修改原数组,返回全新数组,符合函数式编程原则;
  • 如需保留原始顺序(例如重复组内按首次出现排序),当前实现已天然满足(Map 迭代顺序与插入顺序一致)。

该方法已在表单校验、Excel 导入去重、CRM 数据合并等真实场景中验证有效,兼顾准确性、可读性与工程实践性。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

43

2026.02.13

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

162

2026.02.25

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

252

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

1029

2024.03.01

golang map内存释放
golang map内存释放

本专题整合了golang map内存相关教程,阅读专题下面的文章了解更多相关内容。

77

2025.09.05

golang map相关教程
golang map相关教程

本专题整合了golang map相关教程,阅读专题下面的文章了解更多详细内容。

39

2025.11.16

golang map原理
golang map原理

本专题整合了golang map相关内容,阅读专题下面的文章了解更多详细内容。

67

2025.11.17

java判断map相关教程
java判断map相关教程

本专题整合了java判断map相关教程,阅读专题下面的文章了解更多详细内容。

47

2025.11.27

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

1

2026.03.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.8万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号