使用ES6数组辅助函数reduce()和find()去重时0重复的问题排查

哦，这个坑我之前也踩过！问题出在你判断条件里的!previous.find(...)这部分，我们一步步拆解来看：

首先，Array.find()的行为是：找到匹配元素就返回该元素本身，找不到才返回undefined。

当处理数组里的第二个0时：

• 此时previous数组已经有一个0了，previous.find(element => element === 0)会返回找到的那个0
• 但在JavaScript中，0是一个假值，所以!0的结果是true
• 这就导致你的条件判断成立，第二个0被错误地push进了结果数组

而其他元素比如1、'a'都是真值，当find()返回它们时，!元素的结果是false，所以不会重复添加——这就是为什么只有0出现了两次，其他元素都正常去重了。

给你几个可行的解决方案：

方案1：用Array.some()替代find() #

some()方法直接返回布尔值（是否存在匹配元素），完全不会受元素自身真假值的影响，最适合这个场景：

var arrayWithDuplicates = [0, 0, 1, 2, 3, 3, 4, 4, 'a', 'a'];
var arrayWithUniqueValues = arrayWithDuplicates 
.reduce((previous, item) => {
 if(!previous.some(element => element === item)) {
 previous.push(item)
 }
 return previous;
}, []);
console.log('arrayWithUniqueValues', arrayWithUniqueValues)
// 输出：arrayWithUniqueValues [ 0, 1, 2, 3, 4, 'a' ]

方案2：直接判断find()是否返回undefined #

如果不想换方法，也可以直接检查find()的返回值是不是undefined，避开假值干扰：

var arrayWithDuplicates = [0, 0, 1, 2, 3, 3, 4, 4, 'a', 'a'];
var arrayWithUniqueValues = arrayWithDuplicates 
.reduce((previous, item) => {
 if(previous.find(element => element === item) === undefined) {
 previous.push(item)
 }
 return previous;
}, []);
console.log('arrayWithUniqueValues', arrayWithUniqueValues)

方案3：用ES6的Set做极简去重 #

如果你的数组里都是原始类型（数字、字符串、布尔值这些），直接用Set来实现去重会更简洁高效：

var arrayWithDuplicates = [0, 0, 1, 2, 3, 3, 4, 4, 'a', 'a'];
var arrayWithUniqueValues = [...new Set(arrayWithDuplicates)];
console.log('arrayWithUniqueValues', arrayWithUniqueValues)
// 输出：arrayWithUniqueValues [ 0, 1, 2, 3, 4, 'a' ]

内容的提问来源于stack exchange，提问作者Joginder Pawan Kumar