JS中filter函数内console.log与return结果差异问题

首先还原你的代码和执行结果：

你的代码：

function expandedForm(num) { 
  let arr = num.toString().split('').reverse().filter(function(el, ind){ 
    console.log("iter:"+ el * Math.pow(10,ind)); 
    return (el*Math.pow(10,ind)); 
  }); 
  console.log(arr); 
  return arr; 
} 
expandedForm(402);

执行输出：

iter:2
iter:0
iter:400
[ '2', '4' ] => [ '2', '4' ]

核心原因：你误解了filter函数的工作逻辑！ #

我来拆解关键几点：

• filter是「筛选原数组元素」，不是返回计算后的值：filter的回调返回值只是一个判断条件——它会把返回值转换成布尔值，true就保留原数组的当前元素，false就丢弃。你最终得到的arr里的元素，始终是调用filter的原数组（也就是num.toString().split('').reverse()后的['2','0','4']）里的元素，不是你计算后的el*Math.pow(10,ind)结果。

• console.log和return的内容完全是两回事：

  • 你在console.log里打印的是计算后的数值：第一个循环el是'2'、ind是0，计算得2*10^0=2；第二个循环el是'0'，计算得0*10^1=0；第三个循环el是'4'，计算得4*10^2=400。
  • 而return的el*Math.pow(10,ind)是用来做筛选判断：在JS里0属于假值，所以计算结果为0时，filter会丢弃原元素'0'；2和400是真值，所以保留对应的原元素'2'和'4'。这就是最终arr是['2','4']的原因。

补充验证：显式写出判断逻辑 #

如果把回调里的return改成Boolean(el*Math.pow(10,ind))，结果完全一致，因为JS会自动把你的计算表达式转换为布尔值做判断：

let arr = num.toString().split('').reverse().filter(function(el, ind){ 
  console.log("iter:"+ el * Math.pow(10,ind)); 
  // 显式转换为布尔值，和原代码效果相同
  return Boolean(el*Math.pow(10,ind)); 
}); 

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