【前端每天一题】第 16 题：数组去重高频方法（Set / filter / reduce / 对象键值法）

下面是 下一道高频前端面试题（详细版 + 速记卡片）

第 16 题：数组去重高频方法（Set / filter / reduce / 对象键值法）

这道题是前端面试中常考的基础题。

✅ 第 16 题：数组去重有哪些方法？如何实现？

📘 一、方法 1：Set（最简洁高频）

javascript 复制代码

const arr = [1,2,2,3,4,4]
const uniqueArr = [...new Set(arr)]
console.log(uniqueArr) // [1,2,3,4]

✅ 优点：

简单、语义清晰
支持基本类型
ES6 标准

⚠️ 注意：

对象类型（引用类型）不同引用不会去重

ini 复制代码

const arr = [{a:1},{a:1}]
[...new Set(arr)] // [{a:1},{a:1}]

📘 二、方法 2：filter + indexOf

javascript 复制代码

const arr = [1,2,2,3,4,4]
const uniqueArr = arr.filter((item, index, self) => self.indexOf(item) === index)
console.log(uniqueArr) // [1,2,3,4]

✅ 优点：

ES5 可用
清晰直观

⚠️ 性能较低，嵌套 indexOf 可能慢

📘 三、方法 3：reduce + includes

scss 复制代码

const arr = [1,2,2,3,4,4]
const uniqueArr = arr.reduce((acc, cur) => {
  if(!acc.includes(cur)) acc.push(cur)
  return acc
}, [])
console.log(uniqueArr) // [1,2,3,4]

✅ 优点：

可链式扩展
ES5+ 通用

⚠️ includes 性能稍慢，大数组慎用

📘 四、方法 4：对象键值法（适合基本类型）

javascript 复制代码

const arr = [1,2,2,3,4,4]
const obj = {}
const uniqueArr = arr.filter(item => {
  if(obj[item]) return false
  obj[item] = true
  return true
})
console.log(uniqueArr) // [1,2,3,4]

✅ 优点：

性能好
ES5 可用

⚠️ 只能处理字符串/数字等可做对象键的类型

对象、数组、NaN、0/-0 可能需要注意

📘 五、速记卡片（面试背诵版）

sql 复制代码

🎯 高频方法：
1️⃣ Set： [...new Set(arr)]  → 简单，现代 JS
2️⃣ filter + indexOf → ES5 可用
3️⃣ reduce + includes → 可扩展
4️⃣ 对象键值法 → 性能好，注意对象类型

下一题推荐：
第 17 题：JS 原型式继承 / ES6 class 继承对比 + 原理

是否继续出第 17 题？