JavaScript 数组去重的 20 种实现方式，学会用不同思路解决问题

刀法如飞2026-05-16 14:54

JavaScript 数组去重的 20 种实现方式，用不同思路解决问题

数组去重是最常见的算法。看似简单，但不同实现方式的性能差异可能高达几百倍。本文整理 JavaScript 数组去重的 20 种写法，按 5 个策略分类，充分利用JavaScript的弱类型和动态性，帮助你理解语言特性，同时掌握多种解决问题的的思路。AI时代，你需要知道代码背后的原理，这样才能更好地指导AI编程。

为什么性能差异这么大？

最简单的写法，新建一个数组，把不在结果里的添加进去。

javascript 复制代码 
function unique(arr) {
  const result = []
  for (const item of arr) {
    // 遍历原数组，逐个取出元素判断是否存在新数组，若新数组中不存在则添加
    if (!result.includes(item)) {
      result.push(item)
    }
  }
  return result
}

问题在于每次 includes 都要全量扫一遍 result，复杂度是 O(n²)。

优化思路：换一种判重方式

  • Set / Map O(1) 查询：new Set(arr)
  • 排序 O(n log n)：相同元素相邻后扫一遍
  • filter + 闭包：在函数式管道里携带"已见"状态
  • JSON 序列化：处理对象、嵌套数组等不可哈希元素
  • 递归：换种表达方式，本质仍是上面的思路

本文源码地址：github.com/microwind/a...

推荐方案

需求 代码 性能 保序
一行最简 [...new Set(arr)] O(n) ✓
函数式风格 arr.filter((x,i,a) => a.indexOf(x)===i) O(n²) ✓
函数式 + Set arr.filter(x => !seen.has(x) && seen.add(x)) O(n) ✓
要排序 [...new Set(arr)].sort((a,b)=>a-b) O(n log n) 排序
对象数组 JSON.stringify 作为 Set 的键 O(n×m) ✓

第1类：基础循环（方法1-6）

策略原理：不用任何内置数组方法，纯靠下标、嵌套循环、indexOf 这种"原始"手段完成去重。每一步判重都是 O(n)，整体 O(n²)。

适用场景：教学、面试手撕。生产代码不建议使用。

%%{init: {'flowchart': {'nodeSpacing': 30, 'rankSpacing': 25, 'padding': 8}}}%% graph LR A([原数组]) --> B[取下一个元素] B --> C{遍历结果数组
是否已存在?} C -->|否| D[push 追加] C -->|是| E[跳过] D --> F([继续]) E --> F F --> B classDef start fill:#2E8B57,color:#fff,stroke:#1e5c3a,stroke-width:2px classDef step fill:#3A86FF,color:#fff,stroke:#2b63c4,stroke-width:2px classDef check fill:#FFB703,color:#000,stroke:#cc8c00,stroke-width:2px class A,F start class B,D,E step class C check
javascript 复制代码 
// 方法1：双循环索引比较------i 与左侧每个 j 比对
function unique1(arr) {
  const result = []
  for (let i = 0, l = arr.length; i < l; i++) {
    for (let j = 0; j <= i; j++) {
      if (arr[i] === arr[j]) {
        // i === j 表示前面没有相同值，当前项是首次出现，追加到新数组中
        if (i === j) result.push(arr[i])
        // 只要遇到相同值，要么刚添加了，要么前面已添加，可跳出循环
        break
      }
    }
  }
  return result
}

// 方法2：新建数组 + includes 检查
function unique2(arr) {
  const result = []
  for (const item of arr) {
    // 不存在新数组就添加，利用includes判断
    if (!result.includes(item)) result.push(item)
  }
  return result
}

// 方法3：从后往前原地 splice
function unique3(arr) {
  let l = arr.length
  while (l-- > 0) {
    for (let i = 0; i < l; i++) {
      // 将当前项逐个与前面项比较，若遇到重复就删除当前项，原数组操作
      if (arr[l] === arr[i]) {
        arr.splice(l, 1)
        break
      }
    }
  }
  return arr
}

