如何用Array.prototype.find()实现多条件查找？JS计算器键盘适配问题

问题描述 #

我正在开发一款JS计算器，原本鼠标点击按钮可正常运行，现在集成键盘操作功能，希望按下Enter键等效于点击=按钮。之前未集成键盘时，用lastOperatorThatIsNotEqual = operatorArray.reverse().find(e => e !== "=")能完美找到最后一个非=的操作符。但现在想同时排除Enter和=，写了test函数用于find方法判断，却无法正常工作；单独排除其中一个条件时功能正常。

错误代码示例：

function test(e) {
    if (e !== 'Enter') {
        return e
    } else if (e !== '=') {
        return e
    } else {
        console.log('wrong')
    }
}

lastOperatorThatIsNotEqual = operatorArray.reverse().find(test)

错误原因 #

你的test函数逻辑存在漏洞：

• 当e是=时，第一个判断e !== 'Enter'为真，会直接返回e（也就是=），不会进入第二个else if判断
• 当e是Enter时，第一个判断不成立，进入else if后e !== '='为真，返回Enter
• 这导致find方法会把=或Enter当成符合条件的元素返回，完全达不到同时排除两者的目的

解决办法 #

将两个排除条件合并为一个逻辑判断，只要元素既不是Enter也不是=，就返回true（find方法会返回第一个满足判断条件的元素）。

优化后的函数写法 #

function test(e) {
    return e !== 'Enter' && e !== '=';
}

lastOperatorThatIsNotEqual = operatorArray.reverse().find(test)

更简洁的箭头函数写法 #

直接用箭头函数替代单独的test函数，和原有代码风格保持一致：

lastOperatorThatIsNotEqual = operatorArray.reverse().find(e => e !== "=" && e !== "Enter")

这样就能正确找到数组中最后一个既不是=也不是Enter的操作符了。

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