七爪源码：2022 年每个 JavaScript 开发人员都应该知道的 1 件事

大家好，欢迎来到IT知识分享网。

除非绝对必要，否则停止使用 if 语句。

使用 if 语句是一种笨拙的代码编写方式，应尽可能避免使用（在大多数情况下，这几乎是 100% 的时间）。

不要误会我的意思，if 语句在某些情况下很有用，而且是有原因的。 但是，在可以避免的地方过度使用它们不仅会使您在几个月后重新访问代码时变得更加困难，而且还会影响开发人员理解上下文上下文所需的时间。 编码并继续分配给他们的任务。 这会扰乱“流动”并导致整体效率降低。 少即是多。

查看下面的代码片段，我们通过加密的卡号从数据库中检索卡，并根据特定条件返回验证响应。

async validateCard(encryptedCardNumber) { const card = await this.lookupCard(encryptedCardNumber); if (!card) { console.log(NotFoundResponse.message); return NotFoundResponse; } else if (card.isBlacklisted) { console.log(BlacklistedReponse.message); return BlacklistedResponse; } else if (card.isDeleted) { console.log(DeletedResponse.message); return DeletedResponse; } else if (card.status !== CardStatus.active) { console.log(InactiveResponse.message); return InactiveResponse; } else { console.log(ValidResponse.message); return ValidResponse; } }

拥有这么多 if 语句不仅需要花费相当多的精力来破译，而且随着更多条件的添加，我们很快就会上下滚动以确保每个案例都得到满足，从而火上浇油。除此之外，为了可维护性，似乎还可以提取代码重复。

下面的示例就是这样做的。它用逻辑 AND 和 Logical_OR（短路评估）代替了无数的 if 语句，这更加简洁和易于理解。对于那些不熟悉析取和合取的人，我强烈建议您查一下，但这里有一个简短的描述：

• 逻辑与 (&&) 从左到右计算操作数，立即返回它遇到的第一个假操作数的值；如果所有值都为真，则返回最后一个操作数的值。
• 当且仅当其一个或多个操作数为真时，一组操作数的逻辑 OR (||) 运算符（逻辑析取）为真。使用短路求值，它只返回第一个真值表达式。

async validateCard(encryptedCardNumber) { const card = await this.lookupCard(encryptedCardNumber); const response = !card && NotFoundResponse || card.isDeleted && DeletedResponse || card.isBlacklisted && BlacklistedResponse || card.status !== cardStatus.active && InvalidStatus || ValidResponse; console.log(response.message); return response; }

随着业务需求的变化，代码也会发生变化。 在某些情况下，可能会完全删除代码，但在其他情况下，它会扩展到已经存在的内容。 这是一个很受欢迎的面试问题，它与您创建可扩展解决方案的能力有关：

创建一个函数，将 1-10 之间的给定数字转换为单词

简单吧？ 只需在函数中添加一堆 if（或 switch）语句就可以了，并给面试官留下深刻印象。

function convertIntegerToText(num) { if (num === 1) return "one"; if (num === 2) return "two"; if (num === 3) return "three"; // ... if (num === 10) return "ten"; }

但如果他们这样说，

要求发生了变化。 我们现在想使用这个函数将 1-100 之间的数字转换成单词

你现在要做什么？ 只是继续为每个场景编写 if 语句？ 如果他们后来更改了将数字转换为 1000 的要求怎么办？

更好的方法是从一开始就考虑可扩展的解决方案。 在设计、架构、编写和维护代码时要牢记的一个关键基本原则是时间如何影响软件的可持续性以及如何使您的代码随着时间的推移具有弹性。 因此，可扩展的解决方案是一个代码，其中没有任何 if 语句或一些语句可以覆盖大多数情况（如果不是全部），只需最少或不需要修改。

const ONES = ["", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"]; const TEENS = ["ten", "eleven", "twelve", "thirteen", "fourteen", "fifteen", "sixteen", "seventeen", "eighteen", "nineteen"]; const TENS = ["", "", "twenty", "thirty", "fourty", "fifty", "sixty", "seventy", "eighty", "ninety"]; function convertIntegerToText(num) { if (num < 20) return ONES[num] ?? TEENS[num - 10]; if (num < 100) return `${TENS[Math.floor(num / 10)]} ${convertIntegerToText(num % 10)}`; if (num < 1000) return `${ONES[Math.floor(num / 100)]} hundred ${convertIntegerToText(num % 100)}`; throw new Error("Number too high"); }

最后，看看下面的代码片段，并自己判断哪个是您认为高度可扩展、可维护、更易于阅读的，并且如果您遇到它会帮助您保持流畅状态？

// home.jsx function getCompanyTemplate(company) { if (company === "apple") { return <AppleTemplate /> } if (company === "samsung") { return <SamsungTemplate /> } if (company === "sony") { return <Sony /> } if (company === "lg") { return <Lg /> } } // OR // index.jsx export const templates = { apple: <Apple />, samsung: <Samsung />, sony: <Sony />, lg: <Lg />, } // home.jsx import { templates } from "./index" function getCompanyTemplate(company) { return templates[company]; }

我之前的文章展示了一个深入的可扩展前端解决方案，没有任何 if 语句。 一定要检查出来！

更多APP/小程序/网站源码资源，请搜索”七爪网源码交易平台”！