// 方法4：从前往后原地 splice（删后面相同项）
function unique4(arr) {
  let l = arr.length
  for (let i = 0; i < l; i++) {
    for (let j = i + 1; j < l; j++) {
      // 将当前项逐个与后面项比较，若遇到重复就删除重复项，原数组操作
      if (arr[i] === arr[j]) {
        arr.splice(j, 1)
        // 因为自前向后遍历，删除重复项后，需要将下标和总长度各自减1位
        j--; l--
      }
    }
  }
  return arr
}

// 方法5：forEach + indexOf
// indexOf 返回首次出现下标，等于当前下标即首次
function unique5(arr) {
  const result = []
  arr.forEach((item, i) => {
    // 与unique1思路一致，利用indexOf实现查找
    if (arr.indexOf(item) === i) result.push(item)
  })
  return result
}

// 方法6：双重 while 倒序 splice
// 与 unique3 同类：自尾向前，当前尾元素若在前段出现过则删掉该尾元素
function unique6(arr) {
  let l = arr.length
  while (l-- > 0) {
    let i = l
    while (i-- > 0) {
      // 与左侧某项相等说明重复，删掉当前下标 l 的元素后跳出内层
      if (arr[l] === arr[i]) {
        arr.splice(l, 1)
        break
      }
    }
  }
  return arr
}

第2类：内置数组方法（方法7-11）

策略原理：JavaScript 数组自带 filter、reduce、forEach 等高阶方法，可以把"判重 + 收集"写成函数式风格。注意indexOf / includes 仍是 O(n)，需要用 Set 闭包才能压到 O(n)。

适用场景：现代 JS 工程的常态写法。可读性高，链式组合方便。

%%{init: {'flowchart': {'nodeSpacing': 30, 'rankSpacing': 25, 'padding': 8}}}%% graph LR A([原数组]) --> B[filter / reduce 管道] B --> C{选择策略} C -->|indexOf 判重| D["O(n²) 但简洁"] C -->|Set 闭包判重| E["O(n) 推荐"] C -->|对象键| F["O(n) 但有类型陷阱"] D --> G([新数组]) E --> G F --> G classDef start fill:#2E8B57,color:#fff,stroke:#1e5c3a,stroke-width:2px classDef step fill:#0F3460,color:#fff,stroke:#0a2647,stroke-width:2px classDef check fill:#FFB703,color:#000,stroke:#cc8c00,stroke-width:2px class A,G start class B,D,E,F step class C check
javascript 复制代码 
// 方法7：filter + indexOf 一行经典
// 写法最短，但每次 indexOf 都是 O(n)
function unique7(arr) {
  // indexOf 得首次下标，与当前 i 相同才保留，否则是后面出现的重复项
  return arr.filter((item, i) => arr.indexOf(item) === i)
}

// 方法8：filter + Set 闭包------推荐写法
// Set.add 返回 Set 自身，结合短路 && 返回布尔值
function unique8(arr) {
  const seen = new Set()
  // 未见过才执行 add；add 恒为真值，整体表达式作 filter 谓词
  return arr.filter(item => !seen.has(item) && seen.add(item))
}

// 方法9：reduce 累加（用数组）
// 函数式风格，但 includes 仍是 O(n²)
function unique9(arr) {
  return arr.reduce((acc, item) => {
    // 与 unique2 同思路，只是用 reduce 折叠出结果数组
    if (!acc.includes(item)) acc.push(item)
    return acc
  }, [])
}

// 方法10：reduce + Set 闭包------O(n) 函数式
function unique10(arr) {
  const seen = new Set()
  return arr.reduce((acc, item) => {
    // Set 判重 O(1)，首次出现才同步记入 acc
    if (!seen.has(item)) {
      seen.add(item)
      acc.push(item)
    }
    return acc
  }, [])
}

// 方法11：Object + typeof 键
// 用 typeof + value 拼成字符串作为对象键，避免 1 与 '1' 冲突
function unique11(arr) {
  const obj = {}
  return arr.filter(item => {
    const key = typeof item + item
    // hasOwnProperty 防原型链上同名属性；赋值表达式求值为 true，表示首次保留
    return Object.prototype.hasOwnProperty.call(obj, key)
      ? false
      : (obj[key] = true)
  })
}

