JavaScript代码优化

1.使用默认参数

不实用默认参数的时候，为了避免undefined错误，我们是这样来实现的：

const someMethod = (param) => {
    const value = param || "default value";
    return value;
}

console.log(someMethod());

// 或者可以使用null判断符号
const someMethod = (param) => {
  const value = param ?? "default value";
  return value;
}

console.log(someMethod());

注意：当传入false、空字符串或者0的时候，短路操作符会返回默认值，null判断符号会返回传入的值。只有传入的值为undefined或者null的时候，才会返回默认值。

使用默认值就会简单很多，避免了再次定义变量以及使用操作符：

const someMethod = (param = 'default value') => param;

console.log(someMethod());

2.处理多个条件

当有多个条件需要判断的时候，我们会使用||或者&&操作符去判断条件，比如：

const someFunction = (strs)=>{
  if(strs.includes("someValue1") || strs.includes("someValue2")){
    return true
  }else{
    return false
  }
}

console.log(someFunction(["someValue1"]))

但是这么做比较繁琐，我们可以使用将条件集合到一个数组中去批量判断：

const someFunction = (strs) =>
  ['someValue1', 'someValue2'].some((condition) => strs.includes(condition));

console.log(someFunction(['someValue1']));

3. 用动态键值对替换开关

开关版本：

const UserRole = {
  ADMIN: 'Admin',
  GENERAL_USER: 'GeneralUser',
  SUPER_ADMIN: 'SuperAdmin',
};
function getRoute(userRole = 'default role') {
  switch (userRole) {
    case UserRole.ADMIN:
      return '/admin';
    case UserRole.GENERAL_USER:
      return '/generaluser';
    case UserRole.SUPER_ADMIN:
      return '/superadmin';
    default:
      return '/';
  }
}
console.log(getRoute(UserRole.ADMIN));
console.log(getRoute('GeneralUser')); 

键值对版本

const UserRole = {
  ADMIN: 'Admin',
  GENERAL_USER: 'GeneralUser',
  SUPER_ADMIN: 'SuperAdmin',
};
function getRoute(userRole = 'default role') {
  const appRoute = {
    [UserRole.ADMIN]: '/admin',
    [UserRole.GENERAL_USER]: '/generaluser',
    [UserRole.SUPER_ADMIN]: '/superadmin',
  };
  return appRoute[userRole] ?? '/';
}
console.log(getRoute('Admin'));
console.log(getRoute('aaa'));

4.避免过多的函数参数

function myFunction(employeeName,jobTitle,yrExp,majorExp){
  return `${employeeName} is working as ${jobTitle} with ${yrExp}    years of experience in ${majorExp}`
 }

 console.log(myFunction("John","Project Manager",12,"Project Management"))
//违反“clean code”原则
//参数排序很重要
//未使用的参数警告如果不使用
//测试需要考虑很多边缘情况。

简洁版本：

const myFunction = ({employeeName="default name",jobTitle="job title",yrExp=13,majorExp="Worker"})=>{
  return `${employeeName} is working as ${jobTitle} with ${yrExp} years of experience in ${majorExp}`
 }

 const mockTechPeople = {
   employeeName:"John",
   jobTitle:"Project Manager",
   yrExp:12,
   majorExp:"Project Management"
 }
 
 console.log(myFunction(mockTechPeople))

这里还使用了JavaScript的默认参数的知识。

注意，要不要使用对象类型的参数，还是视情况而定，一般参数超过两个或者三个的时候，可以采用这种方式。

5.使用Object.assign设置默认对象

const someObject = {
  title: null,
  subTitle: 'Subtitle',
  buttonColor: null,
  disabled: true,
};
function createOption(someObject) {
  someObject.title = someObject.title || 'Default Title';
  someObject.subTitle = someObject.subTitle || 'Default Subtitle';
  someObject.buttonColor = someObject.buttonColor || 'blue';
  someObject.disabled =
    someObject.disabled !== undefined ? someObject.disabled : true;
  return someObject;
}
console.log(createOption(someObject));

简洁的写法：

const someObject = {
  title: null,
  subTitle: 'Subtitle',
  buttonColor: null,
  disabled: true,
};
function creteOption(someObject) {
  const newObject = Object.assign(
    {
      title: 'Default Title',
      subTitle: 'Default Subtitle',
      buttonColor: 'blue',
      disabled: true,
    },
    someObject
  );
  return newObject;
}
console.log(creteOption(someObject));

这里最好的方式还是使用对象解构的方式：

const newObj = { {
      title: 'Default Title',
      subTitle: 'Default Subtitle',
      buttonColor: 'blue',
      disabled: true,
    },...someObject}

参考链接

1. 5种使JavaScript代码库更干净的方法