js 数组和数组对象去重

我总是词不达意

于 2023-02-13 19:05:21 发布

阅读量215

点赞数

分类专栏：前端 JavaScript 文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_43743175/article/details/129012169

版权

前端同时被 2 个专栏收录

86 篇文章 3 订阅

订阅专栏

JavaScript

29 篇文章 0 订阅

订阅专栏

文章介绍了在JavaScript中处理数组对象去重的几种方法，包括使用reduce、filter和Map函数，以及利用Set数据结构。示例代码展示了如何对单个和两个数组进行去重操作，确保每个对象的id是唯一的。

摘要由CSDN通过智能技术生成

数据结构

let arr = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' },
  { id: 2, name: '张三' }
],
arr2 = [
  { id: 4, name: '赵六' },
  { id: 5, name: '孙七' },
  { id: 3, name: '周八' },
  { id: 2, name: '吴九' },
  { id: 4, name: '郑十' }
],
obj = {}

1.使用reduce（一般推荐）

单个数组对象去重

let newArr = newArr.reduce(function (item, next) {
  obj[next.id] ? '' : (obj[next.id] = true && item.push(next))
  return item
}, [])

console.log(newArr)

两个数组对象去重

let newArr = arr.concat(arr2)

newArr = newArr.reduce(function (item, next) {
  obj[next.id] ? '' : (obj[next.id] = true && item.push(next))
  return item
}, [])

console.log(newArr)

2.使用filter和Map（强烈推荐）

单个数组对象去重

const res = new Map()
let newArr = arr.filter(item => !res.has(item.id) && res.set(item.id, 1))

console.log(newArr)

两个数组对象去重

const res = new Map()
let arrs = [...arr, ...arr2],
  newArr = arrs.filter(item => !res.has(item.id) && res.set(item.id, 1))

console.log(newArr)

3.使用set()

// 给数组中普通元素去重
let arr = [1, 2, 3, 4, 4]
/*  数组去重：
 使用new Set()  去重
  使用...扩展运算符，拿出可用的值
  加一个数组括号  [ ]   让其转成数组 */
let newArr = [...new Set(arr)]

console.log(newArr)

4.对象数组去重（不保留相同项）

let newArr = arr.filter(function (item1) {
  return arr2.every(function (item2) {
    return item2.id !== item1.id
  })
})

let newArr = [] //保存遍历时要留下的项
for (let i = 0; i < arr.length; i++) {
  let item = arr[i],
    isExist = false
  for (let j = 0; j < arr2.length; j++) {
    let id = arr2[j].id
    if (item.id == id) {
      isExist = true
      break
    }
  }
  if (!isExist) {
    newArr.push(item)
  }
}