第3类：集合容器（方法12-14）

策略原理：ES6 引入的 Set 与 Map 用 SameValueZero 算法判等，键唯一且 O(1)，是 JS 里最自然的去重工具。Object 字面量虽然也能当哈希用，但有"键自动字符串化""数字键被引擎重排"等坑。

适用场景：日常项目首选 Set；需要保留 value 选 Map；只在小数据或特殊兼容场景才用 Object。

%%{init: {'flowchart': {'nodeSpacing': 30, 'rankSpacing': 25, 'padding': 8}}}%% graph LR A([原数组]) --> B{选择容器} B -->|Set| C[键唯一
保持插入顺序] B -->|Map| D[键唯一
值可携带额外信息] B -->|Object| E[键自动字符串化
有重排陷阱] C --> F([转回数组]) D --> F E --> F classDef start fill:#2E8B57,color:#fff,stroke:#1e5c3a,stroke-width:2px classDef step fill:#8338EC,color:#fff,stroke:#5e27a8,stroke-width:2px classDef check fill:#FFB703,color:#000,stroke:#cc8c00,stroke-width:2px class A,F start class C,D,E step class B check
javascript 复制代码 
// 方法12：new Set 转数组------一行经典
// Set 用 SameValueZero 比较，NaN 也能正确去重
function unique12(arr) {
  // 展开成数组，迭代顺序与元素首次插入 Set 的顺序一致（保序）
  return [...new Set(arr)]
}

// 方法13：Map.set + keys
// 适合"按键去重，值携带其他信息"的场景
function unique13(arr) {
  const map = new Map()
  // 键重复时覆盖值，keys 迭代顺序仍为各键首次插入顺序
  arr.forEach(item => map.set(item, item))
  return [...map.keys()]
}

// 方法14：Object 字面量哈希
// 注意：1 与 '1' 会被合并；数字键会被引擎按升序重排
// [1, 'a', 2, 'b', -1] 会变成 [1, 2, 'a', 'b', -1]
function unique14(arr) {
  const obj = {}
  // 属性名会转成字符串，对象等引用类型键易撞成 '[object Object]'
  for (const item of arr) obj[item] = item
  return Object.values(obj)
}

小心 Object 的两个坑 ：① 数字字符串键会被 V8/SpiderMonkey 重排到前面（升序）；② 引用类型（对象、数组）会变成 [object Object] 之类的字符串，全部合并成一个键。生产代码不要用 Object 当 Set。

第4类：排序后去重（方法15-17）

策略原理：先 sort 让相同元素相邻，再扫一遍删除相邻相同项。复杂度由排序决定，O(n log n)。优点是不需要额外的哈希结构，"相邻判等"是最便宜的判重方式；缺点是会破坏原顺序。

适用场景：输出本就需要排序、不在意原顺序。

%%{init: {'flowchart': {'nodeSpacing': 30, 'rankSpacing': 25, 'padding': 8}}}%% graph LR A([原数组]) --> B[sort
相同元素相邻] B --> C{相邻是否相同?} C -->|是| D[splice/skip] C -->|否| E[保留] D --> F([结果]) E --> F classDef start fill:#2E8B57,color:#fff,stroke:#1e5c3a,stroke-width:2px classDef step fill:#FF6B6B,color:#fff,stroke:#cc4444,stroke-width:2px classDef check fill:#FFB703,color:#000,stroke:#cc8c00,stroke-width:2px class A,F start class B,D,E step class C check
javascript 复制代码 
// 方法15：sort + splice 升序去重
// 注意 sort 不传比较函数会按字符串排序，数字数组要传 (a, b) => a - b
function unique15(arr) {
  arr.sort((a, b) => a - b)
  let l = arr.length
  while (l-- > 1) {
    // 排序后相等必相邻，删后一重复项；从后往前 splice 不影响已扫下标
    if (arr[l] === arr[l - 1]) arr.splice(l, 1)
  }
  return arr
}

