JS实现数组去重及数组内对象去重功能示例

JS实现数组去重及数组内对象去重功能示例攻略

在JavaScript中，我们经常会用到数组。但是，数组中如果有重复的元素会影响我们的数据操作，因此我们需要进行数组去重操作。在这篇攻略中，我将向您展示如何使用JavaScript实现数组去重及数组内对象去重功能，希望能帮助您更好地理解和应用JS。

数组去重

方法一：使用Set

使用Set可以很方便地去除数组中的重复元素。Set是一种无序且不重复的数据集合。可以使用Set()构造函数创建一个新的Set对象，将数组传入Set()即可将数组去重。具体代码如下：

let arr = [1, 2, 3, 4, 5, 2, 3];
let newArr = [...new Set(arr)];
console.log(newArr); //输出[1, 2, 3, 4, 5]

上述代码中，使用ES6语法解构赋值获取Set返回的集合。Set的特性保证了数组内不会存在重复元素。

方法二：使用Array.filter()

使用Array.filter()方法可以筛选数组中满足条件的元素。先获取数组中第一个元素作为基准元素，循环遍历数组，将不等于基准元素的元素筛选出来，最后将筛选后的数组元素进行集合即可。具体代码如下：

let arr = [1, 2, 3, 4, 5, 2, 3];
let newArr = arr.filter(function (element, index, self) {
   return self.indexOf(element) === index;  // 如果找到了这个元素的下标等于当前元素位置，则说明这个元素是首次出现的，保留 
});
console.log(newArr); //输出[1, 2, 3, 4, 5]

方法三：使用Map

使用Map也可以实现去重操作。我们可以使用Map数据结构的“键”不会重复的特性，将数组中的元素放到Map中做“键”，再获取Map的键即可。如果数组中元素去重后，键和元素是一一对应的，说明去重成功，代码如下：

let arr = [1, 2, 3, 4, 5, 2, 3];
let map = new Map();
let newArr = [];
for (let i = 0; i < arr.length; i++) {
    if (!map.has(arr[i])) {  // 如果map中不存在当前值 
        map.set(arr[i], true); // 把当前元素作为键放入 map 
        newArr.push(arr[i]);  // 把当前元素放入 newArr 
    }
}
console.log(newArr); //输出[1, 2, 3, 4, 5]

数组内对象去重

如果数组内部是对象，我们需要按照对象的某个属性进行去重。例如数组内的对象结构如下：

let arr = [
    {id: 1, name: 'A'},
    {id: 1, name: 'A'},
    {id: 2, name: 'B'},
    {id: 2, name: 'C'},
    {id: 3, name: 'B'}
];

我们需要依据对象中的id属性，将id相同的元素去重。具体代码如下：

function uniqueArray(arr, key) {
  return arr.filter((element, index, self) => {
    return self.findIndex(item => item[key] === element[key]) === index;
  });
}

let newArr = uniqueArray(arr, 'id');
console.log(newArr); 

我们通过在 uniqueArray 函数中使用 Array.filter 方法筛选出满足条件（即id不重复）的数组元素，再返回新的不重复的数组。这里我们使用了函数式编程的思想，使代码量更加简洁。

另外，如果我们需要按照多个属性进行去重呢？在这种情况下，可以扩展一下 uniqueArray 函数，将 key 变成一个数组，然后循环使用 findIndex 方法进行筛选即可。

function uniqueArray(arr, keys) {
  return arr.filter((element, index, self) => {
    return self.findIndex(item => JSON.stringify(item, keys) === JSON.stringify(element, keys)) === index;
  });
}

let newArr = uniqueArray(arr, ['id', 'name']);
console.log(newArr); 

上述代码中，我们使用了JSON.stringify()方法将对象序列化成字符串，在进行比较。比较操作时传入了keys数组，表示只比较keys数组内的属性。

到此，我们已经完成了JS实现数组去重及数组内对象去重的示例攻略。希望能对您有所帮助。