决胜前端面试：深度剖析JavaScript数组去重十大策略

引言

在快节奏的JavaScript世界里，挑战无处不在，而数组去重这一基础而又关键的问题总能点燃开发者求知与优化的热情！试想一下，手握一份百万级元素的大数据数组，如何才能像变魔术般瞬间剔除冗余，释放内存空间，飙升程序效能？今天，就让我们一同探索那些令人拍案叫绝的JavaScript数组去重技巧，它们不仅能重塑你的代码逻辑，更能激发你在日常开发中的极致性能追求！

1.使用 Set 数据结构：

• 思路： Set 是 ES6 中新增的一种数据结构，它的特点是不允许有重复的值，因此将数组转换成 Set 结构，然后再转回数组即可去重。

const array = [1, 2, 3, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];

2.使用 ES6 Map 数据结构：

• 思路： 通过遍历数组，将数组的每个元素作为 Map 的键，这样就能去除重复的键（即重复的数组元素），最后再通过获取 Map 的键构成新的数组。

const array = [1, 2, 3, 3, 4, 4, 5];
const map = new Map();
array.forEach(item => map.set(item, true));
const uniqueArray = [...map.keys()];

3.使用 filter 方法和 indexOf：

• 思路： 使用数组的 filter 方法结合 indexOf 方法，筛选出数组中第一次出现的元素，去掉重复元素。

const array = [1, 2, 3, 3, 4, 4, 5];
const uniqueArray = array.filter((value, index, self) => {
   return self.indexOf(value) === index;
});

4.使用 reduce 方法和 includes：

• 思路： 使用数组的 reduce 方法，遍历原数组，将不重复的元素放入累加器中，利用 includes 方法判断当前元素是否已经存在于累加器中。

const array = [1, 2, 3, 3, 4, 4, 5];
const uniqueArray = array.reduce((acc, currentValue) => {
    if (!acc.includes(currentValue)) {
        acc.push(currentValue);
    }
    return acc;
}, []);

5.使用 ES6 Map 数据结构和 Array.from：

• 思路： 类似于使用 Map 数据结构，将数组的每个元素作为 Map 的键，然后利用 Array.from 方法将 Map 的键取出来，形成新的数组。

const array = [1, 2, 3, 3, 4, 4, 5];
const map = new Map();
array.forEach(item => map.set(item, true));
const uniqueArray = Array.from(map.keys());

6.使用 Set 和 Array.from 的简洁方法：

• 思路： 使用 Set 数据结构去除数组中的重复元素，然后利用 Array.from 方法将 Set 转换成数组。

const array = [1, 2, 3, 3, 4, 4, 5];
const uniqueArray = Array.from(new Set(array));

7.使用对象属性和 Object.keys：

• 思路： 遍历数组，将数组元素作为对象的属性，利用对象的唯一性去除重复元素，最后通过 Object.keys 方法获取对象的键，形成新的数组。

const array = [1, 2, 3, 3, 4, 4, 5];
const obj = {};
array.forEach(item => {
   obj[item] = true;
});
const uniqueArray = Object.keys(obj).map(Number);

8.使用 ES6 Set 和 Array.prototype.forEach：

• 思路： 类似于使用 Set 数据结构，将数组元素添加到 Set 中，然后通过 forEach 方法将 Set 转换成数组。

const array = [1, 2, 3, 3, 4, 4, 5];
const set = new Set();
array.forEach(item => set.add(item));
const uniqueArray = Array.from(set);

9.使用双重循环：

• 思路： 采用双重循环遍历数组，外层循环用于遍历原数组，内层循环用于判断当前元素是否已经存在于去重后的数组中。

const array = [1, 2, 3, 3, 4, 4, 5];
const uniqueArray = [];
for (let i = 0; i < array.length; i++) {
   let isDuplicate = false;
   for (let j = 0; j < uniqueArray.length; j++) {
       if (array[i] === uniqueArray[j]) {
           isDuplicate = true;
           break;
       }
   }
   if (!isDuplicate) {
       uniqueArray.push(array[i]);
   }
}

10.使用递归和 indexOf：

• 思路： 使用递归函数遍历数组，取出数组的第一个元素，然后判断剩余数组中是否存在该元素，若不存在则添加到结果数组中，递归处理剩余数组。

const array = [1, 2, 3, 3, 4, 4, 5];
function unique(arr) {
    if (arr.length === 1) return arr;
    const first = arr[0];
    const rest = arr.slice(1);
    if (rest.indexOf(first) === -1) {
        return [first].concat(unique(rest));
    } else {
        return unique(rest);
    }
}
const uniqueArray = unique(array);

11.使用 ES6 Set 和 Array.prototype.reduce：

• 思路： 使用数组的 reduce 方法，遍历原数组，将不重复的元素添加到累加器中，最后返回累加器即可。