// 方法16：sort + filter 相邻判重
function unique16(arr) {
  arr.sort((a, b) => a - b)
  // 首元素必留；之后仅当与前一项不同才保留，即每段相同值只留第一个
  return arr.filter((item, i) => i === 0 || item !== arr[i - 1])
}

// 方法17：经典双指针（LeetCode 26）
// 排序后原地双指针，O(1) 额外空间
function unique17(arr) {
  if (arr.length === 0) return arr
  arr.sort((a, b) => a - b)
  let slow = 0
  for (let fast = 1; fast < arr.length; fast++) {
    // fast 遇到新值则扩展「唯一前缀」，写入 slow+1 位置
    if (arr[fast] !== arr[slow]) arr[++slow] = arr[fast]
  }
  // 前缀长度为 slow+1，截掉尾部重复占位
  return arr.slice(0, slow + 1)
}

第5类：递归与特殊（方法18-20）

策略原理：递归用自调用替代循环，是函数式思维的体现，主要用于教学。JSON.stringify 把对象映射为字符串，是 JS 里处理"不可哈希元素"（对象数组、嵌套数组）的常见招数。

适用场景：递归------教学；JSON------对象数组按整体结构去重。

%%{init: {'flowchart': {'nodeSpacing': 30, 'rankSpacing': 25, 'padding': 8}}}%% graph LR A([数组 length=n]) --> B{length <= 1?} B -->|是| C([返回]) B -->|否| D[检查末尾元素
是否在前面出现] D --> E{重复?} E -->|是| F[丢弃末尾] E -->|否| G[保留末尾] F --> H[递归 length-1] G --> H H --> A classDef start fill:#2E8B57,color:#fff,stroke:#1e5c3a,stroke-width:2px classDef step fill:#118AB2,color:#fff,stroke:#0b5f7a,stroke-width:2px classDef check fill:#FFB703,color:#000,stroke:#cc8c00,stroke-width:2px class A,C start class D,F,G,H step class B,E check
javascript 复制代码 
// 方法18：递归原地删除
// 先看当前「末尾」是否在前缀中出现过，重复则 splice 掉末尾
function unique18(arr, length) {
  if (length <= 1) return arr
  const last = length - 1
  for (let i = last - 1; i >= 0; i--) {
    // 与前段某项相同则末尾是重复，删掉后不再比较
    if (arr[last] === arr[i]) {
      arr.splice(last, 1)
      break
    }
  }
  // 本层已处理原末尾，子问题规模减一（与是否 splice 无关）
  return unique18(arr, length - 1)
}

// 方法19：递归拼接返回（不修改原数组）
// 每层只决定「当前末尾项」是否并入结果，前缀由递归算好
function unique19(arr, length) {
  if (length <= 1) return arr.slice(0, length)
  const last = length - 1
  const lastItem = arr[last]
  let isRepeat = false
  for (let i = last - 1; i >= 0; i--) {
    // 末尾值在前段出现过则本层不追加
    if (lastItem === arr[i]) {
      isRepeat = true
      break
    }
  }
  const head = unique19(arr, length - 1)
  // 非重复才把当前末尾接到前缀结果后面
  return isRepeat ? head : head.concat(lastItem)
}

// 方法20：JSON 字符串判重------处理对象数组
// 把对象序列化成字符串作为 Set 的键，能去重 {id:1} 这类结构
function unique20(arr) {
  const seen = new Set()
  const result = []
  for (const item of arr) {
    // 结构一致则键一致（字段顺序不同会得到不同键）
    const key = JSON.stringify(item)
    if (!seen.has(key)) {
      seen.add(key)
      result.push(item)
    }
  }
  return result
}

// 用法示例：
// unique20([{id: 1}, {id: 2}, {id: 1}])
// => [{id: 1}, {id: 2}]

JSON 的两个限制 ：① 字段顺序不同的对象会被认为不同（{a:1,b:2} ≠ {b:2,a:1}）；② undefined、函数、循环引用会丢失或抛错。

选择指南

