2021 年写 JavaScript 代码的 17 个优化技巧

我们经常会写一些 JavaScript 代码，但是如何写出干净又易维护的代码呢？本文将讲解 17 个 JavaScript 代码的技术帮助你提高编程水平，此外，本文可以帮助您为 2021 年的 JavaScript 面试做好准备。

（注意，我会把差的代码放在上面用 //longhand 注释的，好的代码放在下面用 //shorthand 注释的，以作比较）

1. If 多个条件的时候

有时候你会经常判断一个变量是否等于多个值的情况：

//longhand
if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
    //logic
}


//shorthand
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
   //logic
}

2. If true … else

if else? 还不如用三元运算符

// Longhand
let test: boolean;
if (x > 100) {
    test = true;
} else {
    test = false;
}


// Shorthand
let test = (x > 10) ? true : false;
//or we can simply use
let test = x > 10;
console.log(test);

三元运算符还可以嵌套，像下面这样：

let x = 300,
let test2 = (x > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';
console.log(test2); // "greater than 100"

但是不建议嵌套太多层的。

3. Null, Undefined, 空检查

前面有空值，如何判断？

// Longhand
if (first !== null || first !== undefined || first !== '') {
    let second = first;
}



// Shorthand
let second = first|| '';

4. Null Value 检查与分配默认值

let first = null,
let second = first || '';
console.log("null check", test2); // output will be ""

5. Undefined 检查与分配默认值

let first= undefined,
let second = first || '';
console.log("undefined check", test2); // output will be ""

6.foreach 循环

如何更好的迭代？

// Longhand
for (var i = 0; i < testData.length; i++)


// Shorthand
for (let i in testData) 或  for (let i of testData)

上面 let i in 或 let i of 是比较好的方式，

或者下面这样：使用 forEach

function testData(element, index, array) {
  console.log('test[' + index + '] = ' + element);
}


[11, 24, 32].forEach(testData);
// prints: test[0] = 11, test[1] = 24, test[2] = 32

7. 比较返回

在 return 语句中使用比较将避免我们的 5 行代码，并将它们减少到 1 行。

// Longhand
let test;
function checkReturn() {
    if (!(test === undefined)) {
        return test;
    } else {
        return callMe('test');
    }
}
var data = checkReturn();
console.log(data); //output test
function callMe(val) {
    console.log(val);
}



// Shorthand
function checkReturn() {
    return test || callMe('test');
}

8. 函数调用简单的方式

用三元运算符解决函数调用

// Longhand
function test1() {
  console.log('test1');
};
function test2() {
  console.log('test2');
};
var test3 = 1;
if (test3 == 1) {
  test1();
} else {
  test2();
}



// Shorthand
(test3 === 1? test1:test2)();

9. Switch

switch 有时候太长？看看能不能优化

// Longhand
switch (data) {
  case 1:
    test1();
  break;

  case 2:
    test2();
  break;

  case 3:
    test();
  break;
  // And so on...
}



// Shorthand
var data = {
  1: test1,
  2: test2,
  3: test
};

data[anything] && data[anything]();

10. 多行字符串速记

字符串多行时，如何更好的处理？用 + 号？

//longhand
const data = 'abc abc abc abc abc abc
	'
    + 'test test,test test test test
	'



//shorthand
const data = `abc abc abc abc abc abc
         test test,test test test test`

11.Implicit Return Shorthand

当用剪头函数时，有个隐式返回，注意括号。

Longhand:
//longhand
function getArea(diameter) {
  return Math.PI * diameter
}



//shorthand
getArea = diameter => (
  Math.PI * diameter;
)

12.Lookup Conditions Shorthand

如果我们有代码来检查类型，并且基于类型需要调用不同的方法，我们可以选择使用多个 else ifs 或进行切换，但是如果我们有比这更好的方式呢？

// Longhand
if (type === 'test1') {
  test1();
}
else if (type === 'test2') {
  test2();
}
else if (type === 'test3') {
  test3();
}
else if (type === 'test4') {
  test4();
} else {
  throw new Error('Invalid value ' + type);
}



// Shorthand
var types = {
  test1: test1,
  test2: test2,
  test3: test3,
  test4: test4
};

var func = types[type];
(!func) && throw new Error('Invalid value ' + type); func();

13.Object.entries()

此功能有助于将对象转换为对象数组。

const data = { test1: 'abc', test2: 'cde', test3: 'efg' };
const arr = Object.entries(data);
console.log(arr);


/** Output:
[ [ 'test1', 'abc' ],
  [ 'test2', 'cde' ],
  [ 'test3', 'efg' ]
]
**/

14. Object.values()

这也是 ES8 中引入的一项新功能，它执行与 Object.Entry () 类似的功能，但没有关键部分:

const data = { test1: 'abc', test2: 'cde' };
const arr = Object.values(data);
console.log(arr);


/** Output:
[ 'abc', 'cde']
**/

15. 多次重复字符串

为了一次又一次地重复相同的字符，我们可以使用 for 循环并将它们添加到同一个循环中，但是如果我们有一个速记呢？

//longhand
let test = '';
for(let i = 0; i < 5; i ++) {
  test += 'test ';
}
console.log(str); // test test test test test



//shorthand
'test '.repeat(5);

16. 指数幂函数

数学指数幂函数的速记:

//longhand
Math.pow(2,3); // 8



//shorthand
2**3 // 8

17. 数字分隔符

现在，您只需使用 _ 即可轻松分隔数字。

//old syntax
let number = 98234567



//new syntax
let number = 98_234_567

结论

我们在编写代码的过程中多思考，多记录，看看哪种是最好，又是最短的方式，这样有助于提高编程水平。