经典案例:数组去重 ——花式题解

108 阅读7分钟

前言

我们不在之前的文章中已经讲解了很多js中的底层原理,方法等基础知识,今天就让我们来学以致用,通过经典的数组去重案例来将所学用到实际题目之中。

当我们提及数组去重时我们都能想到并使用的方法for循环让我们一起看一看我们这种方法

方法一:for循环

const arr =[1,2,3,4,2,1]


function unique(arr){
   let newArr = [];
   for(let i=0;i<arr.length;i++){
    //新数组是否具有该值
    for(var j=0 ;j<newArr.length;j++){
        if(arr[i]===newArr[j]){
            break;
        }
    }

    if(j===newArr.length){
        newArr.push(arr[i])
    }
}
return newArr
}
console.log(unique(arr));

我们来分析一下上面的代码:我们想要对代码进行去重处理,那我们要构造一个新的数组来存放去重后的数组,把准备阶段做完后,我们要先对原数组进行遍历将原数组的放入新数组中,在此阶段就要判断如果新数组中已有所遍历到的原数组的值就要遍原数组的下一个值,最终当j等于新数组的长度时,就表明遍历结束, 该方法就是通过开两个for循环进行将原数组的值放入新数组中。

方法二:for + indexOf + 方法三:for + includes

上面那个方法,我们通过准备一个新数组,不断往里面放值来实现,通过for循环遍历分析哪些值能放入新数组中实现那我们是否能优化上面那个方法呢?我们想一下数组里面是否有一个方法来直接判断数组里面是否存在一个元素呢?其实在数组里面自带了一个方法就是indexOf

这个方法是帮我们查找一个数组中是否存在某一值,如果存在就返回下标,如果没有就返回- 1

那我们就可以把代码优化如下所示:

const arr =[1,2,3,4,2,1]


function unique(arr){
   let newArr = [];
   for(let i=0;i<arr.length;i++){
    if(newArr.indexOf(arr[i])===-1){
        newArr.push(arr[i])
    }
   }
    
return newArr

}
console.log(unique(arr));

该方法通过判断数组中是否就有这个数,如果没有则push 进入新数组,如果没有则进行下一次循环,这样我们就通过i数组内自带的方法来节省掉了两个for循环的嵌套其实在数组中除了indexOf方法还给我们构造了includes()方法来判断数组中是否包含某一值

使用includes方法时当数组中存在某一值就返回true没有则返回false

根据上面对includes方法的描述可以将for循环的条件语句更改为如下方式:

 if(!newArr.includes(arr[i])===false){
        newArr.push(arr[i])
    }

上面所提供的方法就是我们在日常所碰见题目会使用的一些方法,先考虑是否在我们所操作的类型中有自己官方所构建的方法来实现,若没有则自己根据所学知识来构造一个方法来进行使用,那下面就让我们见一见不一样的方法

方法四:filter + sort

我们想要实现数组去重我们可以想一下,如果将一个数组先排 好了顺序,那只要第一项和第二项不相等那么这个数组第一项跟后面的每一项都不相等。那我们怎么实现数组排序呢?那就要使用到sort方法来进行实现

sort是一个专门为实现数组排序所打造的方法,我们先使用已有方法来进行操作,后面我们会有具体文章单独对排序

sort

我们先对sort方法如何使用先简单介绍一下,sort是一个构建在Array原型中的方法,当我们使用sort方法后原数组的顺序会改变也就是说使用sort方法没有空间复杂度,没有为我们开辟一个新的数组空间来存放排序后的数组(直接在原始空间进行排序再放回原空间)我们可以根据一份代码实现来进行解释

const arr =[1,2,3,4,2,1]

arr.sort()

console.log(arr);

屏幕截图 2024-12-02 012751.png

同时如果我们不想让它使用升序排序我们可以使用箭头函数来进行操作

const arr =[1,2,3,4,2,1]

arr.sort((a,b) => {
    return b-a
})
console.log(arr);

