JavaScript filter方法未返回数组首元素 console.log显示已返回问题排查

问题根因 #

你代码的问题出在filter回调的返回值逻辑上：

• Array.prototype.filter的回调要求返回布尔值，返回真值时当前元素才会被保留到结果数组，返回假值则会被过滤。
• 你在条件成立时直接返回了当前元素el，当el等于0时，0属于JavaScript的假值，哪怕条件成立，filter也会判定返回值为false，直接把0过滤掉。
  你看到控制台打印了return 0，只能说明el != a[i-1]的判断通过进入了分支，但不代表filter会保留当前元素，问题就出在返回值的类型上。

另外还有一个隐藏隐患：Array.prototype.sort()默认按字符串Unicode码点排序，处理大于10的数字时会出现排序错误，比如[10, 2]默认排序会得到[10, 2]，处理数字数组需要传入比较函数(a, b) => a - b。

修复代码 #

将filter的返回值改为布尔值，同时修正排序逻辑即可：

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [2, 3, 1, 0, 5];

// 合并两个数组
const combined = arr1.concat(arr2);

// 修正数字排序逻辑
combined.sort((a, b) => a - b);

// 过滤掉和前一个元素相同的元素
const result = combined.filter((el, i, a) => {
  // 直接返回布尔判断结果，不要返回元素本身
  return el !== a[i-1];
});

// 打印结果
console.log(result); // 输出 [0, 1, 2, 3, 4, 5]

更简洁的实现方案 #

如果不需要兼容过低版本浏览器，用Set去重代码更精简：

const result = [...new Set([...arr1, ...arr2])].sort((a, b) => a - b);

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