const array = [1, 2, 3, 3, 4, 4, 5];
const uniqueArray = array.reduce((acc, currentValue) => {
    if (!acc.includes(currentValue)) {
        acc.push(currentValue);
    }
    return acc;
}, []);

12.使用对象属性和 reduce 方法：

• 思路： 利用 reduce 方法遍历数组，将数组元素作为对象的属性，利用对象的唯一性去除重复元素，最后

const array = [1, 2, 3, 3, 4, 4, 5];
const uniqueArray = array.reduce((acc, currentValue) => {
    if (!acc[currentValue]) {
        acc[currentValue] = true;
    }
    return acc;
}, {});
console.log(Object.keys(uniqueArray).map(Number)); // [1, 2, 3, 4, 5]

13.使用 Array.prototype.some：

• 思路： 使用数组的 forEach 方法遍历原数组，对于每个元素，利用 some 方法检查去重后的数组是否包含该元素，如果不包含则添加到结果数组中。

const array = [1, 2, 3, 3, 4, 4, 5];
const uniqueArray = [];
array.forEach(item => {
    if (!uniqueArray.some(element => element === item)) {
        uniqueArray.push(item);
    }
});

14.使用递归和 includes 方法：

• 思路： 利用递归函数和 includes 方法，逐个遍历数组元素，如果不重复则加入结果数组，然后递归调用去除剩余数组的重复元素。

const array = [1, 2, 3, 3, 4, 4, 5];
function removeDuplicates(arr) {
    if (arr.length <= 1) return arr;
    const [head, ...tail] = arr;
    return [head, ...removeDuplicates(tail.filter(item => item !== head))];
}
const uniqueArray = removeDuplicates(array);

15.使用 `sort 方法和 for 循环：

• 思路： 将数组排序，然后通过遍历数组，比较相邻元素是否相同，如果不同则加入结果数组，最终得到去重后的数组。

const array = [1, 2, 3, 3, 4, 4, 5];
array.sort();
const uniqueArray = [array[0]];
for (let i = 1; i < array.length; i++) {
    if (array[i] !== array[i - 1]) {
        uniqueArray.push(array[i]);
    }
}

16.使用 ES6 Set 和 Array.prototype.forEach 和 Array.prototype.push：

• 思路： 将数组转换成 Set 数据结构，然后使用 forEach 方法遍历 Set，将每个元素添加到结果数组中。

const array = [1, 2, 3, 3, 4, 4, 5];
const uniqueArray = [];
new Set(array).forEach(item => uniqueArray.push(item));

17.使用 ES6 Set 和展开运算符和 Array.prototype.map：

• 思路： 将数组转换成 Set 数据结构，然后通过展开运算符将 Set 转换成数组，最后使用 map 方法对数组中的每个元素进行处理。

const array = [1, 2, 3, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)].map(item => item);

18.使用 ES6 Set 和 Array.prototype.splice 和 Array.prototype.indexOf：

• 思路： 将数组转换成 Set 数据结构，然后使用 splice 方法和 indexOf 方法去除重复元素。

const array = [1, 2, 3, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
for (let i = 0; i < uniqueArray.length; i++) {
    if (uniqueArray.indexOf(uniqueArray[i]) !== i) {
        uniqueArray.splice(i, 1);
        i--;
    }
}

19.使用递归和 filter 方法：

• 思路： 利用递归函数和 filter 方法，对数组进行遍历，每次取出第一个元素，然后过滤掉剩余数组中与该元素相同的元素。

const array = [1, 2, 3, 3, 4, 4, 5];
function removeDuplicates(arr) {
    if (arr.length === 0) return [];
    const [head, ...tail] = arr;
    return [head, ...removeDuplicates(tail.filter(item => item !== head))];
}
const uniqueArray = removeDuplicates(array);

20.使用 ES6 Set 和 Array.prototype.reduce：

• 思路： 将数组转换成 Set 数据结构，然后使用 reduce 方法遍历 Set，将 Set 中的每个元素添加到累加器中，形成去重后的数组。

const array = [1, 2, 3, 3, 4, 4, 5];
const uniqueArray = Array.from(new Set(array)).reduce((acc, item) => {
    acc.push(item);
    return acc;
}, []);

写在最后

在JavaScript中，由于其灵活性和动态类型的特点，我们可能需要面对包含重复元素的数组，并寻求高效且简洁的方式来去除这些重复项。无论是用于优化内存使用、提升程序性能，还是确保数据的一致性和准确性，对数组元素进行去重都是不可或缺的操作。

喜欢的话帮忙点个赞 + 关注吧，将持续更新 JavaScript 相关的文章，还可以关注我的公众号 梁三石FE ，感谢您的关注~