javascript數組去重如何實現

# JavaScript數組去重如何實現

在JavaScript開發中，數組去重是一個常見需求。本文將深入探討12種不同的實現方案，分析它們的優缺點，并給出實際應用場景建議。

## 一、基礎方案（適合新手）

### 1. 雙重for循環去重

最基礎的實現方式，適合理解去重原理：

```javascript
function unique(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        arr.splice(j, 1)
        j-- // 刪除元素后需要調整索引
      }
    }
  }
  return arr
}

時間復雜度：O(n2)
缺點：性能較差，無法處理NaN和對象類型

2. indexOf方法去重

function unique(arr) {
  const result = []
  for (let i = 0; i < arr.length; i++) {
    if (result.indexOf(arr[i]) === -1) {
      result.push(arr[i])
    }
  }
  return result
}

優化點：比雙重循環稍好
局限：仍無法識別NaN（因為NaN !== NaN）

二、ES5經典方案

3. filter + indexOf組合

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

特點：代碼簡潔
問題：同樣存在NaN處理問題

4. 利用對象屬性唯一性

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

優點：可以區分不同類型（如’1’和1）
注意：對象和數組會被轉換為[object Object]

三、ES6+現代化方案

5. Set數據結構（最簡方案）

const unique = arr => [...new Set(arr)]

優點：代碼極簡，性能優秀
缺點：無法特殊處理對象類型

6. Map數據結構實現

function unique(arr) {
  const map = new Map()
  return arr.filter(item => {
    return !map.has(item) && map.set(item, true)
  })
}

優勢：保持元素插入順序

7. reduce實現

const unique = arr => 
  arr.reduce((prev, cur) => 
    prev.includes(cur) ? prev : [...prev, cur], [])

特點：函數式編程風格

四、特殊數據類型處理

8. 處理NaN的增強版

function unique(arr) {
  const seen = new Map()
  return arr.filter(item => {
    if (isNaN(item) && typeof item === 'number') {
      return seen.has('NaN') ? false : seen.set('NaN', true)
    }
    return !seen.has(item) && seen.set(item, true)
  })
}

9. 對象數組去重

function uniqueByKey(arr, key) {
  const cache = new Map()
  return arr.filter(item => {
    const id = item[key]
    return !cache.has(id) && cache.set(id, true)
  })
}

// 使用示例
uniqueByKey([{id:1}, {id:2}, {id:1}], 'id')

五、性能對比測試

通過測試包含10萬個元素的數組：

六、實際應用建議

1. 簡單場景：優先使用Set方案

   const uniqueArray = [...new Set(originalArray)]
   

2. 需要處理復雜對象：

   function deepUnique(arr) {
    const seen = new WeakMap()
    return arr.filter(item => {
      if (typeof item === 'object' && item !== null) {
        const key = JSON.stringify(item)
        return !seen.has(key) && seen.set(key, true)
      }
      return !seen.has(item) && seen.set(item, true)
    })
   }
   

3. 大數據量優先考慮時間復雜度：

   • 使用Map/Set方案（O(n)）
   • 避免使用indexOf/includes（O(n2)）

七、延伸思考

1. 排序后去重

對已排序數組可以使用更高效的算法：

function uniqueSorted(arr) {
  return arr.filter((item, index) => 
    index === 0 || item !== arr[index - 1]
  )
}

2. 多維數組去重

function flattenUnique(arr) {
  return [...new Set(arr.flat(Infinity))]
}

八、注意事項

1. 相等性判斷：

   • === 嚴格相等
   • 對象比較的是引用地址
   • 注意null和undefined的處理

2. 原型鏈污染：

   // 不推薦的寫法
   function unsafeUnique(arr) {
    const obj = {}
    return arr.filter(item => 
      obj.hasOwnProperty(item) ? false : (obj[item] = true)
    )
   }
   // 如果數組包含__proto__可能造成問題
   

九、TypeScript實現

帶類型聲明的去重函數：

function unique<T>(arr: T[]): T[] {
  return [...new Set(arr)]
}

// 對象數組去重（帶類型）
function uniqueByKey<T>(arr: T[], key: keyof T): T[] {
  const cache = new Map<any, boolean>()
  return arr.filter(item => {
    const id = item[key]
    return !cache.has(id) && cache.set(id, true)
  })
}

十、總結

JavaScript數組去重至少有12種實現方式，最佳選擇取決于： 1. 運行環境（是否需要支持舊瀏覽器） 2. 數據規模 3. 特殊數據類型需求 4. 性能要求

現代項目中，優先考慮ES6的Set/Map方案，在需要處理復雜對象時選擇增強版本。理解每種方案的底層原理比記住實現更重要。 “`

注：本文實際約1800字，完整版可通過擴展每個方案的代碼示例和性能分析圖表達到2000字以上。建議根據實際需要調整技術細節的深度。