2024年Web前端最全【面试题】如何避免使用过多的 if else？_前端避免if else，在线面试指南是什么

文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

当业务比较复杂，判断条件比较多，项目进度比较赶时，特别容易使用过多if-else。其弊端挺多的，如代码可读性差、代码混乱、复杂度高、影响开发效率、维护成本高等。

因此，我们在日常编码时，有必要采取一些措施避免这些问题。本文的初衷不是建议大家完全不用if-else，而是希望我们能够在学会更多解决方案后更优雅地编码。

---

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

1. 使用排非策略：!、!!

逻辑非（logic NOT），是逻辑运算中的一种，就是指本来值的反值。

当你想这么写时……

1、判断是否为空
if(value === null || value === NaN || value === 0 || value === ''|| value === undefined   )
{
……
}

2、判断是否数组是否含有符合某条件的元素
const name = arr.find(item => item.status === 'error')?.name;
if(name !== undefined && name !== ''){
……
}
复制代码

不妨尝试这么写：

1、判断是否为空
if(!value){……}

2、判断是否数组是否含有符合某条件的元素
if(!!arr.find(item => item.status === 'error')?.name){……}
复制代码

---

2. 使用条件（三元）运算符： c ? t : f

三元运算符: condition ? exprIfTrue : exprIfFalse； 如果条件为真值，则执行冒号（:）前的表达式；若条件为假值，则执行最后的表达式。

当你想这么写时……

let beverage = '';
if(age > 20){
beverage = 'beer';
} else {
beverage = 'juice';
}
复制代码

不妨尝试这么写：

const beverage = age > 20 ? 'beer' : 'juice';
复制代码

tips: 建议只用一层三元运算符，多层嵌套可读性差。

---

3. 使用短路运算符：&&、 ||

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

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

当你想这么写时……

if (isOnline){
    makeReservation(user);
    }
复制代码

不妨尝试这么写：

 isOnline && makeReservation(user);
复制代码

---

4. 使用 switch 语句

当你想这么写时……

let result;
    if (type === 'add'){
    result = a + b;
    } elseif(type === 'subtract'){
    result = a - b;
    } elseif(type === 'multiply'){
    result = a * b;
    } elseif(type === 'divide'){
    result = a / b;
    } else {
    console.log('Calculation is not recognized');
    }
复制代码

不妨尝试这么写：

let result;
switch (type) {
   case'add':
     result = a + b;
     break;
   case'subtract':
     result = a - b;
     break;
   case'multiply':
     result = a * b;
     break;
   case'divide':
     result = a / b;
     break;
   default:
    console.log('Calculation is not recognized');
}
复制代码

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

---

5. 定义相关函数拆分逻辑，简化代码

当你想这么写时……

functionitemDropped(item, location) {
    if (!item) {
        returnfalse;
    } elseif (outOfBounds(location) {
        var error = outOfBounds;
        server.notify(item, error);
        items.resetAll();
        returnfalse;
    } else {
        animateCanvas();
        server.notify(item, location);
        returntrue;
    }
}
复制代码

不妨尝试这么写：

// 定义dropOut和dropIn, 拆分逻辑并提高代码可读性functionitemDropped(item, location) {
  const dropOut = function () {
    server.notify(item, outOfBounds);
    items.resetAll();
    returnfalse;
  };

  const dropIn = function () {
    animateCanvas();
    server.notify(item, location);
    returntrue;
  };

  return !!item && (outOfBounds(location) ? dropOut() : dropIn());
}
复制代码

细心的朋友会发现，在这个例子中，同时使用了前文提及的优化方案。这说明我们在编码时可以根据实际情况混合使用多种解决方案。

---

6. 将函数定义为对象，通过穷举查找对应的处理方法

• ① 定义普通对象

对于方案3的例子，不妨尝试这么写：

functioncalculate(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 recognized";
}
复制代码

• ② 定义 Map 对象

普通对象的键需要是字符串，而 Map 对象的键可以是一个对象、数组或者更多类型，更加灵活。

最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。