在JavaScript中，去除數(shù)組中重復(fù)元素的需求十分常見，下面詳細(xì)介紹并演示七種不同的去重方法，每種方法都會附帶必要的代碼注釋。

1. 使用ES6的Set結(jié)構(gòu)

Set是一種集合數(shù)據(jù)結(jié)構(gòu)，它不允許有重復(fù)的元素。通過擴(kuò)展運算符...可以輕松地將Set轉(zhuǎn)換回數(shù)組，從而達(dá)到去重的目的。

// 原始數(shù)組
const arr = [1, 9, 8, 8, 7, 2, 5, 3, 3, 3, 2, 3, 1, 4, 5, 444, 55, 22];

// 定義去重函數(shù)
function removeDuplicatesWithSet(arr) {
    // 創(chuàng)建一個Set，自動去除重復(fù)元素
    const uniqueSet = new Set(arr);
    // 使用擴(kuò)展運算符將Set轉(zhuǎn)換為數(shù)組
    const uniqueArray = [...uniqueSet];
    return uniqueArray;
}

// 調(diào)用函數(shù)并打印結(jié)果
const result = removeDuplicatesWithSet(arr);
console.log(result);

2. 使用filter()方法

filter()方法會創(chuàng)建一個新數(shù)組，其結(jié)果是通過提供的函數(shù)實現(xiàn)數(shù)組中的每個元素的篩選。

const arr = ['apple', 'apps', 'pear', 'apple', 'orange', 'apps'];

function removeDuplicatesWithFilter(arr) {
    // 使用filter方法，只有當(dāng)元素的索引和元素首次出現(xiàn)的位置相同時，才保留該元素
    return arr.filter((item, index) => arr.indexOf(item) === index);
}

const result = removeDuplicatesWithFilter(arr);
console.log(result);

3. 使用for循環(huán)和indexOf()

這種方法遍歷數(shù)組，使用indexOf()檢查元素是否已經(jīng)存在于結(jié)果數(shù)組中。

const arr = [1, 9, 8, 8, 7, 2, 5, 3, 3, 3, 2, 3, 1, 4, 5, 444, 55, 22];

function removeDuplicatesWithFor(arr) {
    const uniqueArray = []; // 初始化一個空數(shù)組用于存放唯一元素
    for (let i = 0; i < arr.length; i++) {
        // 如果元素尚未在uniqueArray中出現(xiàn)，則添加之
        if (uniqueArray.indexOf(arr[i]) === -1) {
            uniqueArray.push(arr[i]);
        }
    }
    return uniqueArray;
}

const result = removeDuplicatesWithFor(arr);
console.log(result);

4. 雙重for循環(huán)去重

盡管這種方法可以工作，但它效率低下，不推薦使用，尤其是對于大型數(shù)組。

const arr = [1, 9, 8, 8, 7, 2, 5, 3, 3, 3, 2, 3, 1, 4, 5, 444, 55, 22];

function removeDuplicatesWithDoubleFor(arr) {
    for (let i = 0; i < arr.length; i++) {
        for (let j = i + 1; j < arr.length; j++) {
            // 當(dāng)找到重復(fù)元素時，從數(shù)組中移除它
            if (arr[i] === arr[j]) {
                arr.splice(j, 1);
                j--; // 由于splice改變了數(shù)組長度，所以需要減一以保持正確的索引
            }
        }
    }
    return arr;
}

const result = removeDuplicatesWithDoubleFor(arr);
console.log(result);

5. 使用indexOf()與新數(shù)組

這種方法檢查元素在原始數(shù)組中的首次出現(xiàn)位置，如果該位置與當(dāng)前索引匹配，則添加到新數(shù)組中。

const arr = [1, 9, 8, 8, 7, 2, 5, 3, 3, 3, 2, 3, 1, 4, 5, 444, 55, 22];

function removeDuplicatesWithIndexOf(arr) {
    const uniqueArray = [];
    for (let i = 0; i < arr.length; i++) {
        // 只有當(dāng)元素首次出現(xiàn)時才添加到uniqueArray中
        if (arr.indexOf(arr[i]) === i) {
            uniqueArray.push(arr[i]);
        }
    }
    return uniqueArray;
}

const result = removeDuplicatesWithIndexOf(arr);
console.log(result);

6. 使用includes()方法

includes()方法檢查數(shù)組中是否存在指定的值，如果存在則返回true，否則返回false。

const arr = [1, 9, 8, 8, 7, 2, 5, 3, 3, 3, 2, 3, 1, 4, 5, 444, 55, 22];

function removeDuplicatesWithIncludes(arr) {
    const uniqueArray = [];
    for (let i = 0; i < arr.length; i++) {
        // 如果uniqueArray中不包含當(dāng)前元素，則添加之
        if (!uniqueArray.includes(arr[i])) {
            uniqueArray.push(arr[i]);
        }
    }
    return uniqueArray;
}

const result = removeDuplicatesWithIncludes(arr);
console.log(result);

7. 使用reduce()方法

reduce()方法對數(shù)組中的每個元素執(zhí)行一個由您提供的reducer函數(shù)，將其結(jié)果匯總為單個返回值。

const arr = [1, 9, 8, 8, 7, 2, 5, 3, 3, 3, 2, 3, 1, 4, 5, 444, 55, 22];

function removeDuplicatesWithReduce(arr) {
    // reducer函數(shù)，檢查acc（累加器）中是否已經(jīng)包含當(dāng)前元素，如果沒有，則添加
    return arr.reduce((acc, curr) => {
        if (!acc.includes(curr)) {
            acc.push(curr);
        }
        return acc;
    }, []);
}

const result = removeDuplicatesWithReduce(arr);
console.log(result);

每種方法都有其適用場景和性能特點，選擇最適合的方法取決于具體的項目需求和環(huán)境。通常，使用ES6的Set或filter()方法是最佳選擇，因為它們既簡潔又高效。