JavaScript的10个 小技巧

JavaScript 优化小技巧系列文章将在本号陆续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

---

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 > 100;

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]( "anything] && data[anything");

7. 多行字符串

// 复杂
const data = 'ab ab ab ab ab ab\n\t'
    + 'test test,test test test test\n\t'


// 简洁
const data = `ab ab ab ab ab ab
         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

---

JavaScript 优化小技巧系列文章将在本号陆续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

贾佳

HFun 前端攻城狮