js 代码优化总结

# js 代码优化总结

# 1.js 判空优化

对象属性判空赋值，三目运算符判断改为 ||

不规范： this.fId = this.$route.query.fId ? this.$route.query.fId : "";

改造： this.fId = this.$route.query.fId || ""

用链判断运算符判断一下该对象是否存在

不规范：const content = res && res.data && res.data.content

改造： const content = res?.data?.content

# 2.js 减少不必要的 if/else

2.减少非必要的 if-else 判断，能直接 return 的直接 return

不规范(1)：

function (){
  if (row.sourceVideoStatus !== 'Normal') {
    return true;
  } else {
    return false;
  }
}

1
2
3
4
5
6
7

改造(1)：

function (){
  return row.sourceVideoStatus !== 'Normal';
}

1
2
3

不规范(2)：

if (this.selectList.length === 0) {
  this.$message({
    type: "info",
    message: "请至少选择xxx",
  });
  return;
} else {
  this.isShowValidTime = true;
}

1
2
3
4
5
6
7
8
9

改造(2)-减少 else：

if (this.selectList.length === 0) {
  this.$message({
    type: "info",
    message: "请至少选择xxx",
  });
  return;
}
this.isShowValidTime = true;

1
2
3
4
5
6
7
8

2.用 map 优化多层 if-else/switch

不规范：

function price(name) {
  if (name === "phone") {
    console.log(1999);
  } else if (name === "computer") {
    console.log(9999);
  } else if (name === "television") {
    console.log(2999);
  } else if (name === "gameBoy") {
    console.log(3999);
  }
}

1
2
3
4
5
6
7
8
9
10
11

switch 改造：

switch (name) {
  case "phone":
    console.log(1999);
    break;
  case "computer":
    console.log(9999);
    break;
  case "television":
    console.log(2999);
    break;
  case "gameBoy":
    console.log(3999);
    break;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

map 更优的方法: 策略模式改造：

const commodity = new Map([
  ["phone", 1999],
  ["computer", 9999],
  ["television", 2999],
  ["gameBoy", 3999],
]);

commodity.get(name);

1
2
3
4
5
6
7
8

# 3.js 减少变量

减少不必要的变量声明

不规范：

const idArr = [];
const obj = { id: rowData.id };
idArr.push(obj);

1
2
3

改造：

const idArr = [{ id: rowData.id }];

合并比变量声明

不规范：var name = "Bill"; var age = 10;

改造： var name = "Bill", age = 10;

利用对象的扩展运算符...，减少代码

不规范：

const params = {
  pageIndex: this.currentPage,
  pageSize: this.currentSize,
  title: this.searchParams.title,
  name: this.searchParams.name,
};

1
2
3
4
5
6

改造：

const params = {
  pageIndex: this.currentPage,
  pageSize: this.currentSize,
  ...this.searchParams,
};

1
2
3
4
5

# 4.减少重复代码

使用 promise 的 finally

当 promise 的 then 和 catch 都执行的代码放到 finally 中

# 100.js 语法优化

parseInt 必须加上第二个参数
判断 isNaN 用Number.isNaN

因为 isNaN('123时间跳跃') //true,isNaN 它只是判断这个参数能否转成数字而已，并不是判断是否严格等于 NaN,所有要用Number.isNaN

更新时间: 9/8/2021, 4:24:27 PM

← vue开发规范 vue 代码优化总结→