前端面试题9（JavaScript数组去重）

在这里插入图片描述

1. 使用Set

ES6引入了Set数据结构，它只存储唯一的值，因此可以用来快速去重。

javascript">function uniqueWithSet(arr) {
    return [...new Set(arr)];
}

// 示例
console.log(uniqueWithSet([1, 2, 2, 3, 4, 4, 5])); // 输出: [1, 2, 3, 4, 5]

2. 使用indexOf或includes

遍历数组，利用indexOf或includes方法检查当前元素是否已存在于新数组中，如果不存在则添加进去。

javascript">function uniqueWithIndexOf(arr) {
    var result = [];
    arr.forEach(function(item) {
        if (result.indexOf(item) === -1) {
            result.push(item);
        }
    });
    return result;
}

// 或者使用includes
function uniqueWithIncludes(arr) {
    var result = [];
    arr.forEach(function(item) {
        if (!result.includes(item)) {
            result.push(item);
        }
    });
    return result;
}

// 示例
console.log(uniqueWithIndexOf([1, 2, 2, 3, 4, 4, 5])); // 输出: [1, 2, 3, 4, 5]

3. 使用filter方法

结合indexOf或includes方法，使用Array的filter方法进行去重。

javascript">function uniqueWithFilter(arr) {
    return arr.filter(function(item, index, array) {
        return array.indexOf(item) === index;
    });
}

// 示例
console.log(uniqueWithFilter([1, 2, 2, 3, 4, 4, 5])); // 输出: [1, 2, 3, 4, 5]

4. 使用reduce方法

reduce方法可以累积遍历过程中的结果，也可以用来去重。

javascript">function uniqueWithReduce(arr) {
    return arr.reduce((accumulator, current) => {
        return accumulator.includes(current) ? accumulator : [...accumulator, current];
    }, []);
}

// 示例
console.log(uniqueWithReduce([1, 2, 2, 3, 4, 4, 5])); // 输出: [1, 2, 3, 4, 5]

5. 对象键或Map去重

利用对象或Map的键唯一性来去重。

javascript">function uniqueWithObject(arr) {
    var obj = {};
    return arr.filter(function(item) {
        return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (obj[typeof item + JSON.stringify(item)] = true);
    });
}

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

// 示例
console.log(uniqueWithObject([1, '1', 2, 2, 3, 4, 4, 5])); // 输出: [1, "1", 2, 3, 4, 5]
console.log(uniqueWithMap([1, 2, 2, 3, 4, 4, 5])); // 输出: [1, 2, 3, 4, 5]