js 优雅判断写法(三元、switch...case)

693 阅读1分钟

普通三元写法

name == 'tome' ? true :false
// 三元嵌套三元
name == 'tome' ? 0 :(name == 'meimei' ? 1 :2)

多种可能

  • 多种可能对应同一种情况
if(status == 0 || status == 1 || stauts == 2 || status == 3){
 // do something
}

// 修改后
if([0,1,2,3].includes(status)){
  // do something
}
  • 多种可能对应不同情况
let content = []
if(event == 'click'){
   content = ['jump',clickFunction];
}else if(event == 'blur'){
   content = ['jungle',blurFunction]
}else if(event == 'scroll'){
   content = ['scroll',scrollFunction]
}else {
   content = ['other',otherFunction]
}

// 修改后
let content = []
const eventObject = {
    'click':['jump',clickFunction],
    'blur':['jungle',blurFunction],
    'scroll':['scroll',scrollFunction],
}
content = eventObject[event] || ['other',otherFunction]
  • if...else
if(status === 0) {
    text = '已删除'
} else if (status === 1) {
    text = '未开始'
} else if (status === 2) {
    text = '上课中'
} else if (status === 3) {
    text = '已下课'
} else if (status === 4) {
    text = '已评估'
} else {
    text = '--'
}

// 修改后
switch(status) {
    case 0:
        text = '已删除';
        break;
    case 1:
        text = '未开始';
        break;
    case 2:
        text = '上课中';
        break;
    case 3:
        text = '已下课';
        break;
    case 4:
        text = '已评估';
        break;
    default:
        text = '--';
        break;
}
// 再次修改
const statusTextArray = ['已删除', '未开始', '上课中', '已下课', '已评估'];
text = statusTextArray[status] || '--';

// status 非数值或数值过大
const statusTextObject = {
    100: '已删除',
    101: '未开始',
    102: '上课中',
    103: '已下课',
    104: '已评估'
}
text = statusTextObject[status] || '--';
  • 多值对应多种情况
// limit 权限,status 状态
if (limit === 'super') {
    if(status === 0) { // do ... } 
    else if (status === 1) { // do ... }
    else if (status === 2) { // do ... }
    else if (status === 3) { // do ... }
    else if (status === 4) { // do ... }
} else if (limit === 'normal') {
    if(status === 0) { // do ... } 
    else if (status === 1) { // do ... }
    else if (status === 2) { // do ... }
    else if (status === 3) { // do ... }
    else if (status === 4) { // do ... }
} else {
    // do ...
}
// 修改后
const limitStatusObject = {
    'super-0': () => { // do ... },
    'super-1': () => { // do ... },
    // ...
    'normal-0': () => { // do ... },
    'normal-1': () => { // do ... },
    // ...
}

// 还可以将每个对应的逻辑单独抽出来
const limitStatusObject = {
    'super-0': super0Function,
    'super-1': super1Function,
    // ...
    'normal-0': normal0Function,
    'normal-1': normal1Function,
    // ...
}

limitStatusObject[`${limit}-${status}`].call(this);
// 继续修改
const limitStatusMap = new Map([
  [{limit: 'super',status: 0},()=>{ // do ... }],
  [{limit: 'super',status: 1},()=>{ // do ... }],
  // ...
  [{limit: 'normal',status: 0},()=>{ // do ... }],
  [{limit: 'normal',status: 1},()=>{ // do ... }],
  // ...
]);
const list = [...limitStatusMap].filter(([key,value]) => (key.limit === limit && key.status === status));
list.forEach(([key,value]) => value.call(this));