优雅编程 | Javascript 代码优化技巧

1、判断null、undefined、''、0、'0'

if (val === null || val === undefined || val === '' || val === 0 || val === '0') {
    ...
}
// 或
if([null,undefined,'',0,'0'].includes(val)){
    ...
}

if(Number(val ?? 0) === 0){
    ...
}

2、拷贝部分对象属性

如源对象为: const sourceObj = { a: 1, b: 2, c: 3, d: 4, e: 5 };，目标对象为不包含a属性的对象

const targetObj = {
      b: sourceObj.b,
      c: sourceObj.c,
      d: sourceObj.d,
      e: sourceObj.e
    };

const { a, ...targetObj } = sourceObj;

3、压缩多个条件

检查多个条件，可使用includes代替||

if (x === 'a' || x === 'b' || x === 'c') {
    ...
  }

if (['a', 'b', 'c'].includes(x)) {
    ...
  }

4、使用解构赋值简化变量声明

const startTime = time[0];
const endTime = time[1];
const name = student.name;
const age = student.age;

const [startTime, endTime] = time;
const { name, age } = student;

5、使用&&进行短路拦截

判断一个条件满足时执行某个函数，可使用&&运算符

if (x > 10) {
    fn();
}

x > 10 && fn();

6、简化if...else或switch...case

let txt = '';
if (status == 1) {
 txt = "成功";
} else if (status == 2) {
 txt = "失败";
} else if (status == 3) {
 txt = "进行中";
} else {
 txt = "未开始";
}

// 或
let txt = '';
switch (status) {
 case 1:
 txt = "成功";
 break;
 case 2:
 txt = "成功";
 break;
 case 3:
 txt = "进行中";
 break;
 default:
 txt = "未开始";
}

const statusMap = {
 1: "成功",
 2: "失败",
 3: "进行中",
 4: "未开始"
}
statusMapp[status];

// 或
const statusMap = new Map([
 [1, "成功"],
 [2, "失败"],
 [3, "进行中"],
 [4, "未开始"]
])
statusMap.get(status);

7、函数柯里化

一个函数应该只做一件事，方便拆分与组装。

function createFile(name, temp) {
 if (temp) {
   fs.create(`./temp/${name}`);
 } else {
   fs.create(name);
 }
}

function createFile(name) {
 fs.create(name);
}
function createTempFile(name) {
 createFile(`./temp/${name}`)
}

8、采用可选链防止崩溃的嵌套对象属性取值

const student = {
  name: "Lily",
  age: 16,
  address: {
    state: "Beijing"
  },
};

console.log(student && student.address && student.address.ZIPCode);

console.log(student?.address?.ZIPCode);

9、采用解构交换两个变量

let temp = x;
x = y;
y = temp;

[x, y] = [y, x];

10、将对象的值收集到数组中

const arr = [];
for (let key in obj) {
  arr.push(obj[key]);
}

const arr = Object.values(obj);

11、使用默认参数简化函数参数

function greet(name) {
  const finalName = name || 'Guest';
  console.log(`Hello, ${finalName}!`);
}

function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}