一些JS优化小技巧

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