12月19, 2020

JS数组对象根据对象中的指定属性去重

在做后台系统策略分流项目的过程中,遇到了一些问题,稍微记录下.过程很痛苦,但是还是解决了问题.这也是来这边第一次做后台管理系统,技术更新太快,还是要不断的总结和学习,不然很容易就被淘汰.

有一个数组对象List,根据某个字段去重.

const Arrlist = [{
        "id": 1,
        "gmtCreated": "2020-12-01 14:18:36",
        "gmtModified": "2020-12-08 16:35:04",
        "productCode": "HHM01",
        "insurerCode": "000183",
        "insurerName": "华海财险",
        "versionName": "华海投保",
        "versionCode": ""
    },
    {
        "id": 2,
        "gmtCreated": "2020-12-01 14:19:07",
        "gmtModified": "2020-12-08 16:35:05",
        "productCode": "QHM01",
        "insurerCode": "000208",
        "insurerName": "前海财险",
        "versionName": "前海投保",
        "versionCode": ""
    },
    {
        "id": 3,
        "gmtCreated": "2020-12-01 14:23:52",
        "gmtModified": "2020-12-08 16:35:06",
        "productCode": "AN07$2102099445",
        "insurerCode": "000179",
        "insurerName": "众安健康险",
        "versionName": "众安投保",
        "versionCode": ""
    },
    {
        "id": 4,
        "gmtCreated": "2020-12-02 18:51:34",
        "gmtModified": "2020-12-08 16:29:53",
        "productCode": "HHM01",
        "insurerCode": "000183",
        "insurerName": "华海财险",
        "versionName": "华海可回溯",
        "versionCode": "v2"
    },
    {
        "id": 5,
        "gmtCreated": "2020-12-04 17:45:00",
        "gmtModified": "2020-12-10 19:42:12",
        "productCode": "XDCM01",
        "insurerCode": "000184",
        "insurerName": "现代财月缴版",
        "versionName": "现代财投保",
        "versionCode": "v2"
    }
];

let arrayList = [
{
  id:'1',
  name:'one'
},{
  id:'2',
  name:'tow',
},{
  id:'3',
  name:'three'
},{
  id:'1',
  name:'one'
},{
  id:'2',
  name:'tow',
},{
  id:'3',
  name:'three'
}
]

list数组对象如上.根据insurerCode ,id字段进行去重.

下面列举下能够实现的几种方法:

方法一: 循环判断

function unique(arr,u_key){
  let result = []
  result[0] = arr[0]
  arr.forEach((meta_item,i)=>{
    //声明计数变量,如果源数组中的一个对象和result结果数组中的所有对象不同,就push
    let num = 0
    result.forEach((r_item,j)=>{
      if (meta_item[u_key]!==r_item[u_key]) {
        num++
      }
      if (num === result.length) {
        result.push(meta_item)
      }
    })
  })
  return result
}

方法二:利用对象属性唯一


function unique(arr, u_key) {
    const obj = {}
    const result = []
    arr.forEach(item => {
        const typeof_key = typeof item[u_key] + item[u_key]
        console.log(typeof_key);
        obj[typeof_key] = item
    })
    for (const key in obj) {
        result.push(obj[key])
    }
    return result

}

方法三:利用ES6的Map方法

    function unique(arr,u_key) {
      let map = new Map()
      arr.forEach((item,index)=>{
        if (!map.has(item[u_key])){
          map.set(item[u_key],item)
        }
      })
      return [...map.values()]
    }

方法四:利用lodash库进行处理:

如果项目中有引入lodash库的话,就可以只用使用下面的uniqBy,传入对应的数组对象,和要根据的相关字段即可


let unarrlist = this.$lodash.uniqBy(Arrlist,'insurerCode');
console.log(unarrlist)

let unArr = this.$lodash.uniqBy(arrayList,'id');
console.log(unArr)

页面效果

本文链接:https://901web.com/post/js-object-unique.html

-- EOF --

Comments

请在后台配置评论类型和相关的值。