你值得拥有的七个JavaScript 数组去重方法

在JavaScript中，去除数组中重复元素的需求十分常见，下面详细介绍并演示七种不同的去重方法，每种方法都会附带必要的代码注释。

1. 使用ES6的Set结构

Set是一种集合数据结构，它不允许有重复的元素。通过扩展运算符...可以轻松地将Set转换回数组，从而达到去重的目的。

// 原始数组
const arr = [1, 9, 8, 8, 7, 2, 5, 3, 3, 3, 2, 3, 1, 4, 5, 444, 55, 22];

// 定义去重函数
function removeDuplicatesWithSet(arr) {
    // 创建一个Set，自动去除重复元素
    const uniqueSet = new Set(arr);
    // 使用扩展运算符将Set转换为数组
    const uniqueArray = [...uniqueSet];
    return uniqueArray;
}

// 调用函数并打印结果
const result = removeDuplicatesWithSet(arr);
console.log(result);

2. 使用filter()方法

filter()方法会创建一个新数组，其结果是通过提供的函数实现数组中的每个元素的筛选。

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

function removeDuplicatesWithFilter(arr) {
    // 使用filter方法，只有当元素的索引和元素首次出现的位置相同时，才保留该元素
    return arr.filter((item, index) => arr.indexOf(item) === index);
}

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

3. 使用for循环和indexOf()

这种方法遍历数组，使用indexOf()检查元素是否已经存在于结果数组中。

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 = []; // 初始化一个空数组用于存放唯一元素
    for (let i = 0; i < arr.length; i++) {
        // 如果元素尚未在uniqueArray中出现，则添加之
        if (uniqueArray.indexOf(arr[i]) === -1) {
            uniqueArray.push(arr[i]);
        }
    }
    return uniqueArray;
}

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

4. 双重for循环去重

尽管这种方法可以工作，但它效率低下，不推荐使用，尤其是对于大型数组。

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++) {
            // 当找到重复元素时，从数组中移除它
            if (arr[i] === arr[j]) {
                arr.splice(j, 1);
                j--; // 由于splice改变了数组长度，所以需要减一以保持正确的索引
            }
        }
    }
    return arr;
}

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

5. 使用indexOf()与新数组

这种方法检查元素在原始数组中的首次出现位置，如果该位置与当前索引匹配，则添加到新数组中。

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++) {
        // 只有当元素首次出现时才添加到uniqueArray中
        if (arr.indexOf(arr[i]) === i) {
            uniqueArray.push(arr[i]);
        }
    }
    return uniqueArray;
}

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

6. 使用includes()方法

includes()方法检查数组中是否存在指定的值，如果存在则返回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中不包含当前元素，则添加之
        if (!uniqueArray.includes(arr[i])) {
            uniqueArray.push(arr[i]);
        }
    }
    return uniqueArray;
}

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

7. 使用reduce()方法

reduce()方法对数组中的每个元素执行一个由您提供的reducer函数，将其结果汇总为单个返回值。

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

function removeDuplicatesWithReduce(arr) {
    // reducer函数，检查acc（累加器）中是否已经包含当前元素，如果没有，则添加
    return arr.reduce((acc, curr) => {
        if (!acc.includes(curr)) {
            acc.push(curr);
        }
        return acc;
    }, []);
}

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

每种方法都有其适用场景和性能特点，选择最适合的方法取决于具体的项目需求和环境。通常，使用ES6的Set或filter()方法是最佳选择，因为它们既简洁又高效。