如何在 JavaScript 数组中查找重复值?

javascriptweb developmentfront end technology

在本教程中,我们将讨论如何使用不同的方法或方法在 JavaScript 数组中查找重复或重复的值以解决此问题。

以下是我们可以用来解决查找重复项问题的方法或方法列表 -

  • 通过简单遍历数组
  • 使用 filter() 和 indexOf() 方法
  • 使用 Set 对象和 has() 方法

让我们讨论上述所有在 JavaScript 数组中查找重复项的方法 -

通过简单遍历数组

使用嵌套 for 循环遍历数组以查找重复项是最基本和最简单的方法,它需要O(n2) 时间和 O(n) 额外空间来解决问题。

在此方法中,我们使用两个嵌套的 for 循环,其中第一个循环指示我们在剩余数组中搜索重复项的数组项,而另一个循环将遍历数组以查找剩余项并将其与第一个循环包含的项进行比较。

算法

  • 步骤 1 - 首先,我们需要创建一个 JavaScript 数组,我们将在其中搜索重复元素。
  • 步骤 2 - 我们将创建一个新的空数组,其中包含原始数组中重复的项目。
  • 步骤 3 - 在下一步中,我们将创建一个 JavaScript 函数,其中包含使用嵌套 for 循环查找重复项的原始逻辑,并更新在上一步中重复的值。更新新数组后,它将返回它。
  • 步骤 4 - 在最后一步中,我们将显示新数组包含的项目,因为这些值是原始数组中具有重复项的值。

示例 1

下面的代码示例将展示如何在数组中获取重复值。

<!DOCTYPE html> <html> <body> <h3>Finding duplicate values in a JavaScript array</h3> <p>Here, we will find the repeating values in the given array.</p> <p>Original array: [6, 9, 15, 6, 13, 9, 11, 15]</p> <p id="result"></p> <script> //simple traversal method let array = [6, 9, 15, 6, 13, 9, 11, 15]; let index = 0, newArr = []; const length = array.length; // to get length of array function findDuplicates(arr) { for (let i = 0; i < length - 1; i++) { for (let j = i + 1; j < length; j++) { if (arr[i] === arr[j]) { newArr[index] = arr[i]; index++; } } } return newArr; } document.getElementById('result').innerHTML = 'Duplicate values are: <b>' + findDuplicates(array) + '</b>'; </script> </body> </html>

在上面的例子中,我们将原始array作为数组,将新数组作为newArrfindDuplicates()方法以array为参数,使用两个嵌套的for循环遍历它,找出数组中的重复项,并使用原始数组中重复或有重复项的值更新newArray

使用filter()和indexOf()方法

这是在数组中查找重复项的最短和最简单的方法,其中filter()方法遍历数组并根据定义的条件过滤项目并返回一个新数组,而indexOf()给出传递项目的索引。

步骤

  • 步骤 1 − 在此步骤中,我们需要定义一个要操作的数组。
  • 步骤 2 − 定义包含使用 filter() 和 indexOf() 方法查找重复项的逻辑的 JavaScript 函数。
  • 步骤 3 − 第三步包含在用户屏幕上显示输出数据的方式。

示例 2

<!DOCTYPE html> <html> <body> <h3>Finding duplicate values in a JavaScript array</h3> <p>Here, we will find the repeating values in the given array.</p> <p>Original array: [1, 4, 8, 2, 4, 1, 6, 2, 9, 7]</p> <p id="result"></p> <script> // indexOf() and filter() var array = [1, 4, 8, 2, 4, 1, 6, 2, 9, 7]; function findDuplicates(arr) { return arr.filter((currentValue, currentIndex) => arr.indexOf(currentValue) !== currentIndex); } document.getElementById('result').innerHTML = 'Duplicate values are: <b>' + findDuplicates(array) + '</b>'; </script> </body> </html>

在上面的例子中,array 是传递给 findDuplicates() 方法的原始数组,其中 filter() 方法通过将 currentIndex 与数组中出现的 currentValue 的索引进行比较来过滤数组。

使用 Set() 对象和 has() 方法

在此方法中,我们将使用 JavaScript 的 set 对象和 has() 方法,其中 set 对象将允许我们存储任何类型的唯一值,并且 has() 方法用于检查当前数组元素是否存在于列表中。

步骤

  • 步骤 1 − 第一个步骤涉及创建一个虚拟数组并设置集合对象中的唯一值。
  • 步骤 2 - 在下一步中,我们将使用 filter() 方法遍历和过滤数组,方法是使用 has() 方法检查集合是否包含当前元素。
  • 步骤 3 - 下一步是在用户屏幕上显示重复或重复的元素。

示例 3

<html> <body> <p>Original array: [3, 8, 7, 5, 3, 9, 8]</p> <p id="result"></p> <script> // using set() and has() method const array = [3, 8, 7, 5, 3, 9, 8]; const uniqueSet = new Set(array); const filteredElements = array.filter(currentValue => { if (uniqueSet.has(currentValue)) { uniqueSet.delete(currentValue); } else { return currentValue; } } ); document.getElementById('result').innerHTML = 'Duplicate values are: <b>' + filteredElements + '</b>'; </script> </body> </html>

在上面的例子中,array 是初始数组,而 uniqueSet 是仅包含一次 array 中的所有值的集合。之后,我们使用 filter() 函数,其中使用 uniqueSethas() 方法检查 array 中是否存在重复值,它将返回在删除 uniqueSet 和数组中共有的项目后剩余的数组中的所有值。

在本教程中,我们了解了在数组中查找重复值的三种不同方法,其中所有方法都返回与特定数组关联的重复值


相关文章