为何Array.filter方法返回空数组？技术问题求助

兄弟我太懂你这种明明看着逻辑没问题，但结果却出乎意料的郁闷了！咱们先一步步拆解问题，找出到底哪里出了岔子。

首先先算一下你给出的几个元素的artist+name长度之和：

• Adele（5） + 25（2）=7，远小于25，应该被保留
• Drake（5） + Views（5）=10，也符合条件
• Beyonce（7） + Lemonade（8）=15，同样满足要求

那为什么过滤后返回空数组？大概率是你的代码里犯了这几个常见错误之一：

常见错误排查 #

• 条件写反了：比如你不小心把<写成了>，那所有符合要求的元素都会被过滤掉，自然返回空数组。
• 回调函数没返回值：如果你的filter回调里漏写了return，比如写成这样：

  const filtered = musicData.filter(item => {
    const total = item.artist.length + item.name.length;
    total < 25; // 这里没写return！
  });
  

  这种情况下每个迭代都会返回undefined，被当成false处理，所以过滤结果为空。
• 属性名拼写错误：比如把artist写成了artists，或者name写成了title，这样获取到的length会是undefined，相加后得到NaN，而NaN < 25的结果是false，所有元素都被过滤掉。

正确的代码示例 #

你可以试试这段代码，同时加上打印日志验证每个元素的长度：

const musicData = [
  { artist: 'Adele', name: '25', sales: 1731000 },
  { artist: 'Drake', name: 'Views', sales: 1608000 },
  { artist: 'Beyonce', name: 'Lemonade', sales: 1554000 }
];

const filteredMusic = musicData.filter(item => {
  const totalLength = item.artist.length + item.name.length;
  console.log(`${item.artist} - ${item.name} 总长度：${totalLength}`);
  return totalLength < 25;
});

console.log('过滤结果：', filteredMusic);

运行这段代码应该会返回所有三个元素，你可以对比自己的代码，看看哪里不一样。

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