JS数组过滤去重（基本类型，数组对象类型）

一. 基本简单类型数组去重

1.最简单最容易理解利用循环+indexOf方法

const arr = [3, 3, 4, 2, 4, 5]
const newArr = []
for (var i = 0; i < arr.length; i++) {
  if (newArr.indexOf(arr[i]) === -1) {
    newArr.push(arr[i])
  }
}
console.log(newArr) //  [3, 4, 2, 5]

**首先创建一个新数组保存去重后的值，遍历arr数组，然后判断新数组里是否有遍历到的arr中的元素，如果没有，直接push进新数组中，如果已经有了，则不操作，遍历完成之后新数组就包含了去重的值。

2.最简洁 Set集合

const arr = [1, 2, 2, 3, 4, 4]
const newArr = Array.from(new Set(arr))
console.log(newArr) // [1, 2, 3, 4]

Set：是值的集合，Set中的元素只会出现一次，即Set中的元素是唯一的。

Array.from()：将一个类数组对象或者可遍历对象转换成一个真正的数组

--------简单类型数组去重方法有很多，思路跟第一种方法差不多，都是找出是否已经存在或者是否是第一次出现来判断

二.数组对象类型去重（日常开发应用较多）

1.利用对象访问属性的方法，判断对象中是否存在key （简单易理解）

const arr = [
    {id: 1, name: '张三'},
    {id: 2, name: '李四'},
    {id: 3, name: '王五'},
    {id: 2, name: '赵六'},
    {id: 3, name: '陈二狗'},
]
const result = []
const obj = {}
for(let i = 0; i < arr.length; i++){
    if (!obj[arr[i].id]) {
        result.push(arr[i])
        obj[arr[i].id] = true
    }
}
console.log(result) // [{id: 1, name: '张三'},{id: 2, name: '李四'},{id: 3, name: '王五'}]

这里是根据id字段去重，根据实际需要更换对应的字段即可。

2.如需要去除每个字段都相同的对象，可用如下方法

const arr = [
    {id: 1, name: '张三'},
	{id: 2, name: '李四'},
	{id: 2, name: '李四'},
	{id: 2, name: '赵六'},
	{id: 3, name: '王五'},
	{id: 3, name: '王五'},
	{id: 3, name: '陈二狗'}
]
const result= arr.filter((obj, index) => {
	return arr.findIndex((item) => item.id === obj.id && item.name === obj.name) === index
})
console.log(result) // [{id: 1, name: '张三'},{id: 2, name: '李四'},{id: 2, name: '赵六'},{id: 3, name: '王五'},{id: 3, name: '陈二狗'}]

3.目前发现最简洁方法，利用map对象

const arr = [
    {id: 1, name: '张三'},
    {id: 2, name: '李四'},
    {id: 3, name: '王五'},
    {id: 2, name: '赵六'},
    {id: 3, name: '陈二狗'}
]
const map = new Map()
const result = arr.filter(item => !map.has(item.id) && map.set(item.id, 1))
console.log(result) // [{id: 1, name: '张三'},{id: 2, name: '李四'},{id: 3, name: '王五'}]

三.（真香警告）利用loadsh库进行去重

Loadsh 是一个一致性、模块化、高性能的 JavaScript 实用工具库。它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数,Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。

首先需要npm下载

npm i --save lodash

然后按需引入，也可以全局引入，看个人需求

import { isEqual, uniqWith, uniqBy } from 'lodash'
let arr = [
    {id: 1, name: '张三'},
	{id: 2, name: '李四'},
	{id: 2, name: '李四'},
	{id: 2, name: '赵六'},
	{id: 3, name: '王五'},
	{id: 3, name: '王五'},
	{id: 3, name: '陈二狗'}
]

console.log('根据id字段去掉相同的元素:', uniqBy(arr, 'id'))
// {id: 1, name: '张三'},{id: 2, name: '李四'},{id: 3, name: '王五'}

console.log('检查数组每一项进行去重:', uniqWith(arr, isEqual))
// {id: 1, name: '张三'},{id: 2, name: '李四'},{id: 2, name: '赵六'},{id: 3, name: '王五'},{id: 3, name: '陈二狗'}

loadsh库日常开发还是很香的，有很多关于数据处理的方法，具体使用请看文档

英文文档：Lodash Documentation

中文文档：Lodash 简介 | Lodash 中文文档 | Lodash 中文网

总结

以上就是我分享的全部内容，仅列举了简单易理解的一些方法，去重思路大体都差不多。希望这些内容能够对你有所帮助