JS中Map函数为何返回Undefined？如何筛选大于0的数值数组？

嘿，我来帮你搞定这两个问题～

为什么Map会返回Undefined？ #

这是map函数的特性导致的：map会为数组中的每一个元素生成一个对应返回值，如果你没有在回调里明确返回内容，JS会默认返回undefined。

看你的代码：

var total_percents = cars.map(function(element) { 
  var savings_percent = Number(element[0].getAttribute("percent-savings")); 
  if (savings_percent > 0) return savings_percent; 
}); 

当savings_percent <= 0的时候，你的回调函数没有return语句，这时候JS就会自动给这个位置填充undefined，所以最终数组里会混着这些不符合条件的undefined项。

怎么只返回数值大于0的数组？ #

要得到纯满足条件的数组，最直观的方式是先过滤再映射——先用filter筛选出符合条件的元素，再用map提取数值。这样能避免生成多余的undefined，代码也更清晰：

var total_percents = cars
  // 第一步：筛选出savings_percent>0的元素
  .filter(function(element) {
    var savings_percent = Number(element[0].getAttribute("percent-savings"));
    return savings_percent > 0;
  })
  // 第二步：提取符合条件的数值
  .map(function(element) {
    return Number(element[0].getAttribute("percent-savings"));
  });

如果你想减少一次遍历提升效率（虽然大多数场景下这点差异可以忽略），也可以用reduce一步完成筛选和收集：

var total_percents = cars.reduce(function(result, element) {
  var savings_percent = Number(element[0].getAttribute("percent-savings"));
  if (savings_percent > 0) {
    result.push(savings_percent);
  }
  return result;
}, []); // 初始值是空数组

另外提醒一下：如果element[0].getAttribute("percent-savings")返回的不是有效数字（比如空字符串、非数字字符），Number()会转换成NaN，而NaN > 0是false，这些元素会被自动过滤掉，这应该是符合你预期的～

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