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

梁大虎2024-03-25 16:19

引言

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

1.使用 Set 数据结构：

  • 思路： Set 是 ES6 中新增的一种数据结构，它的特点是不允许有重复的值，因此将数组转换成 Set 结构，然后再转回数组即可去重。
javascript 复制代码 
const array = [1, 2, 3, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];

2.使用 ES6 Map 数据结构：

  • 思路： 通过遍历数组，将数组的每个元素作为 Map 的键，这样就能去除重复的键（即重复的数组元素），最后再通过获取 Map 的键构成新的数组。
javascript 复制代码 
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 方法，筛选出数组中第一次出现的元素，去掉重复元素。
javascript 复制代码 
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 方法判断当前元素是否已经存在于累加器中。
javascript 复制代码 
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 的键取出来，形成新的数组。
javascript 复制代码 
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 转换成数组。
javascript 复制代码 
const array = [1, 2, 3, 3, 4, 4, 5];
const uniqueArray = Array.from(new Set(array));

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

  • 思路： 遍历数组，将数组元素作为对象的属性，利用对象的唯一性去除重复元素，最后通过 Object.keys 方法获取对象的键，形成新的数组。
javascript 复制代码 
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 转换成数组。
javascript 复制代码 
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.使用双重循环：

  • 思路： 采用双重循环遍历数组，外层循环用于遍历原数组，内层循环用于判断当前元素是否已经存在于去重后的数组中。
javascript 复制代码 
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：

  • 思路： 使用递归函数遍历数组，取出数组的第一个元素，然后判断剩余数组中是否存在该元素，若不存在则添加到结果数组中，递归处理剩余数组。
javascript 复制代码 
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 方法，遍历原数组，将不重复的元素添加到累加器中，最后返回累加器即可。
javascript 复制代码 
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 方法遍历数组，将数组元素作为对象的属性，利用对象的唯一性去除重复元素，最后
javascript 复制代码 
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 方法检查去重后的数组是否包含该元素，如果不包含则添加到结果数组中。
javascript 复制代码 
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 方法，逐个遍历数组元素，如果不重复则加入结果数组，然后递归调用去除剩余数组的重复元素。
javascript 复制代码 
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 循环：

  • 思路： 将数组排序，然后通过遍历数组，比较相邻元素是否相同，如果不同则加入结果数组，最终得到去重后的数组。
javascript 复制代码 
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，将每个元素添加到结果数组中。
javascript 复制代码 
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 方法对数组中的每个元素进行处理。
javascript 复制代码 
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 方法去除重复元素。
javascript 复制代码 
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 方法，对数组进行遍历，每次取出第一个元素，然后过滤掉剩余数组中与该元素相同的元素。
javascript 复制代码 
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 中的每个元素添加到累加器中，形成去重后的数组。
javascript 复制代码 
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 ，感谢您的关注~

相关推荐
zqx_720 分钟前
随记 前端框架React的初步认识
前端·react.js·前端框架
惜.己36 分钟前
javaScript基础（8个案例+代码+效果图）
开发语言·前端·javascript·vscode·css3·html5
什么鬼昵称1 小时前
Pikachu-csrf-CSRF(get)
前端·csrf
长天一色1 小时前
【ECMAScript 从入门到进阶教程】第三部分：高级主题（高级函数与范式，元编程，正则表达式，性能优化）
服务器·开发语言·前端·javascript·性能优化·ecmascript
NiNg_1_2342 小时前
npm、yarn、pnpm之间的区别
前端·npm·node.js
秋殇与星河2 小时前
CSS总结
前端·css
BigYe程普2 小时前
我开发了一个出海全栈SaaS工具，还写了一套全栈开发教程
开发语言·前端·chrome·chatgpt·reactjs·个人开发
余生H2 小时前
前端的全栈混合之路Meteor篇：关于前后端分离及与各框架的对比
前端·javascript·node.js·全栈
程序员-珍2 小时前
使用openapi生成前端请求文件报错 ‘Token “Integer“ does not exist.‘
java·前端·spring boot·后端·restful·个人开发
axihaihai2 小时前
网站开发的发展(后端路由/前后端分离/前端路由)
前端
热门推荐
01组基轨迹建模 GBTM的介绍与实现（Stata 或 R）02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04分享几个惊艳的 Three.js 个人站点05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07CTF网络安全大赛简单的web抓包题目：HEADache08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10springer 在线投稿编译踩坑