关于javascript:JS优化小技巧

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

11. 获取对象的 key,value 值

Object.keys()、Object.values()、Object.entries() 的用法 

12. 图片懒加载

 能够通过为图片文件增加 loading="lazy" 的属性来实现:
![](image.png)

13. 数组去重实现计划

1. 借助 Set
const arr = [12,34,565,12,34,1,3,1]
const newArr = Array.from(new Set(arr))
console.log('newArr',newArr);