%%{init: {'flowchart': {'nodeSpacing': 25, 'rankSpacing': 15, 'padding': 5}}}%% graph TD Start(["数组去重"]) --> Need{"是否需要保序？"} Need -->|不需要| Fast["看数据特征"] Need -->|需要| Ordered["保留原顺序"] Fast --> Q1{"数据形态"} Q1 -->|顺便要排序| Sort["sort + Set"] Q1 -->|纯基本类型| Set1["[...new Set(arr)]"] Ordered --> Q2{"侧重点"} Q2 -->|代码简洁| Set2["[...new Set(arr)]
一行解决"] Q2 -->|函数式| FilterSet["filter + Set 闭包"] Q2 -->|按字段去重| MapByKey["Map + keyFn"] Q2 -->|对象数组| JSON["JSON.stringify + Set"] classDef start fill:#2E8B57,color:#fff,stroke:#1e5c3a classDef decision fill:#FE8B57,color:#fff,stroke:#141b2d classDef fast fill:#3A86FF,color:#fff,stroke:#2b63c4 classDef ordered fill:#8338EC,color:#fff,stroke:#5e27a8 classDef method fill:#0f3460,color:#fff,stroke:#0a2647 class Start start class Need,Q1,Q2 decision class Fast fast class Ordered ordered class Sort,Set1,Set2,FilterSet,MapByKey,JSON method
类别 时间复杂度 是否保序 主要场景
基础循环 O(n²) 是 教学、面试手撕
内置数组方法 O(n) ~ O(n²) 是 函数式风格
集合容器 O(n) 看具体类 日常项目首选
排序后去重 O(n log n) 否 顺便要排序
递归 / JSON 视实现 看实现 教学 / 对象数组

实际项目里怎么选

绝大多数情况一行就够：

javascript 复制代码 
// 保序、O(n)、写法最短，工程首选
const result = [...new Set(arr)]

// 或函数式风格，O(n)
const seen = new Set()
const result = arr.filter(x => !seen.has(x) && seen.add(x))

按业务字段去重：

javascript 复制代码 
const result = [...new Map(arr.map(x => [x.id, x])).values()]

对象数组去重：

javascript 复制代码 
const seen = new Set()
const result = arr.filter(x => {
  const key = JSON.stringify(x)
  return !seen.has(key) && seen.add(key)
})

需要排序：

javascript 复制代码 
const result = [...new Set(arr)].sort((a, b) => a - b)

带业务逻辑的去重

实际工作里经常遇到这样的情况：遇到重复时不能简单丢弃，要按某个规则做处理。比如：

  • 按 id 去重，但要保留分数最高的那条记录
  • 去重的同时累加重复次数
  • 数值在某个区间内才参与去重

这类需求 Set 直接搞不定，需要把"判重"和"处理"两步拆开来写。JS 里通常用 Map + 合并函数：

javascript 复制代码 
/**
 * 带业务规则的去重。
 *
 * @param {Array} data 原数据
 * @param {Function} keyFn 从元素提取去重键
 * @param {Function} onDup 遇到重复时如何合并 (旧值, 新值) -> 新代表值
 */
function uniqueBy(data, keyFn, onDup) {
  // Map 保证遍历顺序与首次出现顺序一致
  const chosen = new Map()
  for (const item of data) {
    const key = keyFn(item)
    if (!chosen.has(key)) {
      chosen.set(key, item)
    } else if (onDup) {
      chosen.set(key, onDup(chosen.get(key), item))
    }
  }
  return [...chosen.values()]
}

例 1：按 id 去重，保留分数最高的：

javascript 复制代码 
const students = [
  { id: 1, name: '张三', score: 90 },
  { id: 1, name: '张三', score: 95 },   // 同 id，分数更高
  { id: 2, name: '李四', score: 85 },
]

const result = uniqueBy(
  students,
  x => x.id,
  (old, news) => news.score > old.score ? news : old,
)
// [{id:1, score:95, ...}, {id:2, score:85, ...}]

例 2：去重同时统计频次：

javascript 复制代码 
const counts = new Map()
for (const item of data) {
  counts.set(item, (counts.get(item) || 0) + 1)
}
// counts.keys() 是保序的去重结果
// [...counts.entries()] 是 [[元素, 次数], ...]

例 3：区间过滤------只对 [0, 100] 区间内的值去重，区间外原样保留：

javascript 复制代码 
const seen = new Set()
const result = []
for (const x of data) {
  if (x >= 0 && x <= 100) {
    if (seen.has(x)) continue
    seen.add(x)
  }
  result.push(x)
}

这三个例子是同一种思路：把判重与业务规则分开。判重用 Set/Map 保证 O(n)，规则部分留给回调或显式分支处理。

对象数组去重的几种写法

JS 里 === 比较对象比较的是引用，而不是内容，所以 new Set([{id:1}, {id:1}]) 不会去重------两个独立的对象引用不相等。

实际项目里有三种常见写法：

写法 1：按字段去重（最常见）

javascript 复制代码 
// 用 Map 按 id 去重
const result = [...new Map(arr.map(x => [x.id, x])).values()]

写法 2：按多字段组合去重

javascript 复制代码 
// 拼成复合键
const result = [...new Map(arr.map(x => [`${x.id}|${x.type}`, x])).values()]

写法 3：按整体结构去重（用 JSON）

javascript 复制代码 
const seen = new Set()
const result = arr.filter(x => {
  const key = JSON.stringify(x)
  return !seen.has(key) && seen.add(key)
})
// 注意：字段顺序不同的对象会被认为不同

总结

工程应用选择：

  • 默认用 [...new Set(arr)]：保序、一行、O(n)
  • 函数式风格用 arr.filter(x => !seen.has(x) && seen.add(x))
  • 按字段去重用 [...new Map(arr.map(x => [x.key, x])).values()]
  • 对象整体去重用 JSON.stringify 作为键
  • 顺便排序用 [...new Set(arr)].sort((a, b) => a - b)
  • 业务规则干预用 Map + 合并函数

核心思路：

  1. 同一个问题可以从多个角度切入
  2. 选对数据结构往往比写更聪明的代码更重要
  3. O(n²) 与 O(n) 在数据变大时是几百倍的实际差距
  4. 不要过度优化------能用 new Set 就别绕弯
  5. 遇到新问题先写最直观的版本，再按瓶颈逐步优化

更多算法

不同语言算法实现：github.com/microwind/a...

AI编程知识库：microwind.github.io

相关推荐
洛水水1 小时前
【力扣100题】46.单词拆分
算法·leetcode·职场和发展
小江的记录本1 小时前
【AI大模型选型指南】《2026年5月（最新版）国内外主流AI大模型选型指南》（个人版）
前端·人工智能·后端·ai·aigc·ai编程·ai写作
@PHARAOH2 小时前
HOW - 前端输入场景支持拼音匹配
前端
MicroTech20252 小时前
量子安全赋能协同智能，微算法科技（NASDAQ ：MLGO）研发PQS-BFL后量子区块链联邦学习框架
科技·算法·安全
计算机安禾2 小时前
【c++面向对象编程】第21篇：运算符重载基础：语法、规则与不可重载的运算符
java·前端·c++
平行侠2 小时前
A19 工业设备故障决策树智能诊断系统
算法·决策树·机器学习
__log2 小时前
Vue 3 核心技术深度解析：从“会用API“到“懂原理、能表达“
前端·javascript·vue.js
铮铭2 小时前
【论文阅读】世界模型发展脉络整理---Understanding World or Predicting Future? A Comprehensive Survey of World Models
论文阅读·人工智能·算法·机器人
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03【AI】2026 年具身智能模型和世界模型总结04CC-Switch & Claude 基于 Linux 服务器安装使用指南05人工智能最新动态 AI 日报 · 2026年5月10日06AI科技热点日报 | 2026年5月11日07Gemini大升级、AI眼镜首发、Android XR亮相，13天后见分晓08零基础教你claude code 接入 deepseek V409codex app每次打开重连5次Reconnecting问题解决10Cursor 接入 DeepSeek‑V4‑Pro 完整指南（2026 实测）