高效处理数组差异: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


相关推荐
XiaQ09194 小时前
Linux 常用命令学习笔记(用户管理篇):用户、组与权限的钥匙
linux·开发语言·笔记·学习
不可求~4 小时前
C++ 报错交给 AI 之前,先准备好这 8 类信息
开发语言·c++·人工智能
名字还没想好☜4 小时前
用 Python struct 解析二进制协议:pack/unpack、字节序与对齐踩坑
开发语言·python·二进制·struct
sir.山4 小时前
在 Vue 3 项目中使用 Mock 数据
前端·vue.js·vue3·vite
李剑一4 小时前
华为新上Pura X View阔直板手机,特殊屏幕比例设备下,前端应该怎么去适配更完美?送你一套完整工具代码
前端
一知半解仙4 小时前
当机器人学会泛化,而我在写Java:一名后端开发者的2026年8月21日观察手记
java·开发语言·机器人
01_ice4 小时前
html个人简历展示
前端·html
程序员爱钓鱼5 小时前
Rust where详解:让泛型与Trait约束更加清晰
前端·后端·rust
青 春 记 忆5 小时前
LeetCode 155. 最小栈|Python 解法详解
开发语言·python·leetcode
zzzzzz3105 小时前
react-bits 为什么会吸引前端开发者:别把动效当装饰,先把它当成页面能力
前端·react.js·动效