2024年最全每个前端都应该掌握的7个代码优化的小技巧，2024年最新2024年前端常见面试题

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

// 优化后的写法
for (const key in obj) {
const value = obj[key];
// …
}

### 3.false判断


如果你想要判断一个变量是否为`null、undefined、0、false、NaN、''`，你就可以使用逻辑非（`!`）取反，来帮助我们来判断,而不用每一个值都用`===`来判断

// 未优化前的写法
const isFalsey = (value) => {
if (
value === null ||
value === undefined ||
value === 0 ||
value === false ||
value === NaN ||
value === “”
) {
return true;
}
return false;
};

// 优化后的写法
const isFalsey = (value) => !value;

### 4.三元运算符代替（`if/else`）


在我们编写代码的时候肯定遇见过`if/else`选择结构，而三元运算符可以算是`if/else`的一种语法糖，能够更加简洁的表示`if/else`。

// 未优化前的写法
let info;
if (value < minValue) {
info = “Value is最小值”;
} else if (value > maxValue) {
info = “Value is最大值”;
} else {
info = “Value 在最大与最小之间”;
}

//优化后的写法
const info =
value < minValue
? “Value is最小值”
: value > maxValue ? “Value is最大值” : “在最大与最小之间”;

### 5.函数调用的选择


三元运算符还可以帮我们判断当前情况下该应该调用哪一个函数，

function f1() {
// …
}
function f2() {
// …
}
// 未优化前的写法
if (condition) {
f1();
} else {
f2();
}

// 优化后的写法
(condition ? f1 : f2)();

### 6.用对象代替switch/case选择结构


`switch case`通常是有一个`case`值对应一个返回值，这样的结构就类似于我们的对象，也是一个键对应一个值。我们就可以用我们的对象代替我们的`switch/case`选择结构，使代码更加简洁

const dayNumber = new Date().getDay();

// 未优化前的写法
let day;
switch (dayNumber) {
case 0:
day = “Sunday”;
break;
case 1:
day = “Monday”;
break;
case 2:
day = “Tuesday”;
break;
case 3:
day = “Wednesday”;
break;
case 4:
day = “Thursday”;
break;
case 5:
day = “Friday”;
break;
case 6:
day = “Saturday”;
}

// 优化后的写法
const days = {
0: “Sunday”,
1: “Monday”,
2: “Tuesday”,
3: “Wednesday”,
4: “Thursday”,
5: “Friday”,
6: “Saturday”,
};
const day = days[dayNumber];

### 7. 逻辑或(`||`)的运用


如果我们要获取一个不确定是否存在的值时，我们经常会运用if判断先去判断值是否存在，再进行获取。如果不存在我们就会返回另一个值。我们可以运用逻辑或(`||`)的特性，去优化我们的代码

// 未优化前的写法
let name;
if (user?.name) {
name = user.name;
} else {
name = “Anonymous”;
}

**读者福利**

========

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

> **由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）**
> ![](https://img-blog.csdnimg.cn/20201126205036657.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM3OTAzNDY4,size_16,color_FFFFFF,t_70)
> ![](https://img-blog.csdnimg.cn/20201126205047777.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM3OTAzNDY4,size_16,color_FFFFFF,t_70)
> ![](https://img-blog.csdnimg.cn/20201126205051391.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM3OTAzNDY4,size_16,color_FFFFFF,t_70)