JS中关于if的“优化”小技巧

在前端开发中，if的使用是非常高的，几乎无时无刻不在使用if。本文为大家介绍几个可以替换if的方式。仅供参考。实际的开发中未必都是合适的。也许if反而更合适。

1. 可以替换if的方式

1.1 使用switch

使用if的方式

if(state === 0) {
    console.log('未提交');
} else if(state === 1) {
    console.log('待审核');
} else if(state === 2) {
    console.log('已通过');
} else {
    console.log('未通过');
}

使用switch的方式

switch(state) {
    case 0:
        console.log('未提交');
        break;
    case 1:
        console.log('待审核');
        break;
    case 2:
        console.log('已通过');
        break;
    default:
        console.log('未通过');
}

1.2 使用数组的方式

比如上面的这个对于状态的显示判断，我们也是可以通过定义数组去显示的。为什么可以呢，因为上面的state的值刚好是对应数组的下标。所以我们定义数组去实现

const stateList = ['未提交', '待审核', '已通过', '未通过'];
const state = 0;
console.log(stateList[state]);

1.3 使用对象或者Map

假设我们上面的状态不是数字了，而是字母或者其他的字符，那么应该怎么办呢？那么此时我们就可以通过使用对象来进行处理。

const stateMap = {
    'W': '未提交',
    'D': '待审核',
    'T': '已通过',
    'B': '未通过',
}
const state = 'D';
console.log(stateMap[state]);

1.4 三元运算符

state === 0 ? '否' : '是';

2. 开发中使用事例

2.1 利用对象或者Map去执行不同的方法

我在开发可视化表单的时候，我需要处理用户在拖拽组件放到画布的时候为用户创建不同的组件。这个时候表单的组件是有非常多的，如果我使用if的话，就会写非常多的if、else if，此时我就可以利用对象的方式去优化这个。

假设我的表单组件有Select、Input、AutoComplete、InputNumber、TextArea这些 那么我就可以按以下的方式去写

const createFormComMap = {
    Select: function() { console.log('create Select'); },
    Input: function() { console.log('create Input'); },
    AutoComplete: function() { console.log('create AutoComplete'); },
    InputNumber: function() { console.log('create InputNumber'); },
    TextArea: function() { console.log('create TextArea'); },
}

const componentIs = 'Select';

createFormComMap[componentIs]();

2.2 利用数组的方式显示不同的状态

我在开发设备转移的时候，设备转移单上是有个审批状态，审批状态分别是0：保存、1：提交、2：审批通过、3：驳回这几个状态的，我就可以利用数组去处理这个状态的显示的。

const stateList = ['保存', '提交', '审批通过', '驳回'];
const state = 0;
console.log(stateList[state]);

2.3 提前return结束执行

这个还是使用if只是我认为这样处理更容易理解和维护

if(a === 1) {
    console.log('提示1');
} else if (a === 2) {
    console.log('提示2');
} else {
    // 发送请求
    fetch('xxxx')
}; 

if(a === 1) {
    console.log('提示1');
    return;
} 
if (a === 2) {
    console.log('提示2');
    return;
} 
// 发送请求
fetch('xxxx')

我们有时候在写函数的时候可能这个函数的作用就是根据传进来的值来返回不同的结果。可能有时候我们是这样写的，如下：

function getActValue(a) {
    if (a === 666) {
        return '牛*';
    } else {
        return '💩';
    }
}

这个地方其实我们是不需要使用else的，因为上面的if执行完就return了，函数也就结束了不会执行下面的逻辑了。所以我们也可以按以下的方式去写。

function getActValue(a) {
    if (a === 666) {
        return '牛*';
    } 
        return '💩';
    
}