ES6去重方案详解

小蓝 • 2024-12-12 12:00 • 编程

一、Set数据结构去重

ES6中引入了Set数据结构，它类似于数组，但成员的值都是唯一的，没有重复的值。可以将数组转化为Set结构进而去重。


// 数组去重
const arr = [1, 1, 2, 3, 3];
const arrUnique = [...new Set(arr)];
console.log(arrUnique); // [1, 2, 3]

// 对象数组去重
const objArr = [{name: 'Alice', age: 18}, {name: 'Bob', age: 20}, {name: 'Alice', age: 18}];
const set = new Set(objArr.map(item => JSON.stringify(item)));
const uniqueObjArr = Array.from(set).map(item => JSON.parse(item));
console.log(uniqueObjArr); // [{name: 'Alice', age: 18}, {name: 'Bob', age: 20}]

使用Set的优点是去重效率高，可以去除数组和对象数组中的重复元素。但缺点是转化为Set结构后，顺序会被打乱，无法保持原数组顺序。

二、Filter方法去重

利用filter方法和indexOf下标的特性可以对数组进行去重。当indexOf查询元素的下标与当前循环索引相等时，说明元素第一次出现。


const arr = [1, 1, 2, 3, 3];
const arrUnique = arr.filter((item, index) => arr.indexOf(item) === index);
console.log(arrUnique); // [1, 2, 3]

缺点是 indexOf会进行多次循环查询，当数组元素比较多时效率较低。

三、Map映射表去重

使用Map映射表数据结构将数组元素与出现次数作为Key-Value键值对进行存储，取出count==1的Key值即为去重后的数组。


const arr = [1, 1, 2, 3, 3];
const map = new Map();
for(let i=0; i item[1] === 1).map(item => item[0]);
console.log(arrUnique); // [1, 2, 3]

四、Reduce方法去重

借助reduce函数和includes来去重，当新的数组中包含元素就跳过，否则添加到新数组中。


const arr = [1, 1, 2, 3, 3];
const arrUnique = arr.reduce((pre, cur) => pre.includes(cur) ? pre : [...pre, cur], []);
console.log(arrUnique); // [1, 2, 3]

五、双重循环去重

最简单的去重方法是使用双重循环，循环体内使用splice方法删除后面的重复元素，效率最低，不推荐使用。


const arr = [1, 1, 2, 3, 3];
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);
    }
  }
}
console.log(arr); // [1, 2, 3]

在实际项目中，需要根据实际情况选择适合的去重方式，以保证项目性能和效率。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/236420.html