if else套娃码

注：仅记录

if else 一般不建议嵌套超过三层，过多的 if else 嵌套，代码的认知复杂度会很高，可读性不好。

1. if => switch

checkAge(age) {
  if (age < 0) {
    return "Age must be a positive number"
  }
  if (age < 18) {
    return "You are not yet an adult"
  }
  if (age < 60) {
    return "You are an adult"
  }
  return "You are a senior citizen"
}

// 使用switch case
checkAgeSwitch(age) {
    switch(true) {
       case age < 0: 
            return "Age must be a positive number"; 
        case age < 18: 
            return "You are not yet an adult"; 
        case age < 60: 
            return "You are an adult"; 
        default: return 'You are a senior citizen'; 
    }
}
checkAgeSwitch(12) // You are not yet an adult

2. if => 数组、对象

checkWeek(week) {
  if (week == 0) {
    return "Today is Sun"
  }
  if (week == 1) {
    return "Today is Mon"
  }
 if (week == 2) {
    return "Today is Tues"
  }
  if (week == 3) {
    return "Today is Wednes"
  }
  if (week == 4) {
    return "Today is Thurs"
  }
  if (week == 5) {
    return "Today is Frid"
  }
  return "Satur"
}

// 方案一：用数组的方式
checkWeekArr(n) {
    const weekStr = ["Sun", "Mon", "Tues", "Wednes", "Thurs", "Frid", "Satur"]
    return "Today is " + weekStr[n]
}
// 方案二：用对象的方式
checkWeekObj(n) {
    const weekObj = {
        0: "Sun",
        1: "Mon",
        2: "Tues",
        3: "Wednes",
        4: "Thurs",
        5: "Frid",
        6: "Satur"
    }
    return "Today is " + weekObj[n]
}
checkWeekObj(2) // Today is Tues

3. 单一条件逻辑

checkSex(str) {
    if(str == 'male') {
        return '性别为男性'
    }else {
        return '性别为女性'
    }
}

// 三元
checkSex(str) { 
   return str == 'male' ? '性别为男性' : '性别为女性' 
}

// 前
if ( type === 1) {
  console.log(1)
} else {
  console.log(2)
}
// 后
type === 1 ? console.log(1) : console.log(2)

4. 单个if => 使用 && ||

if (e) { 
  this.getUser()
 }

e && this.getUser()

5. 多条件判断

// switch场景
switch (type) {
	case 0:
	// 场景0
	break
	case 1:
  // 场景1
	break
	case 2:
	// 场景2
	break
	case 3:
	// 场景3
	break
 // 场景...
	default:
}
 
// if else 场景
if (type === 0) {
	// do sth ...
} else if (type === 1) {
	// do sth ...
} else if (type === 2) {
	// do sth ...
} else if (type === 3) {
	// do sth ...
}

let types = [1,2,3,4];
if (types.includes(type)) {
  // do sth ...
}

6. 多个嵌套

getHobby(res) {
  if (res.data) {
  if (res.data.userInfo) {
      if (Array.isArray(res.data.userInfo.hobby)) {
        if (res.data.userInfo.hobby.length) {
          // 进行业务逻辑操作
          return res.data.userInfo.hobby;
        } else {
          return "hobby字段为空";
        }
      } else {
        return "hobby字段不是一个数组";
      }
    } else {
      return "userInfo字段不存在";
    }
  } else {
    return "data字段不存在";
  }
}

//  卫语句
if (!res.data) return "data字段不存在";
if (!res.data.userInfo) return "userInfo字段不存在";
if (!Array.isArray(res.data.userInfo.boddy)) return "hobby字段不是一个数组";
if (res.data.userInfo.hobby.length) {
  // 进行业务逻辑操作
}

//  try catch
try {
  // 有可能出现错误的代码写在这里
  if (res.data.userInfo.hobby.length) {
    // 进行业务逻辑操作
  }
} catch (error) {
  // 出错后的处理写在这里
}

// 可选链优化
if (res?.data?.userInfo?.hobby?.length) {
  // 进行业务逻辑操作
}
// 操作符 *?.* 会检查操作符左边的值是否是空值。
//如果是 null 或 undefined，这个表达式就终止然后返回 undefined。否则，这个表达式继续执行检查 。

7. Map

// 当状态很多时，就要写很多对应的函数，造成重复且单一的操作
let statusMap = new Map([
	[200, do200Case],
	[400, do400Case],
	[401, do401Case],
    [500, do500Case],
])
// 定义对应的方法：
do200Case(){
  // 状态码 200 逻辑处理
}
do400Case(){
 // 状态码 400 逻辑处理
}
do401Case(){
 // 状态码 401 逻辑处理
}
do500Case(){
 // 状态码 500 逻辑处理
}
//当符合某个状态时，执行相应的操作
statusMap.get(type)()

8. 策略模式
   [ if 分支判断转换成了 key 、 value 对应值 ]

// 根据职业描述
getInfomation(name) {
    const describeMap = {
      teacher: () => console.log("老师"),
      chef: () => console.log("大厨"),
      soldier: () => console.log("军人"),
      driver: () => console.log("滴滴司机"),
      waiter: () => console.log("服务员"),
    };
   return describeMap[name] ? describeMap[name]() : console.log("没找到！");
}
getInfomation('teacher'); // 老师
getInfomation('default'); // 没找到！

9. 二维数组

const describeMapArrary = [
    [
        (name) => name === 'teacher', // 判断条件
        () => {
          // 业务逻辑处理...
          console.log('teacher',"老师") // 执行函数
        }
    ],
    [
        (name) => name === 'chef', 
        () => {
           // 业务逻辑处理...
          console.log('chef',"大厨")
        }
    ],
    [
        (name) => name === 'soldier', 
        () => {
          // 业务逻辑处理...
          console.log('soldier',"军人")
        }
    ],
    [
        (name) => name === 'driver', 
        () => {
          // 业务逻辑处理...
          console.log('driver',"滴滴司机");
          return 'driver场景的返回值'; // 返回值场景
        }
    ],
];
    
getDescribeName(name) {
    // 获取符合条件的子数组
    const getDescribe = describeMapArrary.find((item) => item[0](name));
    // 子数组存在则运行子数组中的第二个元素（执行函数）
    return getDescribe ? getDescribe[1]() : console.log('default',"没找到！");
}
// 查询map中存在的条件
getDescribeName('soldier'); // 'soldier', 军人
// 查询map中存在的条件并返回函数处理值
console.log(getDescribeName('driver'));  // 'driver', 滴滴司机   // driver场景的返回值
// 查询map中不存在的条件
getDescribeName('fuchaoyang');  // 'default', 没找到！