10个JS优化小技巧

简介: Write Less Do the Same

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



相关文章
|
1月前
|
存储 缓存 JavaScript
如何优化Node.js应用的内存使用以提高性能?
通过以上多种方法的综合运用,可以有效地优化 Node.js 应用的内存使用,提高性能,提升用户体验。同时,不断关注内存管理的最新技术和最佳实践,持续改进应用的性能表现。
124 62
|
1月前
|
JavaScript 前端开发
如何使用时间切片来优化JavaScript动画的性能?
如何使用时间切片来优化JavaScript动画的性能?
|
29天前
|
存储 缓存 监控
如何使用内存监控工具来优化 Node.js 应用的性能
需要注意的是,不同的内存监控工具可能具有不同的功能和特点,在使用时需要根据具体工具的要求和操作指南进行正确使用和分析。
70 31
|
1月前
|
缓存 前端开发 JavaScript
JavaScript加载优化
JavaScript加载优化
|
1月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
优化CSS和JavaScript加载
|
1月前
|
缓存 JavaScript 前端开发
介绍一下 JavaScript 中数组方法的常见优化技巧
通过合理运用这些优化技巧,可以提高 JavaScript 中数组方法的执行效率,提升代码的整体性能。在实际开发中,需要根据具体的业务场景和数据特点选择合适的优化方法。
36 6
|
1月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
1月前
|
JSON 监控 JavaScript
Node.js-API 限流与日志优化
Node.js-API 限流与日志优化
|
2月前
|
存储 JavaScript 前端开发
JavaScript垃圾回收机制与优化
【10月更文挑战第21】JavaScript垃圾回收机制与优化
42 5
|
1月前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
43 1