数组去重方法总结比较

最新推荐文章于 2022-04-18 10:51:56 发布

yzbyxmx

最新推荐文章于 2022-04-18 10:51:56 发布

阅读量173

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签：数组去重方法比较简单数组复杂数据

本文链接：https://blog.csdn.net/u013262823/article/details/102483845

js 专栏收录该内容

11 篇文章

订阅专栏

let arr = [1,3,4,5,6,7,7,8,9,9,9,9,91,1,2,3,3,4,5,‘a’,‘ab’,‘a’,‘abc’,‘abc’]

方法一 es6 Set

let list1 = []
list1 = Array.from(new Set(arr))
console.log(‘methods1’, list1)

方法二遍历循环 indexOf

let list2 = []
arr.map((cur) => {
if (list2.indexOf(cur) === -1) {
list2.push(cur)
}
})
console.log(‘mthods2’, list2)

方法三使用filter 和 includes

let list3 = []
list3 = arr.filter((cur) => {
return list3.includes(cur) ? ‘’ : list3.push(cur)
})
console.log(‘methods3’, list3)

如果使用的是稍微复杂数组如何按名称去重？

let infoList = [
{name:‘张三’,value:123},
{name:‘张三’,value:1000},
{name:‘王二小’,value:123},
{name:‘李四’,value:123},
{name:‘麻五’,value:123},
{name:‘麻五’,value:199},
{name:‘张三’,value:123}
]

console.log(‘methods4’, Array.from(new Set(infoList)))

// es6 new Set 无效

let list4 = []
list4 = infoList.filter((cur) => {
return list4.includes(cur.name) ? ‘’ : list4.push(cur.name)
})
console.log(‘methods5’, list4)

//filter和includes生效

let list5 = []
infoList.map((cur) => {
if (list5.indexOf(cur.name) === -1) {
list5.push(cur)
}
})
console.log(‘methods6’, list5) //

indexOf 方法同样无效

引入reduce

let obj = {}
let list6 = []
list6 = infoList.reduce((cur,next) => {
obj[next.name] ? ‘’ : obj[next.name] = true && cur.push(next)
return cur
}, [])
console.log(‘methods7’, list6)

上述代码执行效果如下：

methods1 [ 1, 3, 4, 5, 6, 7, 8, 9, 91, 2, 'a', 'ab', 'abc' ]
mthods2 [ 1, 3, 4, 5, 6, 7, 8, 9, 91, 2, 'a', 'ab', 'abc' ]
methods3 [ 1, 3, 4, 5, 6, 7, 8, 9, 91, 2, 'a', 'ab', 'abc' ]
methods4 [ { name: '张三', value: 123 },
  { name: '张三', value: 1000 },
  { name: '王二小', value: 123 },
  { name: '李四', value: 123 },
  { name: '麻五', value: 123 },
  { name: '麻五', value: 199 },
  { name: '张三', value: 123 } ]
methods5 [ { name: '张三', value: 123 },
  { name: '王二小', value: 123 },
  { name: '李四', value: 123 },
  { name: '麻五', value: 123 } ]
methods6 [ { name: '张三', value: 123 },
  { name: '张三', value: 1000 },
  { name: '王二小', value: 123 },
  { name: '李四', value: 123 },
  { name: '麻五', value: 123 },
  { name: '麻五', value: 199 },
  { name: '张三', value: 123 } ]
methods7 [ { name: '张三', value: 123 },
  { name: '王二小', value: 123 },
  { name: '李四', value: 123 },
  { name: '麻五', value: 123 } ]