代码优化——JS条件语句

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

前言

上一篇文章重新回顾了js中的条件语句，但是在日常开发中使用，常常因为复杂的逻辑判断使得代码变得异常臃肿、难以维护，今天来学习如何优化js条件语句，让代码更加简洁规范。

1. if语句优化

举例说明：

a. 情况一

上一篇文章中的小案例，需要按下enter键才会执行里面的判断成绩代码块，我们可以把判断成绩代码块封装成一个函数judScore，使用逻辑运算符 &&与 (前者为假后者不判断)优化，优化的代码如下：

scoreDiv.addEventListener('keydown', event => {
  const flag = event.keyCode === 13
  flag && judScore() //当flag为真时，才会执行judScore函数
})

b. 情况二

函数调用未提供参数则使用默认值的情景，使用逻辑运算符 ||或 (前者为真后者不判断)优化

优化前的代码：

function myName(name) {
  if(!name){
      name = '无名';
  };
  console.log(name);
};
myName(); //无名
myName('sherlockkid7'); //sherlockkid7

优化后的代码：

name = name || '无名' //当name有值时,后面的默认值就被忽略了，而name无值时,便会取默认值

if语句可以使用逻辑运算符&&与或者 ||或进行优化处理

2. if…else语句优化

举例说明：

判断函数调用时传递的参数是否为null值，使用三元运算符（常见的用法是处理可能为 null 的值）优化

三元运算符的表达式只能是单语句，通常与return结合起来使用

function greeting(person) {
    let name ;
    if(person){
      name = person.name;
    }else{
      name = "stranger";
    }
    return "Howdy, " + name;
}

// 优化后的代码
function greeting(person) {
    const name = person ? person.name : "stranger";
    return "Howdy, " + name;
}

console.log(greeting({name: 'Alice'}));  // "Howdy, Alice"
console.log(greeting(null));             // "Howdy, stranger"

3. if语句多条件优化

举例说明：

图片有多种类型的格式，如格式为jpg、png、gif、svg等等。需要把这些格式的文件都作为图片文件。

使用Array.includes方法来处理多重条件

function test(type) {
  if (type === 'jpg' || type === 'png' || type === 'gif' || type === 'svg') {
    console.log("该文件为图片");
  }
}
//优化后的代码
function test(type) {
    const imgArr = ['jpg', 'png', 'gif', 'svg']；
    if (imgArr.includes(type)) {
        console.log("该文件为图片")；
    }
}

4. 多个分支语句优化

举例说明：

不同角色登录时，存储角色带着的token

通过对象配置做法，将判断条件作为对象的属性名，将处理逻辑作为对象的属性值。当执行代码时，只需从中对象中提取相应的函数执行即可。

function handleClick(params){
  if (params == '销售') {
    const sale = 'sale123456';
    localStorage.setItem('saleToken', sale)
  } else if (params == '执行') {
    const execute = 'execute123456'
    localStorage.setItem('executeToken', execute)
  } else if (params == '用户') {
    const customer = 'customer123456'
    localStorage.setItem('customerToken', customer)
  }
}

const btns = document.querySelectorAll('.btn')
btns.forEach((item) => {
  item.onclick = function(){
    handleClick(item.value)  
  }
})

// 优化后的代码
function handleClick(params) {
  let actions = {
    '销售': function () {
      const sale = 'sale123';
      localStorage.setItem('saleToken', sale)
    },
    '执行': function () {
      const execute = 'execute123'
      localStorage.setItem('executeToken', execute)
    },
    '用户': function () {
      const customer = 'customer123'
      localStorage.setItem('customerToken', customer)
    }
  }
  return actions[params]()
}

Map数据结构优化

对象的键只能是字符串或符号，而Map数据结构的键可以是任何类型的值。

function handleClick(params) {
  let actions = new Map([
    ['销售', function () {/*do something*/ }],
    ['执行', function () {/*do something*/ }],
    ['执行', function () {/*do something*/ }],
  ]);
  return actions.get(params)()
}