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

【前端】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.lryc.cn/news/584548.html

相关文章:

  • MinerU2将PDF转成md文件,并分拣图片
  • uniapp滚动组件, HuimayunScroll:高性能移动端滚动组件的设计与实现
  • 【Fargo】发送一个rtp包的过程1:怎么统一加twcc序号
  • 创始人IP如何进阶?三次关键突破实现高效转化
  • 使用SpringAOP自定义权限控制注解
  • 音频 SDP 文件格式
  • ElementUI:高效优雅的Vue.js组件库
  • Linux epoll简介与C++TCP服务器代码示例
  • Rust中Option和Result详解
  • Rust Web 全栈开发(四):构建 REST API
  • 单片机基础(STM32-DAY2(GPIO))
  • Apache Shiro 框架详解
  • 缺乏日常项目进度例会机制,如何系统推进
  • python的第三方库(五分钟小白从入门到精通)
  • 什么是 领域偏好学习(DPO)与多目标强化学习(PPO)
  • 抽象类基础知识
  • 5. isaac sim4.2 教程-Core API-操作机械臂
  • 大模型之Langchain篇——基础操作
  • 编写DockerFile文件
  • Dart 语言知识点总结
  • C++编程学习阶段性总结
  • python-字符串
  • 钉钉拿飞书当靶
  • 服务器内核级故障排查
  • 深入理解区块链 | 去中心化架构与密码学保障
  • Redisson 的分布式锁
  • (一)OpenCV——噪声去除(降噪)
  • 职坐标:嵌入式AI边缘计算实战
  • [5种方法] 如何将iPhone短信保存到电脑
  • 【网络】Linux 内核优化实战 - net.ipv4.tcp_keepalive_intv