JS - 数组去重

最新推荐文章于 2022-04-25 18:07:21 发布

seaalan

最新推荐文章于 2022-04-25 18:07:21 发布

阅读量178

点赞数

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/seaalan/article/details/89001442

JS 专栏收录该内容

26 篇文章

订阅专栏

示例数组

let usageList = [ 
  { _id: 5ca4363eb4c03a02c8c311bd, user: 5ca2bc4a54bc0f2fa07b1541 },
  { _id: 5ca43645b4c03a02c8c311be, user: 5ca2bc4a54bc0f2fa07b1541 },
  { _id: 5ca4369eb4c03a02c8c311c1, user: 5c9d8cc3161d6c257c021340},
  { _id: 5ca436aeb4c03a02c8c311c3, user: 5ca2bc4a54bc0f2fa07b1541 },
  { _id: 5ca436d7b4c03a02c8c311c5, user: 5c9d8cc3161d6c257c021340 },
  { _id: 5ca43722b4c03a02c8c311c6, user: 5c9d8cc3161d6c257c021340 },
  { _id: 5ca43d697af6263868ac835e, user: 5c9d8cc3161d6c257c021340 }
]

目的：获取示例数组中的user组成的新数组，新数组中不能有重复的user。
实现代码1：

let userIds = usageList.map(usage => usage.user.toString()).filter((element, index, self) => {
    return self.indexOf(element) === index;
});

其中 usageList.map(usage => usage.user.toString()) 的执行结果如下：

[ '5ca2bc4a54bc0f2fa07b1541',
  '5ca2bc4a54bc0f2fa07b1541',
  '5c9d8cc3161d6c257c021340',
  '5ca2bc4a54bc0f2fa07b1541',
  '5c9d8cc3161d6c257c021340',
  '5c9d8cc3161d6c257c021340',
  '5c9d8cc3161d6c257c021340' ]

关键代码 filter((element, index, self) => { return self.indexOf(element) === index; }); 用于去重。去重原理为相同的元素使用indexOf总是会返回第一个元素的位置（indeOf(): 返回数组中第一个与指定值相等的元素的索引），因此后续的重复元素位置index与indexOf返回的位置不相等，条件为false时就会被filter过滤掉，从而达到去重的目的。最终的执行结果如下：

[ '5ca2bc4a54bc0f2fa07b1541', '5c9d8cc3161d6c257c021340' ]

实现代码2：也可以使用set特性进行去重

let userIds = Array.from(
               new Set(usageList.map(usage=> usage.user.toString()))
              ).length;