一些JS优化小技巧

红太狼 2022-10-25 15:29 275阅读 0赞

## 1. if多条件判断 ##

如果if里面包含多个判断条件，可以把判断条件存到一个数组，然后在去这个数组中检索”输入的值“是否满足条件；

// 冗余
    if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') { }
    
    // 简洁
    if (['abc', 'def', 'ghi', 'jkl'].includes(x)) { }

## 2. if…else… ##

单个if else可以直接使用变量赋值替代，省时省力

// 冗余
    let test: boolean;
    if (x > 100) { 
        test = true;
    } else { 
        test = false;
    }
    
    // 简洁
    let test = x > 10;

**3. Null, Undefined, 空值检查**

空值检查的时候，一般会写很多个判空处理，这样子过于荣誉。使用 || 运算符，从左到右，如果为真则直接赋值，直到所有的都不为真，则返回假；

// 冗余
    if (first !== null || first !== undefined || first !== '') { 
        let second = first;
    }
    
    // 简洁
    let second = first || '';

## 4. foreach循环 ##

`foreach`循环代码过于冗余，可以使用 `for in` 或者`for of`代替；

// 冗余
    for (var i = 0; i < testData.length; i++)
        
    // 简洁
    for (let i in testData)
    // 或
    for (let i of testData)

## 5. 函数条件调用 ##

如果需要根据条件判断，执行不同的函数。

// 冗余
    function test1() { 
      console.log('test1');
    };
    function test2() { 
      console.log('test2');
    };
    var test3 = 1;
    if (test3 == 1) { 
      test1();
    } else { 
      test2();
    }
    
    // 简单
    (test3 === 1? test1:test2)();

使用三目运算符进行判断，然后在让函数自己执行；

## 6. switch条件 ##

如果需要根据条件判断，执行不同的函数，并且此时判断的条件比较多的时候；可以使用，将条件进行数组存储，然后在判断数组中是否存在”该条件“进行，函数执行处理；

// 冗余
    switch (data) { 
      case 1:
        test1();
      break;
    
      case 2:
        test2();
      break;
    
      case 3:
        test();
      break;
      // so on...
    }
    
    // 简洁
    var data = { 
      1: test1,
      2: test2,
      3: test
    };
    
    data[anything] && data[anything]();

## 7. 多行字符串 ##

如果有多行字符串，就不要使用字符串拼接了，不美观，又不好维护。使用，模板字符串。

// 冗余
    const data = 'abc abc abc abc abc abc\n\t'
        + 'test test,test test test test\n\t'
    
    // 简洁
    const data = `abc abc abc abc abc abc test test,test test test test`

## 8. 隐式返回 ##

如果返回只有一行代码，可以使用箭头函数代替普通函数，并且不用再写 `return`

// 冗余
    function getArea(diameter) { 
      return Math.PI * diameter
    }
    
    // 简洁
    getArea = diameter => (
      Math.PI * diameter;
    )

## 9. 幂乘 ##

某个数的几次方，一般使用`Math.pow()`，也可以使用`**`直接次方。

// 冗余
    Math.pow(2,3);
    
    // 简洁而
    2**3 // 8