0
点赞
收藏
分享

微信扫一扫

【面试题】如何替换项目中的if-else和switch


【面试题】如何替换项目中的if-else和switch_css

给大家推荐一个实用面试题库

1、前端面试题库面试必备)          

地址:​​前端面试题库​​

在项目中,往往会看到很多的​​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?.()​​会报错。

 

给大家推荐一个实用面试题库

1、前端面试题库面试必备)          

地址:​​前端面试题库​​

举报

相关推荐

0 条评论