每个前端应该掌握的7个代码优化的小技巧

1. 字符串的自动匹配（Array.includes）

在写代码时我们经常会遇到这样的需求，我们需要检查某个字符串是否是符合我们的规定的字符串之一。最常见的方法就是使用||和===去进行判断匹配。但是如果大量的使用这种判断方式，定然会使得我们的代码变得十分臃肿，写起来也是十分累。其实我们可以使用Array.includes来帮我们自动去匹配。

// 未优化前的写法
const isConform = (letter) => { 
if (letter === "a" ||letter === "b" ||letter === "c" ||
   letter === "d" || letter === "e") {
   return true;   
}   
return false; };
1
2
3
4
5
6
7

```javascript
// 优化后的写法
 const isConform = (letter) =>   ["a", "b", "c", "d", "e"].includes(letter);
1
2
3
4

2.for-of和for-in自动遍历

for-of和for-in，可以帮助我们自动遍历Array和object中的每一个元素,不需要我们手动跟更改索引来遍历元素。

注:我们更加推荐对象(object)使用for-in遍历，而数组(Array)使用for-of遍历

for-of

const arr = ['a',' b', 'c'];
 // 未优化前的写法 
for (let i = 0; i < arr.length; i++) {
   const element = arr[i]; 
   console.log(element);
}
1
2
3
4
5
6

// 优化后的写法 
for (const element of arr) {
    console.log(element);
} 
// expected output: "a" // expected output: "b" // expected output: "c"
1
2
3
4
5

for-in

const obj = {   a: 1,   b: 2,   c: 3, };
 // 未优化前的写法 
 const keys = Object.keys(obj); 
 for (let i = 0; i < keys.length; i++) {
    const key = keys[i];   
    const value = obj[key];   
    // ... }
1
2
3
4
5
6
7

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; };
1
2
3
4
5
6
7

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

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 在最大与最小之间";
 }
1
2
3
4
5
6
7
8

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

5.函数调用的选择

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

function f1() {
   // ... 
} 
function f2() {
   // ... 
 } 
 // 未优化前的写法 
if (condition) { 
   f1(); }
else
{
f2(); 
}
1
2
3
4
5
6
7
8
9
10
11
12
13

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

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"; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// 优化后的写法
 const days = {   
 0: "Sunday",  
  1: "Monday",   
  2: "Tuesday",   
  3: "Wednesday",  
   4: "Thursday",   
   5: "Friday",   
   6: "Saturday", 
   };
  const day = days[dayNumber];`
1
2
3
4
5
6
7
8
9
10
11

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

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

// 未优化前的写法 
let name; 
if (user?.name) 
{   
name = user.name; 
} else {
   name = "Anonymous";
}
1
2
3
4
5
6
7
8

// 优化后的写法
 const name = user?.name || "Anonymous";
1
2