js--ES6减少if...else...拿捏小技巧

1.一般的旧写法

if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
    //其他逻辑
}

1.1 用ES6 语法 简写

if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
   // 其他逻辑
}

1.2 用正则简写

if (/abc|def|ghi/.test(x)) { 
	// 其他逻辑
}

1.3 空值判断

//旧写法
if(value !== null && value !== 'undefined' && value !== '' && typeOf(value) != 'undefined'){
    //...
}
 
//新写法
if( (value??'') !== ""){
 
}
 
|| 和 ??的区别
 
数值为  "" 或者 0 时，   || 为 false   ?? 为true。

2.使用三元运算符

// 新手的写法
let test= boolean;
if (x > 100) {
    test = true;
} else {
    test = false;
}
// 简写表达式
let test = (x > 10) ? true : false;
// 更直接的
let test = x > 10;
console.log(test);

3.使用 switch…case…

 this.changeTab('C')
 
 changeTab(type) {
      switch (type) {
        case 'A':
        case 'B':
          console.log(11111)
          break;
        case 'C':
          console.log(2222)
          break;
        default:
          console.log('最后')
      }
    }

4.对象配置/策略模式

对象配置看起来跟 策略模式 差不多，都是根据不同得参数使用不同得数据/算法/函数。

策略模式就是将一系列算法封装起来，并使它们相互之间可以替换。被封装起来的算法具有独立性，外部不可改变其特性。

let type = 'A'
const status = {
	'A': '高启强',
	'B': '大嫂',
	'C': '安欣',
	'D': '李响' 
}
console.log(status[type]). // 强哥

案例一: 根据code值不同配置不同的产品

const obj = {
      'P1106A1002200000097': {
        passbook: '7.5万元', //存折
        mobileBank: '1万元', //手机银行
        bankCard: '7.5万元', //银行卡
        onlineBanking: '1万元',//网银
        thirdParty: '1万元'  //第三方
      },
      'P1106A1002200000096': {
        passbook: '10万元', //存折
        mobileBank: '1.5万元', //手机银行
        bankCard: '10万元', //银行卡
        onlineBanking: '1.5万元',//网银
        thirdParty: '2万元'  //第三方
      }
    }
 let code = 'P1106A1002200000097'
 console.log(obj['P1106A1002200000097'].passbook,'哈哈哈')

简单分支优化

简单的相等判断

function getUserDescribe(name) {
    const describeForNameMap = {
        小刘: () => console.log("刘哥哥"),
        小红: () => console.log("小红妹妹"),
        陈龙: () => console.log("大师"),
        李龙: () => console.log("师傅"),
        大鹏: () => console.log("恶人"),
    };
    describeForNameMap[name] ? describeForNameMap[name]() : console.log("此人比较神秘！");
}
getUserDescribe('小刘')

复杂分支优化

不只是简单的相等判断，还具有一些需要计算的表达式时

const describeForNameMap = [
    [(name) => name.length > 3, () => console.log('长度大于3')],
    [(name) => name[0] === '陈', () => console.log('陈陈陈')],
    [(name) => name === '大鹏', () => console.log('这是大鹏')],
    [(name) => name[0] === '李' && name !== '李鹏', () => console.log('小李')]
  ]
  function getUserDescribe(name) {
    const getData = describeForNameMap.find((item) => item[0](name))
    getData ? getData[1]() : console.log('此人很神秘');
  }
  getUserDescribe('陈2222222')