停止使用 if else

最近，我接到一个前端岗位的作业，需要在家完成一个类似仪表盘的东西。我觉得自己做的一切都对，但最终还是被拒了，一部分原因是我的粗心，一部分原因是我的代码。我到处都用了太多 if/else 语句！而且我当时也不懂这些。但现在我懂了，所以想在这里跟大家分享一下。

大多数人在需要处理条件逻辑时都会使用 if/else 和 switch 语句。虽然偶尔处理一两个条件逻辑可能不错，但使用多个 if else 语句或大型 switch 语句会使代码看起来非常难看，可读性较差，而且容易出错。

function whoIsThis(character) {
    if (character.toLowerCase() === 'naruto') {
        return `Hokage`
    } else if (character.toLowerCase() === 'sasuke') {
        return `Konoha's Strongest Ninja`
    } else if (character.toLowerCase() === 'isshiki') {
        return `Otsutsuki being`
    } else if (character.toLowerCase() === 'boruto') {
        return `Naruto and Hinata's son`
    }
}
whoIsThis('')

您会看到，我们通过编写多个 console.logs 和 if 语句重复了很多次。

但是有一种面向对象的方法可以做到这一点，那就是使用对象。
我们不用编写 if else 代码块，而是定义一个对象，该对象包含我们在比较中使用的值作为键，并将我们返回的值作为对象的值，如下所示：

function whoIsThis(character) {
    const listOfCharacters = {
        'naruto': `Hokage`,
        'sasuke': `Konoha's Strongest Ninja`,
        'isshiki': `Otsutsuki being`,
        'boruto': `Naruto and Hinata's son`
    }

    return listOfCharacters[character] ?? `Please provide a valid character name`
}

通过使用对象，我们能够创建一种字典来查找，而无需使用多个 if-else 语句。

我们也可以通过使用Map对象而不是对象来改进这一点。Map 与普通对象不同：

它们记得原来的插入顺序
与对象不同，我们可以使用任何类型的数据作为键/值，而不仅仅是字符串、数字和符号。

function whoIsThis(character){
const mapOfCharacters = new Map([
['naruto', `Hokage`],
        ['sasuke', `Konoha's Strongest Ninja`],
        ['isshiki', `Otsutsuki being`],
        ['boruto', `Naruto and Hinata's son`]
])
return mapOfCharacters.get(character) ?? `Please provide a valid character name`
}

感谢您阅读这篇短文，如果您喜欢它，您可以通过https://www.buymeacoffee.com/rishavjadon支持我的工作。

文章来源：https://dev.to/rjitsu/stop-using-if-else-264o