在前端开发中，处理数据是非常常见的操作。其中，遇到重复数据问题是非常普遍的情况。在传统的 JavaScript 语言中，可以利用 indexOf() 方法来判断一个元素在数组中是否存在。但它有一个缺陷，即无法确定重复数据出现的位置。这时，ES7 中新添加的 Array.prototype.includes() 方法就能很好地解决这个问题。
Array.prototype.includes() 方法介绍
Array.prototype.includes() 方法用于判断一个数组是否包含某个特定的元素，并返回布尔值。它是 ES7 中新增的一个实例方法，所以需要运行在支持 ECMAScript 7（ES2016）的环境中。该方法的语法如下：
arr.includes(searchElement[, fromIndex])
searchElement：必选，代表要查找的元素。fromIndex：可选，代表开始查找的位置。默认值是 0，如果传入的值为负数，则从数组末尾开始查找。
该方法返回一个布尔值，表示是否找到了指定的元素。
实现重复数据的查找
我们可以通过 Array.prototype.includes() 方法，很简单地从一个数组中找出重复的元素。下面是一个示例代码：
const arr = [1, 2, 3, 1, 2, 4, 5, 6, 3];
const duplicateArr = [];
for (let i = 0; i < arr.length; i++) {
if (arr.indexOf(arr[i]) !== i && !duplicateArr.includes(arr[i])) {
duplicateArr.push(arr[i]);
}
}
console.log(duplicateArr); // [1, 2, 3]代码分析：
这个示例代码从数组的第一个元素开始循环，对于每个元素，我们可以使用 indexOf() 方法查找它是否已经出现在数组中，如果是重复元素，则将它添加到 duplicateArr 数组中。
我们使用了嵌套的 if 语句。第一个条件 arr.indexOf(arr[i]) !== i，表示如果查到了该元素并且它已经不是第一次出现，即为重复元素。而第二个条件 !duplicateArr.includes(arr[i])，则表示该元素没有被加入到 duplicateArr 数组中。
从一个更复杂的数组中查找重复数据
在实际场景中，数组的元素类型可能是复杂的对象或者是字符串， 数组可能包含多个属性或是嵌套的子数组。在这种情况下，我们需要对每个属性或嵌套数组进行处理，才能有效地查找出重复数据。下面是一个示例代码：
-- -------------------- ---- -------
----- --- - -
- --- -- ----- ------- --
- --- -- ----- -------- --
- --- -- ----- -------- --
- --- -- ----- ------- --
- --- -- ----- -------- --
- --- -- ----- ------- --
- --- -- ----- ------- --
- --- -- ----- -------- --
- --- -- ----- -------- -
--
----- ------------ - ------------------------ ------------- ------------- -- -
----- -------------- - ----------------------
------- --
---------- --- --------------- --
------------ --- -----------------
--
-- --------------- --- --- -
-- ------------------------------------ -
--------------------------------- - --
-
-- ------------- - --------------- -
------------------------------------
-------------------------------------------------------
-
- ---- -
------------------
----------------
-------- --------------
---
-
------ ------------
-- ----
-------------------------- -- ----- -- ----- -------- ------ -- -------- --- ---- ---- -- ----- --------- ------ -- -------- --- ---- ---- -- ----- --------- ------ -- -------- --- ----代码分析：
这个示例代码中，我们使用 reduce() 方法来处理数组，并使用自定义函数来实现查找。自定义函数有三个参数：accumulator，currentValue 和 currentIndex。其中，accumulator 参数为一个空数组，currentValue 是当前遍历到的元素，currentIndex 是当前元素的下标。
在 reduce 函数返回的最终结果中，我们将重复的元素存储在一个含有 count 和 indexes 属性的对象中。其中，count 属性表示该元素在原始数组中出现的次数，而 indexes 属性则表示该元素出现的位置。
我们使用了嵌套的 if 语句进行条件判断。第一个条件 duplicateIndex !== -1 表示如果查到了该元素并且它已经不是第一次出现，即为重复元素。而第二个条件 currentIndex > duplicateIndex 表示我们只需要记录该元素在原始数组中最后一次出现的位置。
总结
ES7 中的 Array.prototype.includes() 方法在处理重复数据问题中是一种快速有效的方法。它的优势在于能够确定重复数据出现的位置，对于复杂的数组来说，只需要稍作处理即可实现查找。同时，从 Lodash、UnderscoreJS 等第三方库中，我们也可以找到一些便捷的实现方式。
无论使用哪种方法，它们的目的都是为了更好地处理数据，以提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64defa2cf6b2d6eab3a1eb2c