快捷導(dǎo)航

JavaScript數(shù)組去重常見四種方法(最新整理)

更新時間：2025年07月09日 11:57:07 作者：Codellllll

數(shù)組去重是JavaScript開發(fā)中常見的需求,本文將詳細(xì)解析四種常用的數(shù)組去重方法及其優(yōu)缺點(diǎn),感興趣的朋友一起看看吧

JavaScript數(shù)組去重的四種方法解析

數(shù)組去重是JavaScript開發(fā)中常見的需求，本文將詳細(xì)解析四種常用的數(shù)組去重方法及其優(yōu)缺點(diǎn)。

方法1: 使用Set數(shù)據(jù)結(jié)構(gòu)

function deduplicateWithSet(arr) {
  return [...new Set(arr)];
}

原理：

ES6的Set數(shù)據(jù)結(jié)構(gòu)天生具有元素唯一性特性
通過展開運(yùn)算符...將Set轉(zhuǎn)換回數(shù)組

優(yōu)點(diǎn)：

代碼簡潔，一行搞定
性能最佳（O(n)時間復(fù)雜度）

缺點(diǎn)：

無法區(qū)分對象引用（兩個內(nèi)容相同的對象會被視為不同元素）
需要ES6支持

方法2: 使用filter和indexOf

function deduplicateWithFilter(arr) {
  return arr.filter((item, index) => arr.indexOf(item) === index);
}

原理：

indexOf返回元素第一次出現(xiàn)的索引
只保留索引匹配的元素

優(yōu)點(diǎn)：

代碼可讀性好
不改變原始數(shù)組

缺點(diǎn)：

時間復(fù)雜度O(n²)，大數(shù)據(jù)量性能較差
同樣無法處理對象類型元素

方法3: 使用reduce方法

function deduplicateWithReduce(arr) {
  return arr.reduce((unique, item) => {
    return unique.includes(item) ? unique : [...unique, item];
  }, []);
}

原理：

使用reduce累積唯一值
通過includes檢查是否已存在

優(yōu)點(diǎn)：

函數(shù)式編程風(fēng)格
邏輯清晰

缺點(diǎn)：

每次迭代都創(chuàng)建新數(shù)組（使用...展開）
時間復(fù)雜度O(n²)

方法4: 使用對象屬性

function deduplicateWithObject(arr) {
  const obj = {};
  return arr.filter(item => {
    return obj.hasOwnProperty(item) ? false : (obj[item] = true);
  });
}

原理：

利用對象屬性不可重復(fù)的特性
通過hasOwnProperty檢查存在性

優(yōu)點(diǎn)：

時間復(fù)雜度O(n)
兼容性好

缺點(diǎn)：

所有元素會被轉(zhuǎn)為字符串（如數(shù)字1和字符串"1"會被視為相同）
無法處理復(fù)雜對象

性能比較

方法	時間復(fù)雜度	適用場景
Set	O(n)	ES6環(huán)境，簡單數(shù)據(jù)類型
filter	O(n²)	小數(shù)據(jù)量，兼容性要求
reduce	O(n²)	函數(shù)式編程偏好
Object	O(n)	兼容性要求高