项目中不可忽视的JavaScript优化技巧

1,086 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

大家好,我是百年孤独,最近把代码review中的一些小优化整理了一下(有时候写的代码是真菜呀)~~

Null、Undefined、空检查

判断变量值是否为空的时候,经常是判断是否等于null,或者是否等于undefined,或者是都等于空值,写一长串来进行if判断,其实可以有更简洁的方式实现。

普通写法:

      if (username1 !== null || username1 !== undefined || username1 !== '') {
        let username = username1;
      }

优化后: let username = username1 || '';

(想给变量分配默认值的时候也可以用这种写法)

存在多个条件的判断

我们经常用的办法是:

      if (x === 'png' || x === 'jpeg' || x === 'jpg' || x === 'gif') {
        //下一步
      }

其实更简洁的办法是在数组中把这些需要判断的值存储一下,使用数组的includes方法:

 if (['png', 'jpeg', 'jpg', 'gif'].includes(x)) {
        //下一步
      }

if else的优化

常见就是if else的嵌套

if(val < 0 ) {

} else if(val > 10 ) {

} else( val > 100 ) {

}

当if else判断后里面的逻辑比较小的时候我们可以使用三元运算符来进行优化: (逻辑很多的时候还是老老实实用if else)

let value = val < 0? 'aaa':( val > 10)?'bbb':'ccc;

for循环

普通就是for循环的常见写法: for (let i = 0; i < arr.length; i++)

优化是采用for in 或者for of的写法:for (let i in arr.length) or  for (let i of arr.length)

switch的简写

switch (data) {
  case 1:
    test1();
  break;
 
  case 2:
    test2();
  break;
 
  case 3:
    test();
  break;
  
}

优化写法: 把条件保存在key-value对象中,然后可以根据条件使用。

var data = {
  1: test1,
  2: test2,
  3: test};
data[anything] && data[anything]();

一个对象转换成一个对象数组

Object.entries()可以把一个对象转换成一个对象数组

const data = { a'111'b'222'c'333' };
const arr = Object.entries(data);
console.log(arr);

image.png

幂的简写方法

//普通方法 
Math.pow(2,3); // 8


//简写方法 
2**3 // 8