JS箭头函数返回false而非true的错误排查

嘿，我来帮你定位代码里的问题，以及解释为什么会出现这种逻辑和实际结果不符的情况！

错误核心原因 #

你的代码里有两个关键问题，共同导致了函数返回false：

• 函数调用时未传入参数：你定义的箭头函数声明了三个参数(distanceToPump, mpg, fuelLeft)，但调用zeroFuel()时没有传递任何值，这会导致函数内部的这三个参数值都是undefined。
• 参数遮蔽外部变量：函数参数的名字和你外部定义的全局变量完全一样，这会导致函数内部优先使用局部参数（也就是undefined），而不是外部的实际数值。

具体执行过程拆解 #

当你调用zeroFuel()时：

1. 函数内部的distanceToPump、mpg、fuelLeft都是undefined
2. 计算mpg * fuelLeft得到undefined * undefined = NaN
3. 接着判断NaN == distanceToPump（这里的distanceToPump是函数内的undefined），NaN和任何值比较都是false，所以三元运算最终返回false

修复方案 #

你有两种合理的修复方式，根据你的需求选择：

方案1：调用函数时传入参数

既然函数定义了参数，就需要把外部的变量传进去：

var distanceToPump = 50; var mpg = 25; var fuelLeft = 2; 
var zeroFuel = (distanceToPump, mpg, fuelLeft) => { 
  return (mpg * fuelLeft) === distanceToPump; 
}
console.log(zeroFuel(distanceToPump, mpg, fuelLeft)); // 此时会返回true

注：这里可以简化三元表达式，因为比较操作本身就会返回布尔值，不需要额外的? true : false

方案2：移除函数参数，直接使用外部变量

如果你希望函数直接使用外部已定义的变量，就不要声明同名参数：

var distanceToPump = 50; var mpg = 25; var fuelLeft = 2; 
var zeroFuel = () => { 
  return (mpg * fuelLeft) === distanceToPump; 
}
console.log(zeroFuel()); // 此时会返回true

差异来源解释 #

你之所以觉得逻辑上应该返回true，是误以为函数会自动引用外部的同名变量，但实际上JavaScript的作用域规则是：局部作用域的变量（这里是函数参数）会优先于全局作用域的同名变量。加上你调用时没传参，参数都是undefined，自然就出现了和预期不符的结果。

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