JS中filter函数用if条件数组去重出错，直接返回判断却正常的原因

我来帮你拆解这个问题！首先咱们先把你没写完的if逻辑补全（我猜你是写了类似下面的代码）：

var x= ["apple","orange","banana","apple","mango"];
function checkdup(x) {
  let uniquearr= x.filter(function(val,index,arr){
    // return index == arr.indexOf(val); // 这个写法正常工作
    if(arr.indexOf(val) === index) {
      // 这里大概率是没写return，或者逻辑不完整？
    }
  });
  return uniquearr;
}

核心问题：filter必须明确收到布尔返回值 #

filter方法的回调函数需要返回一个布尔值（true/false），以此决定当前元素是否被保留到新数组中。

• 当你直接写return index == arr.indexOf(val);时，这个表达式本身会直接计算出true或false：arr.indexOf(val)返回元素第一次出现的索引，只有当前索引和这个值相等时，才是元素的首次出现，filter能正确识别并保留该元素。
• 但用if判断时，你很可能踩了这两个坑：
  1. 没有明确返回值：如果if块里只写了判断但没写return true，else块也没写return false，回调函数会默认返回undefined，而undefined在布尔判断中等同于false，最终所有元素都会被过滤，得到空数组。
  2. 逻辑书写错误：比如漏写等号、判断条件写反，导致返回的布尔值不符合预期。

正确的if写法示例 #

如果一定要用if判断，必须明确返回对应的布尔值：

var x= ["apple","orange","banana","apple","mango"];
function checkdup(x) {
  let uniquearr= x.filter(function(val,index,arr){
    if(arr.indexOf(val) === index) {
      // 元素首次出现，保留
      return true;
    } else {
      // 元素重复，过滤
      return false;
    }
  });
  return uniquearr;
}

console.log(checkdup(x)); // 输出 ["apple","orange","banana","mango"]

额外补充：为什么indexOf能判断重复？ #

arr.indexOf(val)会返回val在数组中第一次出现的索引位置。当当前元素的index和这个值相等时，说明这是该元素的首次出现；如果不相等，就意味着之前已经出现过这个元素，属于重复项。

内容的提问来源于stack exchange，提问作者Anil Tomar