。

其实#xff0c;if-else层层嵌套#xff0c;如下图…大厂面试题分享

面试题库前后端面试题库

推荐★★★★★地址前端面试题库一、引言相信大家听说过回调地狱——回调函数层层嵌套极大降低代码可读性。

其实if-else层层嵌套如下图所示也会形成类似回调地狱的情况。

当业务比较复杂判断条件比较多项目进度比较赶时特别容易使用过多if-else。

其弊端挺多的如代码可读性差、代码混乱、复杂度高、影响开发效率、维护成本高等。

因此我们在日常编码时有必要采取一些措施避免这些问题。

本文的初衷不是建议大家完全不用if-else而是希望我们能够在学会更多解决方案后更优雅地编码。

二、8种if-else的优化/替代方案1.

使用排非策略!、!!逻辑非logic

NOT是逻辑运算中的一种就是指本来值的反值。

当你想这么写时……1、判断是否为空

if(value

if(!value){……}2、判断是否数组是否含有符合某条件的元素

if(!!arr.find(item

如果条件为真值则执行冒号:前的表达式若条件为假值则执行最后的表达式。

当你想这么写时……let

beverage

为取假运算从左到右依次判断如果遇到一个假值就返回假值以后不再执行否则返回最后一个真值||

为取真运算从左到右依次判断如果遇到一个真值就返回真值以后不再执行否则返回最后一个假值。

当你想这么写时……if

(isOnline){makeReservation(user);}

复制代码不妨尝试这么写

b;break;default:console.log(Calculation

not

复制代码个人认为对于这类比较简单的判断用switch语句虽然不会减少代码量但是会更清晰喔。

5.

定义相关函数拆分逻辑简化代码当你想这么写时……functionitemDropped(item,

location)

outOfBounds;server.notify(item,

error);items.resetAll();returnfalse;}

else

{animateCanvas();server.notify(item,

复制代码不妨尝试这么写//

拆分逻辑并提高代码可读性functionitemDropped(item,

location)

outOfBounds);items.resetAll();returnfalse;};const

dropIn

{animateCanvas();server.notify(item,

!!item

复制代码细心的朋友会发现在这个例子中同时使用了前文提及的优化方案。

这说明我们在编码时可以根据实际情况混合使用多种解决方案。

6.

定义普通对象对于方案3的例子不妨尝试这么写functioncalculate(action,

num1,

使用责任链模式责任链模式将整个处理的逻辑改写成一条责任传递链请求在这条链上传递直到有一个对象处理这个请求。

例如

中的事件冒泡。

简单来说事件冒泡就是在一个对象上绑定事件如果定义了事件的处理程序就会调用处理程序。

相反没有定义的话这个事件会向对象的父级传播直到事件被执行最后到达最外层document对象上。

这意味着在这种模式下总会有程序处理该事件。

再举个当你想这么写时……functiondemo

(a,

建议多读几次三、小结本文粗略介绍了8种优化/替代if-else的方法希望能给你日常编码带来一些启示。

正如开头所说我们的目的不是消灭代码中的if-else而是让我们在学会更多解决方案的基础上根据实际情况选择更优的编码方式。

因此当你发现自己的代码里面存在特别多的if-else或当你想用if-else时不妨停下来思考一下——如何能写得更优雅、更方便日后维护呢。

大厂面试题分享

面试题库前后端面试题库