当前位置: 首页 > backend >正文

【前端】jQuery数组合并去重方法总结

在 jQuery 中合并多个数组并去重,推荐使用原生 JavaScript 的 Set 对象(高效简单)或 $.unique()(仅适用于 DOM 元素,不适用于普通数组)。以下是完整解决方案:

方法 1:使用 ES6 Set(推荐)

// 定义多个数组
const arr1 = [1, 2, 3];
const arr2 = [2, 3, 4];
const arr3 = [3, 4, 5];// 合并数组并用 Set 去重
const mergedArray = [...new Set([...arr1, ...arr2, ...arr3])];console.log(mergedArray); // 输出: [1, 2, 3, 4, 5]

方法 2:使用 jQuery + 原生 JS(兼容旧浏览器)

// 定义多个数组
const arr1 = [1, 2, 3];
const arr2 = [2, 3, 4];
const arr3 = [3, 4, 5];// 使用 $.merge() 合并数组
const merged = $.merge($.merge([], arr1), arr2); // 合并前两个
const finalMerged = $.merge(merged, arr3);       // 合并第三个// 手动去重(兼容 IE)
const uniqueArray = finalMerged.filter((item, index) => {return finalMerged.indexOf(item) === index;
});console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]

封装成通用函数

function mergeUnique(...arrays) {const merged = [].concat(...arrays);return [...new Set(merged)]; // ES6 方式// 或兼容旧版: return merged.filter((v, i) => merged.indexOf(v) === i);
}// 使用示例
const result = mergeUnique(arr1, arr2, arr3);
console.log(result); // [1, 2, 3, 4, 5]

重要说明:

  1. $.unique() 不适用于普通数组
    jQuery 的 $.unique() 仅用于 DOM 元素数组去重,不可用于数字/字符串数组

  2. 推荐使用原生 JavaScript
    现代浏览器中,Set 方案性能最佳(时间复杂度 O(n)),代码最简洁。

  3. 对象数组去重
    如果数组元素是对象,需自定义去重逻辑(如基于特定属性):

    const users = [{id:1}, {id:2}, {id:1}];
    const uniqueUsers = users.filter((v, i, a) => a.findIndex(t => t.id === v.id) === i
    );
    

总结方案选择:

场景推荐方案
现代浏览器[...new Set([...arr1, ...arr2])]
兼容旧浏览器$.merge + filter + indexOf
对象数组自定义 filter 逻辑
http://www.xdnf.cn/news/15091.html

相关文章:

  • [论文阅读]Text Compression for Efficient Language Generation
  • 无缝矩阵与普通矩阵的对比分析
  • 「按键精灵安卓/ios辅助工具」动态验证码该怎么得到完整的图片
  • 电脑被突然重启后,再每次打开excel文件,都会记录之前的位置窗口大小,第一次无法全屏显示。
  • Prompt提示词的主要类型和核心原则
  • QTextCodec的功能及其在Qt5及Qt6中的演变
  • OKHttp 核心知识点详解
  • [Xmos] Xmos架构
  • Docker-构建镜像并实现LNMP架构
  • 【运维实战】解决 K8s 节点无法拉取 pause:3.6 镜像导致 API Server 启动失败的问题
  • 在指定conda 环境里安装 jupyter 和 python kernel的方法
  • vscode和插件用法
  • 「莫尔物理新范式」普林斯顿马普所合作Nature论文:SnSe₂/ZrS₂扭曲双层实现M点能谷调控与拓扑新效应
  • 如何设计一个登录管理系统:单点登录系统架构设计
  • 寒武纪MLU370编程陷阱:float32精度丢失的硬件级解决方案——混合精度训练中的定点数补偿算法设计
  • 字节 Seed 团队联合清华大学智能产业研究院开源 MemAgent: 基于多轮对话强化学习记忆代理的长文本大语言模型重构
  • 微服务架构的演进:迈向云原生——Java技术栈的实践之路
  • 西电考研录取:哪些省份考研上岸西电更容易?
  • 浏览器 实时监听音量 实时语音识别 vue js
  • 人大金仓教程
  • 【基础架构】——软件系统复杂度的来源(低成本、安全、规模)
  • 【基于大模型 + FAISS 的本地知识库与智能 PPT 生成系统:从架构到实现】
  • chatgpt是怎么诞生的,详解GPT1到GPT4的演化之路及相关背景知识
  • WebGPU了解
  • 二、深度学习——损失函数
  • AI技术如何重塑你的工作与行业?——实战案例解析与效率提升路径
  • 华为OD机试_2025 B卷_观看文艺汇演问题(Python,100分)(附详细解题思路)
  • Java零基础笔记09(Java编程核心:面向对象编程高级练习:支付模块)
  • 【01】MFC入门到精通—— MFC新建基于对话框的项目 介绍(工作界面、资源视图 、类视图)
  • 前端开发流程设计详解