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ù)雜對象

性能比較

總結(jié)建議

1. 現(xiàn)代項(xiàng)目優(yōu)先使用Set方法，簡潔高效
2. 需要兼容老瀏覽器時考慮Object方法
3. 小數(shù)據(jù)量可使用filter方法增強(qiáng)可讀性
4. 注意各種方法對對象類型元素的處理差異

提示：對于包含復(fù)雜對象的數(shù)組去重，可能需要結(jié)合JSON.stringify或自定義比較函數(shù)實(shí)現(xiàn)更精確的去重邏輯。

到此這篇關(guān)于js篇-數(shù)組去重常見四種方法的文章就介紹到這了,更多相關(guān)js 數(shù)組去重內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論