Skip to main content

如何在陣列中移除重複項目

假設你的原始陣列是這樣：

const originalArray = [1, 2, 2, 3, 4, 4, 5];

我們要將它轉換成沒有重複元素的陣列，例如 [1, 2, 3, 4, 5]。

方法一：使用 Set（推薦，最簡單且高效）​

Set 是 ES6 引入的資料結構，它會自動忽略重複的值。我們可以將陣列轉換成 Set，再轉回陣列。這是最短的程式碼，時間複雜度是 O(n)，很適合大陣列。

步驟：

  1. 先宣告你的原始陣列，例如 const originalArray = [1, 2, 2, 3, 4, 4, 5];。

  2. 使用 new Set(originalArray) 來建立一個 Set 物件，它會自動移除重複。

  3. 因為 Set 不是陣列，我們需要用展開運算子（spread operator ...）將它轉回陣列：[...new Set(originalArray)]。

  4. 將結果存到一個新變數中，例如 const uniqueArray = [...new Set(originalArray)];。

  5. 最後，你可以用 console.log(uniqueArray); 來檢查結果。

完整程式碼範例：

// 步驟 1: 宣告原始陣列
const originalArray = [1, 2, 2, 3, 4, 4, 5];

// 步驟 2: 移除重複元素，使用 Set
const uniqueArray = [...new Set(originalArray)];

// 步驟 3: 印出結果來驗證
console.log('原始陣列：', originalArray);  // 輸出: [1, 2, 2, 3, 4, 4, 5]
console.log('移除重複後：', uniqueArray);  // 輸出: [1, 2, 3, 4, 5]

注意事項：

  • 這個方法會保持原始陣列的順序（除了最後一個重複的值會被保留）。

  • 如果你的陣列包含物件（如 { id: 1 }），Set 會根據物件的參照來判斷重複，不是內容，所以對物件陣列不適合（之後我會提到替代方案）。

  • 在瀏覽器控制台或你的前端專案中，直接複製這段程式碼就能跑。

方法二：使用 filter 和 indexOf（傳統方法，適合舊瀏覽器）​

如果你不能用 ES6（雖然現在很少見），可以用 filter 方法過濾陣列，只保留第一次出現的元素。這是純陣列操作，不需要 Set。

步驟：

  1. 宣告原始陣列，同上。

  2. 使用 originalArray.filter() 來過濾，每個元素檢查它在陣列中的第一次出現位置。

  3. 在 filter 的回調函式中，用 indexOf 找出該元素第一次出現的索引，如果當前索引等於第一次索引，就保留它。

  4. 將結果存到新變數。

  5. 用 console.log 檢查。

完整程式碼範例：

// 步驟 1: 宣告原始陣列
const originalArray = [1, 2, 2, 3, 4, 4, 5];

// 步驟 2: 移除重複元素，使用 filter 和 indexOf
const uniqueArray = originalArray.filter((element, index) => {
    // 檢查當前元素在陣列中的第一次出現位置
    // 如果當前索引等於第一次索引，代表這是第一次出現，就保留
    return originalArray.indexOf(element) === index;
});

// 步驟 3: 印出結果來驗證
console.log('原始陣列：', originalArray);  // 輸出: [1, 2, 2, 3, 4, 4, 5]
console.log('移除重複後：', uniqueArray);  // 輸出: [1, 2, 3, 4, 5]

注意事項：

  • 時間複雜度是 O(n²)，因為 indexOf 每次都要從頭掃描陣列，所以對超大陣列（上萬筆）會比較慢。

  • 它也會保持順序。

  • 對字串或數字陣列很適合，但對物件陣列，同樣需要自訂比較邏輯。

如果陣列是物件陣列怎麼辦？​

如果你的陣列是像這樣的重複物件：

const originalArray = [
    { id: 1, name: 'A' },
    { id: 2, name: 'B' },
    { id: 1, name: 'A' }  // 重複
];

Set 會視為不同，因為物件參照不同。你可以用 reduce 和 Map 來根據特定屬性（如 id）移除重複。

完整程式碼範例（根據 id 移除重複）：

// 步驟 1: 宣告原始物件陣列
const originalArray = [
    { id: 1, name: 'A' },
    { id: 2, name: 'B' },
    { id: 1, name: 'A' }  // 這會被移除
];

// 步驟 2: 使用 reduce 和 Map 移除重複（以 id 為鍵）
const uniqueArray = originalArray.reduce((acc, current) => {
    // 如果 Map 中還沒有這個 id，就加入
    if (!acc.has(current.id)) {
        acc.set(current.id, current);
    }
    return acc;
}, new Map()).values();  // 轉成陣列

const uniqueArrayAsArray = Array.from(uniqueArray);

// 步驟 3: 印出結果
console.log('原始陣列：', originalArray);
console.log('移除重複後：', uniqueArrayAsArray);  // 輸出: [{ id: 1, name: 'A' }, { id: 2, name: 'B' }]

步驟解釋：

  • reduce 從左到右累積結果，我們用 Map 當作累積器，鍵是 id，值是物件。

  • 如果 id 已存在，就忽略；否則加入。

  • 最後用 Array.from(map.values()) 轉回陣列。