if语句优化

该文档主要介绍如何优化if语句，提高代码可读性

三元表达式

三元表达式适用于比较简单的ifelse语句，没有过多复杂的业务处理代码

// 优化前：
let userName = "";
if (user.name === "admin") {
  userName = "超级管理员"
} else {
  userName = "普通人员"
}
// 优化前：
let userName = "普通人员";
if(user.name === "admin"){
  userName = "超级管理员"
}
// 优化后：
let userName = user.name==="admin"?"超级管理员":"普通人员"

也可以多次嵌套

//优化前:
let level= "普通人员";
if(user.name === "admin"){
  userName = "超级管理员"
}else if(user.name==="normal"){
	userName ="管理员"
}
//优化后：
let userName = user.name==="admin"?"超级管理员":(user.name==="normal"?"管理员":"普通人员")

逻辑运算符

关于逻辑运算符点击 逻辑运算符 查看
示例一

function sayHello(name){
	if(!name){
		name = "张三"
	}
	return `你好呀~${name}`
}
function sayHello(name){
	name = name||'张三'
	return `你好呀~${name}`
}
sayHello()			//你好呀~张三
sayHello("李四")	//你好呀~李四

示例二

//优化前:
if (x >= 15) {
  value = 4
} else if (x >= 12) {
  value = 3
} else if (x >= 10) {
  value = 2
} else if (x >= 5) {
  value = 1
} else {
  value = 0
}
// 优化后：
let value = (x>=15 && 4) || (x>=12 && 3) || (x>=10 && 2) || (x>=5 && 1) || 0

map映射

主要用于复杂的ifelse switch语句,通过自定义条件映射表listMap(可以是[]或者{},根据实际业务场景来决定)再遍历处理

数组Map

//优化前:
let text = '--'
if(index===1){
    text = '未完成'
}else if(index===2){
    text = '进行中'
}else if(index === 3){
    text = '已完成'
}
//优化后
const map = ['','未完成','进行中','已完成']
let text = map[index]||'--'

对象Map 例1

//优化前
  if(type==='zhangsan') {
      url='a/aa',
      data = {
          name:'张三',
          age:12
      }
  }else if(type==='lisi'){
      url = 'b/bb',
      data = {
          name:'李四',
          age:20,
          sex:'男'
      }
  }else if(type==='wangwu'){
      url = 'c/cc',
      data = {
          name:'王五',
      }
  }
  $.ajax({ url, data })

  //优化后
    const map = {
    zhangsan:{
        url:'a/aa',
        data:{name:'张三',age:12}
    },
    lisi:{
        url:'b/bb',
        data:{name:'李四',age:20,sex:'男'}
    },
    wangwu:{
        url:'c/cc',
        data:{name:'王五'}
    }
  }
  let {url,data} = map[type]
  $.ajax({ url, data })

实际项目中的优化

示例一

示例二

示例三