详解如何替换项目中的if-else和switch
作者:JoyZ
正文
在项目中,往往会看到很多的if-else
或者switch
,项目会变得很臃肿,而且不易阅读,那么今天我们就来讲讲优化方案
例如,假设我们有一个函数,它接受一个数字参数并返回其实际含义。使用 if/else 语句,它看起来像这样:
function getTranslation(type) { if (type === 4) { return "forbidden_area"; } else if (type === 6) { return "elevator_area"; } else if (type === 7) { return "dangerous_area"; } else if (type === 10) { return "restricted_area"; } return "other_area"; }
这不是很好。它可读性差。
我们可以通过使用 switch 语句优化,如下所示:
function getTranslation(type) { switch (type) { case 4: return "forbidden_area"; case 6: return "elevator_area"; case 7: return "dangerous_area"; case 10: return "restricted_area"; default: return "other_area"; } }
但这仍然没有什么可读性。switch 语句也容易出错。
在这种情况下,我们只是返回一个值,但是当你具有更复杂的功能时,很容易错过 break 语句并引入错误。
替代方案
你可以使用对象以更简洁的方式实现与上述相同的功能。让我们看一个例子:
function getTranslation(type) { const types = { 4: 'forbidden_area', 6: 'elevator_area', 7: 'dangerous_area', 10: 'restricted_area' } return types[type] ?? 'other_area' }
我们有一个对象,其中键是条件,值是响应。然后我们可以使用方括号符号从传入的参数中选择对象的正确值。
函数中return types[type] ?? 'other_area'
使用无效合并来分配默认响应。这意味着如果 types[type]
为 null 或undefined(但不是 false 或 0 ),则返回默认字符串“other_area”。
|| vs ??
||
和??
都是指定默认值
读取对象属性的时候,如果某个属性的值是null
或undefined
,有时候需要为它们指定默认值。常见做法是通过||
运算符指定默认值
const headerText = response.settings.headerText || 'Hello, world!'; const animationDuration = response.settings.animationDuration || 300; const showSplashScreen = response.settings.showSplashScreen || true;
上面的三行代码都通过||
运算符指定默认值,但是这样写是错的。开发者的原意是,只要属性的值为null
或undefined
,默认值就会生效,但是属性的值如果为空字符串或false
或0
,默认值也会生效。
为了避免这种情况,ES2020 引入了一个新的 Null 判断运算符??
。它的行为类似||
,但是只有运算符左侧的值为null
或undefined
时,才会返回右侧的值。而||
是运算符左侧的值为null
、undefined
、0
、''
或NaN
时,都会返回右侧的值!
更复杂的逻辑
有时你可能需要在你的条件中执行一些更复杂的逻辑。为此,你可以将函数作为值传递给对象键并执行响应:
function calculate(action, num1, num2) { const actions = { add: (a, b) => a + b, subtract: (a, b) => a - b, multiply: (a, b) => a * b, divide: (a, b) => a / b, }; return actions[action]?.(num1, num2) ?? "Calculation is not recognised"; }
?.
有不懂的话,可以先看下面,我们正在选择我们想要做的计算并执行响应,传递两个数字。你可以使用可选链接(最后一行代码中的 ?.)来仅执行已定义的响应。否则,将使用默认的返回字符串。
如果函数里的逻辑足够复杂也可以把函数提取出来
function add(num1, num2) { return num1 + num2 } function subtract(num1, num2) { return num1 - num2 } function multiply(num1, num2) { return num1 * num2 } function divide(num1, num2) { return num1 / num2 } function calculate(action, num1, num2) { const actions = { add, subtract, multiply, divide } return actions[action]?.(num1, num2) ?? 'Calculation is not recognised' }
?.的说明
编程实务中,如果读取对象内部的某个属性,往往需要判断一下,属性的上层对象是否存在。比如,读取message.body.user.firstName
这个属性,安全的写法是写成下面这样。
// 错误的写法 const firstName = message.body.user.firstName || 'default'; // 正确的写法 const firstName = (message && message.body && message.body.user && message.body.user.firstName) || 'default';
上面例子中,firstName
属性在对象的第四层,所以需要判断四次,每一层是否有值。
这样的层层判断非常麻烦,因此 ES2020 引入了“链判断运算符”(optional chaining operator)?.
,简化上面的写法。
const firstName = message?.body?.user?.firstName || 'default';
上面代码使用了?.
运算符,直接在链式调用的时候判断,左侧的对象是否为null
或undefined
。如果是的,就不再往下运算,而是返回undefined
。
下面是判断对象方法是否存在,如果存在就立即执行的例子。
iterator.return?.()
上面代码中,iterator.return
如果有定义,就会调用该方法,否则iterator.return
直接返回undefined
,不再执行?.
后面的部分。
下面是?.
运算符常见形式,以及不使用该运算符时的等价形式。
a?.b // 等同于 a == null ? undefined : a.b a?.[x] // 等同于 a == null ? undefined : a[x] a?.b() // 等同于 a == null ? undefined : a.b() a?.() // 等同于 a == null ? undefined : a()
上面代码中,特别注意后两种形式,如果a?.b()
和a?.()
。如果a?.b()
里面的a.b
有值,但不是函数,不可调用,那么a?.b()
是会报错的。a?.()
也是如此,如果a
不是null
或undefined
,但也不是函数,那么a?.()
会报错。
以上就是详解如何替换项目中的if-else和switch的详细内容,更多关于替换项目中if else switch的资料请关注脚本之家其它相关文章!