【JavaScript】数组去重

总结几种常用的数组去重方法:
1.for循环
从第一个元素开始,他后面的元素依次与之比对是否重复,重复则删除当前元素,第一次循环结束后,数组中就没有元素和第一个元素重复了,然后用第二个元素去比对。

function unique(arr) {
    
    
    for (let i = 0; i < arr.length; i++) {
    
    
        for (let j = i + 1; j < arr.length; j++) {
    
    
            if (arr[j] == arr[i]) {
    
    
                arr.splice(j, 1)
                j--
            }
        }
    }
}

2.数组的indexOf方法
数组的indexOf方法返回找到的第一个元素的索引,如果没找到返回-1。如果arr.indexOf(arr[i]) !== i,说明当前元素不是第一次出现,是重复出现的,应该删除。

function unique(arr) {
    
    
    for (let i = 0; i < arr.length; i++) {
    
    
        if (arr.indexOf(arr[i]) !== i) {
    
    
            arr.splice(i, 1)
            i--
        }
    }
}

3.数组的filter方法
核心思想还是通过数组的indexOf方法来判断元素是否重复出现。

function unique(arr) {
    
    
    return arr.filter((item, index) => arr.indexOf(item) === index)
}

【注意】我们的unique方法中需要一个形参arr,arr是一个数组类型的数据,也就是说它是引用类型数据,在调用时,传入一个实参,实际上传入的是数组的地址,也就是说在函数内部的改变会直接影响外面的实参,因此1,2方法中不需要return值,arr数组会随着我们的处理发生改变,而3方法中为什么又需要return了呢? 这是因为数组的filter方法不改变原数组,他会返回一个新数组来保存结果,所以需要return一下。

4.数组的reduce+includes方法
利用累加器函数,每次判断,数组中是否已有当前元素,有的话不做处理,返回原数组,没有的话就把当前元素加进来。

function unique(arr) {
    
    
   return arr.reduce((prev, item) => prev.includes(item) ? prev : prev = [...prev, item], [])
}

5.先排序后去重
先对数组做升序排序,然后使用双指针法进行数组去重。

function unique(arr) {
    
    
	//不写参数时,默认按照字符串的升序排列,会导致数字的数组项排序出错,因此传入参数
	//(a, b) => a - b 表示升序排列
	//(a, b) => b - a 表示降序排列
    arr.sort((a, b) => a - b)
    let slow = 0;
    for (let fast = 1; fast < arr.length; fast++) {
    
    
        if (arr[fast] !== arr[slow]) {
    
    
            arr[++slow] = arr[fast]
        }
    }
    return arr.slice(0, ++slow)
}

这一做法改变了原数组的元素顺序,如果要求不能改变原数组顺序,则不适用。
sort方法会改变原数组。

6.ES6的Set数据结构
ES6提供了新的数据类型Set,它类似于数组,但是它的成员值都是唯一的,没有重复值。他会自动去除重复值。利用Set数据结构的特点进行数组去重。

function unique(arr) {
    
    
    return [...new Set(arr)]
}

这是最简单的一种方式。先new一个Set数据类型,把数组arr作为参数,那么就会得到一个Set数据,没有重复值,相当于给数组arr去重了,但是现在是Set类型,通过扩展运算符把它转回数组类型即可。(扩展运算符可以将类数组数据转为数组)

数组去重的方法还有很多种,大家可以继续总结。

猜你喜欢

转载自blog.csdn.net/weixin_43790653/article/details/124547577