前端数组去重方法总结

目录

一、使用new Set

1.扩展运算符(...)和Set 结构相结合实现数组去重

2.Array.from()与Set结合使用实现数组去重

二、for循环+includes()

三、reduce+indexof方法

四、循环+indexof()去重

五、filter+indexof()去重

---

一、使用new Set

Set是es6新增的数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值，我们一般称为集合，它本身是一个构造函数，用来生成 Set 数据结构

1.扩展运算符(...)和Set 结构相结合实现数组去重

2.Array.from()与Set结合使用实现数组去重

const arr = [1,1,2,2,3,3,4,4];
const newArr = Array.from(new Set(arr));//Array.from()将类数组对象转换为一个真正的数组
console.log(newArr)//[1,2,3,4]

二、for循环+includes()

includes():用于判断数组是否包含给定的值

const handleQC = (arr) =>{
    let newArr= []//去重后的数组
    for(let i = 0;i<arr.length;i++){
        if(!newArr.includes(arr[i])){//判断newArr是否已经包含arr[i]这个值，如果没有就添加进去
            newArr.push(arr[i])//将数据添加到数组末尾，会返回数组的最新长度
        }
    }
    return newArr//遍历完成后返回去重后的数组
}
let arr = [1,1,2,2,3,3,4,4,5];
const uniqueArr  = handleQC(arr)
console.log(uniqueArr)

三、reduce+indexof方法

reduce() 方法:对数组中的每个元素按序执行所设置的函数，每次运行都会将先前元素的计算结果作为参数传入，最后将其结果 汇总为单个返回值

语法：

array.reduce((prev, cur, index, arr)=> {
    //这里写处理逻辑
}, initialValue)

参数：

prev：上一次的计算结果的返回值（必传）

cur:正在处理的值（必传）

index:当前元素在数组中的索引

arr:被遍历的数组对象

initialValue：初始值

indexOf() 是 JavaScript 中字符串和数组的方法之一，用于查找指定元素在数组或者字符串中第一次出现的位置（索引）。它返回找到的元素的索引值，如果没有找到则返回 -1。

数组去重：

const arr = [1,1,2,2,3,3,4,4,5,6,6];
const uniqueArr = arr.reduce((prev,cur)=>{
    if(prev.indexOf(cur) === -1){
        prev.push(cur)
    }
    return prev;
},[])
console.log(uniqueArr)

四、循环+indexof()去重

const arr = [1,1,2,2,3,3,4,4,5,7,6];
let newArr = []
for(let i = 0;i<arr.length;i++){
    if(newArr.indexOf(arr[i]) === -1){//找newArr数组里面有没有arr[i]这个元素,没有就添加
        newArr.push(arr[i])
    }
}
console.log(newArr)

五、filter+indexof()去重

filter():将所有元素进行判断，将满足条件的元素作为一个新的数组返回。

const arr = [1,1,2,2,3,3,4,4,5,5,6];
const newArr = arr.filter((item,index)=>{
    //当前索引等于indexof返回的索引，就代表没有重复项，如果不等于说明后面有重复
    return arr.indexOf(item)===index
})
console.log(newArr)