技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

[示例]详解JavaScript中删除数组重复项的三种方法

作者:admin    时间:2022-6-1 21:59:20    浏览:

JavaScript如何从数组中删除重复项?在任何编程语言的面试中被广泛询问的问题之一(我们将在这里讨论 JavaScript)是在数组中查找唯一元素或从数组中删除重复项,为解决在 JavaScript 中删除数组中的重复项的广泛问题,本文将介绍三种常用的方法。

JavaScript数组中删除重复项的三种方法

使用 Sets

在本示例中,我们将声明一个包含重复元素的数组,即 animals 和一个包含所有唯一元素的数组 unique

Set 对象存储任何类型的唯一值,无论是原始值还是对象引用。

在这里,为了删除重复项,我们将 animals 数组转换为 Setnew Set()将隐式删除重复元素。然后我们将此集合转换回 unique 数组。

// 使用Set删除数组重复项  
let animals = ["Lion", "Rabbit", "Mouse", "Monkey", "Lion","Ape"]  
let unique = [...new Set(animals)]  
console.log(unique)  

输出

['Lion', 'Rabbit', 'Mouse', 'Monkey', 'Ape']

使用Set删除数组重复项

使用 Filter

我们先看示例,然后分析其中使用了什么方法和为什么使用。

// 使用filter方法删除数组重复项  
let animals = ["Lion", "Rabbit", "Mouse", "Monkey", "Lion","Ape"]  
let usingFilter = () => {  
return unique = animals.filter(function(item,index){  
      return animals.indexOf(item) == index;  
   });  
}  
console.log(usingFilter())   

输出

['Lion', 'Rabbit', 'Mouse', 'Monkey', 'Ape']

使用filter删除数组重复项

代码解释

indexOf()

此方法返回数组中元素第一次出现的索引。我们使用重复项的逻辑是索引与其indexOf()值不同的项,从这里我们返回当前索引和indexOf()值相等的元素。

filter()

要删除重复项,我们使用filter()方法仅包含当前索引与其indexOf()值匹配的元素。我们将这些值存储在一个名为unique的数组中,并通过调用 filter() 函数返回它们。

为了更好地理解,在我们的例子中,程序执行逻辑是这样的:

当前索引 -> indexOf(),

  • 对于值“Lion”,我们有:0 -> 0, 4 -> 0。(等式不成立)
  • 对于值“Rabbit”,我们有:1 -> 1。(等式成立,唯一元素)
  • 对于值“Mouse”,我们有:2 -> 2。(等式成立,唯一元素)
  • 对于值“Monkey”,我们有:3-> 3。(等式成立,唯一元素)
  • 对于值“Ape”,我们有:5 -> 5。(等式成立,唯一元素)

过滤这些独特的元素并将它们存储在一个 独特的数组中并返回它们。

如果我们需要使用此方法在数组中查找重复项,我们只需将相等 (==) 条件改为 (!=) 即可。

使用 forEach

同样,我们先看示例,然后再了解这里使用的术语。

// Remove duplicates in array using forEach loop method  
let animals = ["Lion", "Rabbit", "Mouse", "Monkey", "Lion","Ape"]  
let unique = [];  
animals.forEach((item) => {  
   if(!unique.includes(item)){  
      unique.push(item);  
   }  
});  
console.log(unique);  

输出

['Lion', 'Rabbit', 'Mouse', 'Monkey', 'Ape']

使用forEach删除数组重复项

代码解释

forEach

用于迭代 animal 数组的每个元素 。

includes()

如果元素在数组中,则返回 true,否则返回 false

push()

它将新项目添加到数组的末尾。

该方法背后的逻辑是我们声明了一个空 unique 数组,然后我们迭代 animal 数组的每个元素, 检查 unique 数组是否包含(或具有)该元素,如果没有,条件就变为true,那么我们将该元素推送到 unique 的数组中。所以,通过这个过程,我们得到了 unique 数组中的所有唯一元素并打印出来。

总结

在本文中,我们学习了三种重要的、简短且易于掌握的方法来从数组中删除重复项或从数组中查找重复项或唯一元素。还有许多其他方法可以做同样的事情,但这些方法很容易记住。

参考文章

相关文章

标签: 数组  Set  filter  forEach  
x
  • 站长推荐
/* 左侧显示文章内容目录 */