本文主要介绍用JS实现阵列重复数据删除的七种方法。以下文章以JS阵列重复数据删除的相关信息展开全文内容,有一定的参考价值,有需要的朋友可以参考一下。
: 目录
1.使用Set() Array.from()
2.使用双层循环阵列拼接方法
3.使用数组的indexOf方法
4.使用数组的includes方法。
5.使用数组的filter() indexOf()
6.使用地图()
7.使用该对象
例:
删除下列数组中的重复元素(以多种数据类型为例)const arr=[1,2,2, abc , abc ,真,真,假,假,未定义,未定义,NaN,NaN]
1.使用Set() Array.from()
Set对象:
是一组值,你可以按照插入的顺序迭代它的元素。集合中的元素只会出现一次,即集合中的元素是唯一的。Array.from() 方法:
为类似的数组或迭代对象创建一个新的浅复制数组实例。const result=Array.from(新集合(arr))
console.log(result) //[ 1,2, abc ,真,假,未定义,NaN ]
注意:
以上对于nan和undefined类型的重复数据删除也是有效的,因为NaN和undefined都可以存储在集合中,NaN被视为相同的值(虽然在js: nan!==NaN).2.使用双层循环阵列拼接方法
通过两层循环逐个比较数组元素,然后通过拼接法删除重复元素。此方法无法对NaN进行重复数据消除,因为NaN!==南.
函数removeDuplicate(arr)
设len=arr.length
for(设I=0;我leni ) {
for(设j=I ^ 1;j lenj ) {
if (arr[i]===arr[j]) {
排列拼接(j,1)
len-//减少周期数以提高性能
J-//确保添加后J的值不变。
}
}
}
返回arr
}
const结果=removeDuplicate(arr)
console.log(result) //[ 1,2, abc ,真,假,未定义,NaN,NaN ]
3.使用数组的indexOf方法
创建一个新的空数组,遍历需要进行重复数据消除的数组,并将数组元素存储在新数组中。在存储之前,判断数组是否已经包含当前元素,否则,存储当前元素。这个方法也不能复制NaN。
indexOf() 方法:
返回指定值在调用它的String对象中第一次出现的索引,并从fromIndex开始搜索。如果找不到该值,则返回-1。函数removeDuplicate(arr)
const newArr=[]
arr.forEach(item={
if (newArr.indexOf(item)===-1) {
newArr.push(项目)
}
})
Return newArr //返回新数组
}
const结果=removeDuplicate(arr)
console.log(result) //[ 1,2, abc ,真,假,未定义,NaN,NaN ]
4.使用数组的includes方法。
此方法的逻辑与indexOf方法的逻辑相同,只是includes方法用于确定是否有重复的元素。
includes()方法:
用于确定数组是否包含指定的值。根据情况,如果是则返回true,否则返回false。函数removeDuplicate(arr)
const newArr=[]
arr.forEach(item={
如果(!newArr.includes(item)) {
newArr.push(项目)
}
})
返回newArr
}
const结果=removeDuplicate(arr)
console.log(result) //[ 1,2, abc ,真,假,未定义,NaN ]
注意:
为什么includes能检测到NaN包含在数组中,这涉及到includes底层的实现。下图显示了由includes实现的部分代码。判断是否包含某个元素时,会调用sameValueZero方法进行比较。如果是NaN,则使用is NaN()进行转换。简单测试includes()对NaN的判断:
const testArr=[1, a ,NaN]
console . log(testarr . includes(NaN))//true
5.使用数组的filter() indexOf()
filter方法会将满足条件的元素存储在一个新的数组中,并结合indexOf方法进行判断。
filter() 方法:
将创建一个新数组,其中包含由所提供的函数实现的测试的所有元素。函数removeDuplicate(arr)
return arr.filter((item,index)={
return arr . index of(item)===index
})
}
const结果=removeDuplicate(arr)
console.log(result) //[ 1,2, abc ,真,假,未定义]
注意:
这里的输出结果不包含NaN是因为indexOf()无法判断NaN,即arr.indexOf(item)===index返回假结果。测试如下:const testArr=[1, a ,NaN]
console . log(testarr . index of(NaN))//-1
6.使用地图()
Map是JavaScript提供的一种数据结构,采用键值对的形式。数组元素存储为Map的键,前端训练再结合has()和set()方法判断键是否重复。
Map 对象:
用于保存键值对,可以记住键原来的插入顺序。任何值(对象或原始值)都可以用作键或值。函数removeDuplicate(arr)
const map=新地图()
const newArr=[]
arr.forEach(item={
如果(!Map.has(item)) {//has()用于判断Map是否为item的属性值。
Map.set(item,true) //使用set()设置地图中的项目,并将其属性值设置为true。
newArr.push(项目)
}
})
返回newArr
}
const结果=removeDuplicate(arr)
console.log(result) //[ 1,2, abc ,真,假,未定义,NaN ]
注意:
还可以使用Map()对NaN进行去重,因为Map在判断时认为NaN等于NaN,其他所有值都是根据===运算符的结果进行判断。7.使用该对象
它的实现思路和Map()类似,主要是利用了对象的属性名不能重复的特性。
函数removeDuplicate(arr)
const newArr=[]
const obj={}
arr.forEach(item={
如果(!obj[item]) {
newArr.push(项目)
对象[项目]=真
}
})
返回newArr
}
const结果=removeDuplicate(arr)
console.log(result) //[ 1,2, abc ,真,假,未定义,NaN ]
这就是本文关于实现阵列重复数据消除的七种JS方法。有关JS阵列重复数据消除的更多信息,请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们!