我们可以理解return返回值下如果a-b则升序,b-a则降序排列。介绍完排序sort方法后我们来看一下数组身上自带的方法filter去遍历

filter方法

arr.filter((item,index,arr) =>{}函数中拥有三个参数,item表示:数组的第一项,index表示:数组的下标,arr表示:当前这个数组这个方法会不断的遍历这个数组,知道遍历结束,那在我们写代码的过程中可以节省掉for循环的部分,那就让我们来看一下这两个方法结合来实现数组的去重操作,代码如下:

const arr =[1,2,3,4,2,1]

function unique(arr){
    let newArr = [...arr]
    //[1,1,2,2,3,4]
    return newArr.sort().filter((item,index,array) => {      
        return item !== array[index+1] 
    })
   
}
console.log(unique(arr));
//输出
//[1,2,3,4]

我们使用sort()对数组进行排序,再去使用filter()方法对没有重复出现的元素进行返回来实现数组去重。我们通过观察上面代码可以发现newArr可以直接替换为[...arr],根据这一特点我们可以对代码再次进行简化:

const arr =[1,2,3,4,2,1]

function unique(arr){
   return [...arr].sort().filter((item,index,array)=> !index || item != array[index-1])
}
console.log(unique(arr));

方法五:filter + {}

对象这个特殊的数据结构想必大家并不陌生,它是时刻保持键值对的特点,在数组中可以存在重复项,而在对象这种数据结构天生就不能存储两个重复的key,若出现两个重复的第二个自动会覆盖,第一个会失效,那我们根据对象的特点试想我们能否将遍历的数组和对象进行联系。

我们来看我们能不能将我们可以将遍历的数组的第一个值放入对象中作为对象的key,值去放对象的下标,那么在后面出现相同的数据时就会把相同的key值规避掉了。那按照我们根据上面思路,我们现在就要思考是否能够将一个对象的所有key值读到来,那我们就要引入Object.keys(obj)的方法

注意对象这种数据结构当中的key值读取出来一定是字符串

那就让我们来看一下代码实现如下所示:

let arr =[1,2,3,1,2]
function unique(arr){
    let obj = {
        1:true
    }
    for(let i=0;i<arr.length;i++){
        if(!obj[arr[i]]){ //若对象中没有该元素则将其放入obj中,并赋值为true
            obj[arr[i]] = true
        }
    }
//通过keys()先获取obj中的key,再通过map()方法将key转换为Number类型
    return Object.keys(obj).map(Number)
}
console.log(unique(arr));

我们可以发现用这种方法对原数组进行遍历同样可以对数组去重,那我们可以学以致用通过使用filte来简化代码

let arr =[1,2,3,1,2]
function unique(arr){
    let obj = {}
    return arr.filter((item,index,array) => { 
        return obj[item] ? false : (obj[item]=true)
    } )
}
console.log(unique(arr));

方法六:Set

在前面我们通过使用对象这种数据结构来实现数组去重之后,那么js中有没有一种数据结构可以实现其中只包含不重复的元素呢?js官方设计了一种数据结构Set(集合) ,在这个数据结构中不包含重复元素,下面我们来看看如何使用Set

let s = new Set([1,2,3,1]) //成员唯一的
s.add(1)
s.add(2)
s.add(3)
s.add(1)


console.log([...s]);

我们来看一下输出结果:

image.png

我们可以看到当我们使用new创建了一个Set集合并且往其中添加了1,2,3,1后,在打印的时候我们只打印出来了1,2,3。那个重复出现的1被删除了,根据这一特点我们可以用来进行数组去重。下面我们来看看如何利用Set进行去重:

let arr = [1,2,3,1,2]
function unique(arr){
    return [...new Set(arr)]
}
console.log(unique(arr)); 

上面这六种方法都是对数组去重的主要方法,如果让各位读着大大觉得鄙人写的还不错希望能够点点赞

13g888piCKnt.jpg