分享10个JS优化小技巧 让你的代码更精简 值得收藏

Write Less Do the Same

1. if多条件判断

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

2. 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循环

// 冗余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.  隐式返回

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

9. 重复字符串多次

// 冗余let test = ''; 
for(let i = 0; i < 5; i ++) { 
  test += 'test '; 
} 

// 简洁'test '.repeat(5);复制代码

10. 幂乘

// 冗余
Math.pow(2,3);

// 简洁而
2**3 // 8复制代码