如何去除给定数组中的重复项应该是Javascript面试中最常见的问题。最常见的有三种方式:Set、Array.prototype.filter和Array.prototype.reduce。对于简单数据的数组,我最喜欢Set,别的不说,写起来简单。constoriginalArray=[1,2,'咩',1,'SuperBall','咩','咩','SuperBall',4]constbySet=[...newSet(originalArray)]constbyFilter=originalArray.filter((item,index)=>originalArray.indexOf(item)===index)constbyReduce=originalArray.reduce((unique,item)=>unique.includes(item)?unique:[...unique,item],[])使用Set让我们来看看Set是什么。Set对象允许您存储任何类型的唯一值,无论它是原始值还是对象引用。https://developer.mozilla.org...首先,Set中只允许唯一值唯一性与原始值或对象引用constbySet=[...newSet(originalArray)]这一段的操作,我们拆分来看:constoriginalArray=[1,2,'咩',1,'SuperBall','咩','咩','SuperBall',4]constuniqueSet=newSet(originalArray)//获取Set(5)[1,2,"咩","SuperBall",4]constbySet=[...uniqueSet]//获取Array(5)[1,2,"咩","SuperBall",4]Set转Array时,也可以使用Array.from(set)。使用Array.prototype.filter要理解filter方法为什么可以去重,还需要注意另一个方法。indexOfindexOf()方法返回可以在数组中找到给定元素的第一个索引,如果不存在则返回-1。https://developer.mozilla.org...constbeasts=['ant','bison','camel','duck','bison'];console.log(beasts.indexOf('bison'));//expectedoutput:1//startfromindex2console.log(beasts.indexOf('bison',2));//expectedoutput:4console.log(beasts.indexOf('giraffe'));//expectedoutput:-1filter()方法创建一个新数组,其中包含通过提供的函数完成的测试的所有元素。https://developer.mozilla.org...filter方法接受两个参数:第一个参数:一个回调函数,filter会将数据中的每一项传递给该函数,如果函数返回为真值,数据将被保存,如果返回假值,数据将不会出现在新生成的数据中第二个参数:回调函数中this的指向我们将上面的去重方法改写如下一眼就能看出整个过滤器的执行过程。constoriginalArray=[1,2,'咩',1,'SuperBall','咩','咩','SuperBall',4]consttable=[]constbyFilter=originalArray.filter((item,index)=>{//如果找到的索引与当前索引一致,则保留该值constshouldKeep=originalArray.indexOf(item)===indextable.push({序号:index,value:item,shouldkeep:shouldKeep?'Keep':'Delete'})returnsshouldKeep})console.log(byFilter)console.table(table)使用Array.prototype.reducereduce()方法对数组中的每个元素执行一个你提供的reducer函数(按升序排列),结果聚合成一个单一的返回值。https://developer.mozilla.org...Array.prototype.reduce方法接受两个参数:Callback:回调函数,它可以接收四个参数Accumulator:累加器,这个其实是为了让一个点许多人忽略的是,累加器实际上可以是任何类型的数据。CurrentValue:当前值CurrentIndex:当前值的索引SourceArray:源数组InitialValue:累加器的初始值,就像累加器一样,这个参数总是被大多数人忽略。和filter章节一样,先看看reduce的执行过程:constoriginalArray=[1,2,'咩',1,'SuperBall','咩','咩','SuperBall',4]constbyReduce=originalArray.reduce((unique,item,index,source)=>{constexist=unique.includes(item)constnext=unique.includes(item)?unique:[...unique,item]console.group(`遍历${index}`的值)console.log('当前累加器:',unique)console.log('当前值:',item)console.log('已添加到累加器?',exist)console.log('新值',next)console.groupEnd()returnnext},[])
