高效处理数组差异:JS中新增、删除、交集的最优解(Set实现)

👉 求:新数组 - 旧数组(差集)

也就是:

👉 新数组里有,但旧数组里没有的值


一、最简单直接(推荐)✅

js 复制代码
const oldArr = ['a', 'b', 'c']
const newArr = ['b', 'c', 'd', 'e']

const added = newArr.filter(item => !oldArr.includes(item))

console.log(added) // ['d', 'e']

✔ 语义清晰

✔ 适合数据量不大(<1万)


二、性能更优(推荐大数据)🔥

👉 用 Set,避免 includes 的 O(n)

js 复制代码
const oldArr = ['a', 'b', 'c']
const newArr = ['b', 'c', 'd', 'e']

const oldSet = new Set(oldArr)

const added = newArr.filter(item => !oldSet.has(item))

console.log(added) // ['d', 'e']

✔ 时间复杂度:O(n)

✔ 实际项目推荐用这个


三、如果你还想知道"删除了哪些"👇

👉 顺手一起算(很常见)

js 复制代码
const oldArr = ['a', 'b', 'c']
const newArr = ['b', 'c', 'd', 'e']

const oldSet = new Set(oldArr)
const newSet = new Set(newArr)

// 新增
const added = newArr.filter(item => !oldSet.has(item))

// 删除
const removed = oldArr.filter(item => !newSet.has(item))

console.log('新增:', added)   // ['d','e']
console.log('删除:', removed) // ['a']

四、封装一个通用方法(生产可用)🔥

js 复制代码
function diffArray(oldArr, newArr) {
  const oldSet = new Set(oldArr)
  const newSet = new Set(newArr)

  return {
    added: newArr.filter(item => !oldSet.has(item)),
    removed: oldArr.filter(item => !newSet.has(item)),
    common: newArr.filter(item => oldSet.has(item))
  }
}

用法:

js 复制代码
const res = diffArray(
  ['a','b','c'],
  ['b','c','d','e']
)

console.log(res)
/*
{
  added: ['d','e'],
  removed: ['a'],
  common: ['b','c']
}
*/

五、你这个场景的本质总结

👉 你其实在做的是:

  • 新增 = new - old
  • 删除 = old - new
  • 交集 = old ∩ new

六、一句话记住

👉 判断"有没有" → 用 Set

👉 判断"差异" → 用 filter + has


相关推荐
电商API_18007905247几秒前
电商ERP 自动同步订单功能实现拆解与技术手段
服务器·前端·网络·爬虫
cxxcode几秒前
CSS 隔离与 qiankun 样式问题总结
前端
__sjfzllv___8 分钟前
在职前端Leader学习/转行 AI Agent -DAY3
前端
不负岁月无痕13 分钟前
STL -- C++ 红黑树封装 Map 和 Set
java·c语言·开发语言·c++·面试
miss13 分钟前
海康威视 IoT 平台前端实战:视频流、海量设备与实时数据可视化
前端·javascript·物联网
mONESY14 分钟前
MCP 协议实战博客:跨进程、跨语言可复用 AI 工具标准化方案
javascript
用户28497095255716 分钟前
基于MQTT+SpringBoot的实验室设备数据采集与实时监控系统实战
前端
前端肥猿16 分钟前
控制台中添加插件面板
前端
小园子的小菜17 分钟前
Java核心基础:反射与泛型底层原理及实战用法详解
java·开发语言
IT_陈寒38 分钟前
SpringBoot自动配置的坑,我的Bean怎么不生效?
前端·人工智能·后端