数组去重的几种姿势

上篇文章说到了引导式访问组件，其中有个扩展功能是是否强制以及是否第一次进行引导访问，这时候有个 guideKey 可以作为根据判断，那么存储拿取的时候就用到唯一值了，然后就有了这篇文章介绍的几种姿势，有深入哦~
背景

假设已经使用 guideKeyList 来记录已完成的引导步骤：

1. let guideKeyList = uni.getStorageSync("guideKeyList") || [];
2. guideKeyList.push(this.guideKey);
3. guideKeyList = guideKeyList.unique(); // 自定义 unique 方法
4. uni.setStorageSync("guideKeyList", guideKeyList);

复制代码

姿势一：原始写法（for 循环 + includes）

1. Array.prototype.unique = function () {
2.   let arr = [];
3.   for (let i = 0; i < this.length; i++) {
4.     if (!arr.includes(this[i])) {
5.       arr.push(this[i]);
6.     }
7.   }
8.   return arr;
9. };

复制代码

优点：直观、好理解。
缺点：性能差（includes() 是 O(n)）、代码冗长。
姿势二：原型扩展优化（使用 Object.create(null)）

1. Array.prototype.unique = function () {
2.   const seen = Object.create(null);
3.   const result = [];
5.   for (let i = 0; i < this.length; i++) {
6.     const item = this[i];
7.     if (!seen[item + typeof item]) {
8.       seen[item + typeof item] = true;
9.       result.push(item);
10.     }
11.   }
13.   return result;
14. };

复制代码

优点：性能比 includes() 更优，避免 key 冲突。
缺点：污染 Array.prototype，多人协作项目慎用。

建议在文档中说明使用原型扩展的地方，防止冲突。

姿势三：推荐方式（使用 Set 封装函数）

1. function uniqueArray(arr) {
2.   return [...new Set(arr)];
3. }

复制代码

优点：性能优秀，语义简洁，无副作用。
缺点：IE 不支持 Set（已不再重要）。
如果不想污染原型链，这是最推荐的方式。
姿势四：filter + indexOf

1. function uniqueArray(arr) {
2.   return arr.filter((v, i, a) => a.indexOf(v) === i);
3. }

复制代码

优点：不污染原型，兼容性好。
缺点：性能比 Set 略差，代码略冗余。
最终整合

在引导结束下使用：

1. finish() {
2.   // 可以单独拎出来在 main.ts or App.vue 等直接先实现一波，比较好看点，容易维护
3.   Array.prototype.unique = function () {
4.     const seen = Object.create(null);
5.     const result = [];
7.     for (let i = 0; i < this.length; i++) {
8.       const item = this[i];
9.       if (!seen[item + typeof item]) {
10.         seen[item + typeof item] = true;
11.         result.push(item);
12.       }
13.     }
14.     return result;
15.   };
17.   this.visible = false
18.   let guideKeyList = uni.getStorageSync('guideKeyList') || []
19.   guideKeyList.push(this.guideKey)
20.   guideKeyList = guideKeyList.unique() // 也可以替换为 Array.from(new Set(...))
21.   uni.setStorageSync('guideKeyList', guideKeyList)
22.   this.$emit('finish')
23. }

复制代码

总结

方法是否污染原型性能可读性兼容性for + includes✅ 是❌ 差✅ 简单✅ 高Object.create✅ 是✅ 中✅ 清晰✅ 高Set❌ 否✅ 高✅ 极简❌ 旧 IE 不支持filter+indexOf❌ 否✅ 中✅ 普通✅ 高

如果是项目封装库或者多人协作，避免扩展原型链，推荐使用函数封装（如 uniqueArray(arr)）。

拓展姿势：对象数组去重 & 深度去重

对象数组去重（根据 id 去重）：

1. function uniqueByKey(arr, key) {
2.   const seen = new Set();
3.   return arr.filter((item) => {
4.     const val = item[key];
5.     if (seen.has(val)) return false;
6.     seen.add(val);
7.     return true;
8.   });
9. }
11. // 示例
12. const arr = [
13.   { id: 1, name: "A" },
14.   { id: 2, name: "B" },
15.   { id: 1, name: "C" },
16. ];
18. console.log(uniqueByKey(arr, "id"));
19. // => [ { id: 1, name: 'A' }, { id: 2, name: 'B' } ]

复制代码

深度去重（针对嵌套对象结构）：

1. function deepUnique(arr) {
2.   const seen = new Set();
3.   return arr.filter((item) => {
4.     const str = JSON.stringify(item);
5.     if (seen.has(str)) return false;
6.     seen.add(str);
7.     return true;
8.   });
9. }
11. // 示例：
12. const nestedArr = [
13.   { id: 1, data: { x: 1 } },
14.   { id: 2, data: { x: 2 } },
15.   { id: 1, data: { x: 1 } },
16. ];
18. console.log(deepUnique(nestedArr));

复制代码

注意：deepUnique 的比较是基于 JSON 字符串的浅层一致性，不适用于包含函数或 undefined 的复杂对象。

更进一步由大佬们来把姿势实现下吧：

• 实现可配置的 unique(arr, { deep: true, key: 'id' }) 工具函数
  
• 集成 lodash 或 Ramda 实现更强大的数据操作链
  

欢迎评论区继续探讨！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！