JavaScript - 二维对象数组去重（根据某一属性）

「爱情、让人受尽委屈。」 2022-08-31 15:16 304阅读 0赞

## 前言 ##

> 有时候，我们可能需要数组去重，如果是一维数组，那么直接 ES6 语法 `[...new Set(array)]` 即可，如果是二维对象数组则无效了（一维数组去重请访问 [这篇文章][Link 1]）。

例如以下对象数组，可以看到有两个重复的对象，那么如何根据 `id` （或其他属性）进行判断后去除呢？

// 原数组 ↓
    var arr = [
    	{  id: 1, name: '小红' },
    	{  id: 1, name: '小红' },//重复项
    	{  id: 2, name: '小王' },
    	{  id: 3, name: '小张' }
    ]
    
    // 去除后 ↓
    var arr = [
    	{  id: 1, name: '小红' },
    	{  id: 2, name: '小王' },
    	{  id: 3, name: '小张' }
    ]

## 解决方案 ##

封装如下函数，传入原数组与属性名即可完成去重。

/** * 二维对象数组去重 * @description 去重后返回数组 * @param {Array} arr - 要去重的数组 * @param {String} attr - 要依据的属性 * @return Array */
    function removal(arr, attr) { 
      const res = new Map();
      return arr.filter((arr) => !res.has(arr[attr]) && res.set(arr[attr], 1));
    }
    
    // 使用示例
    console.log(removal(arr, 'id'))

在 Vue 项目中使用，需要将该方法挂载到 `methods` 属性上，通过 `this.removal()` 访问。

[Link 1]: https://blog.csdn.net/weixin_44198965/article/details/113448477?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162727062216780269829669%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=162727062216780269829669&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_v29-1-113448477.pc_v2_rank_blog_default&utm_term=%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D&spm=1018.2226.3001.4450