十个JS优化小技巧

欢迎大家来到IT世界,在知识的湖畔探索吧!

#头条创作挑战赛#

本文同步本人掘金平台的原创翻译：https://juejin.cn/post/

Write Less Do the Same

1. if多条件判断

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

欢迎大家来到IT世界,在知识的湖畔探索吧!

2. if…else…

欢迎大家来到IT世界,在知识的湖畔探索吧!// 冗余 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循环

欢迎大家来到IT世界,在知识的湖畔探索吧!// 冗余 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条件

欢迎大家来到IT世界,在知识的湖畔探索吧!// 冗余 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. 隐式返回

欢迎大家来到IT世界,在知识的湖畔探索吧!// 冗余 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. 幂乘

欢迎大家来到IT世界,在知识的湖畔探索吧!// 冗余 Math.pow(2,3); // 简洁而 23 // 8 复制代码