代替多个if判断的另一种方法

对于if的使用大家都不陌生，也是js中常用语法，很好用，但是面对处理大量数据，需要多个if判断时，写在我们的项目中就显得low，自己写起来也有些吃力，这里推荐一个小技巧，利用json类型来处理它

举个小例子，大家可以根据项目情况来参考

传统方式代码

        // ------------传统方法------------------
        // 获得来的node数据，每次操作只返回一个node，比如省市区联级，点击一个级别就返回一个node
        const node={
            level:0,
            type:'province'
        }
        // const node={
        //     level:1,
        //     type:'city'
        // }
        // const node={
        //     level:2,
        //     type:'area'
        // }
        const level = node.level
        let requestData = {}
        if (level === 0) {
            requestData.type = 'province'
        }
        
        if (level === 1) {
            requestData.type = 'city'
        }
        
        if (level === 2) {
            requestData.type = 'area'
        }

新方法代码

        const node={
            level:0,
            type:'province'
        }
        const level = node.level
        let requestData = {}
        const jsonType={
            0:{type:'province'},
            1:{type:'city'},
            2:{type:'area'},
        }
        console.log( jsonType[level])
        requestData.type = jsonType[level].type//用一行代码代替if的判断体
        

在大家平常开发过程中条件判断语句 if else 的使用频率还是很高的，特别是满屏的if...else...让人难免看着就头疼。
这里我们在某些特定场景为大家额外提供一种其他的思路。

一、二元逻辑运算符：||

/**
 *在函数定义时，常有若函数调用未提供参数则使用默认值的情景，
*/

function fn(a) {
    if(!a){   //可以使用if else来解决这个问题：
        a = 'test';
    };
};

//有没有更优雅的去除做法呢? 我们可以使用 || 运算符来实现，如下：

function fn(a) {
    a = 'test' || a
}

二、三元运算符： ?  :

/**
*在开发中三元运算的使用场景其实非常多
*有时候根据条件不同我们可能要分别对应返回不同的数据
*/

let fn = function () { //常规if...else...
    let flo = true;
    if (flo) {
        return 1;
    } else {
        return 2;
    };
};
let f = fn(); // 1


//改用三元运算符

let fn1 = function () {
    let flo = true;
    // 三元
    return flo ? 1 : 2;
};
let f1 = fn1();//1

三 、switch case

/**
*短路求值与三元运算符固然好用，但其实有一个遗憾，
*它们都只能解决非A即B的条件判断，凡是条件判断超过两种就显得十分无力了。
*那难道我们只能使用 else if 吗，其实可以使用 switch case。
*/

/**
*例如A情况我们希望A情况输出a，B情况输出b，C情况输出c，其它情况输出d
*用 else if 与switch case分别是这样：
*/
let nm = 'B';
if (nm === 'A') {
    console.log('a');
} else if (nm === 'B') {
    console.log('b');
} else if (nm === 'C') {
    console.log('c');
} else {
    console.log('d');
};

switch (nm) {
    case 'A':
        console.log('a');
        break;
    case 'B':
        console.log('b');
        break;
    case 'C':
        console.log('c');
    default:
        console.log('d');
}

四 、 对象配置

//如果条件超过三种，else if 写起来不太优雅，switch case代码行数也差不多,如下：

function formatData(a) {
  let c = "";
  if (a === 1) {
    c = "汉族";
  } else if (a === 2) {
    c = "苗族";
  } else if (a === 3) {
    c = "维吾尔族";
  } else if (a === 4) {
    c = "回族";
  } else if (a === 5) {
    c = "藏族";
  }
 	// ... 等等等等
  
  return c;
}
var result = formatData(2) // 对应的苗族

//按照我们56个民族来分，我们岂不是要写56个if...else...,这是可以利用配置对象方式来解决

const obj = {
  1: "汉族",
  2: "苗族",
  3: "维吾尔族",
  4: "回族",
  5: "藏族",
  // ...等等等等
};
function formatData(a) {
  return obj[a]
}
var result = formatData(2);  // 苗族

在实际开发遇到过这样一个情景，需要根据用户不同的操作类型对同一份数据进行不同加工，比如新增，修改，删除等。使用 else if ：

function del(){}; // 删除操作
function add(){}; // 新增
function update(){}; // 更新
function process(operateType) {
    if (operateType === 'del') {
        del()
    } else if (operateType === 'add') {
        add()
    } else if (operateType === 'update') {
        update()
    };
};
process('del');// 删除

还有一种很棒的做法就是通过对象配置，将你的操作类型作为key，具体操作的函数作为value，如下：

function del(){}; // 删除操作
function add(){}; // 新增
function update(){}; // 更新
let typeFn = {
    'del': del,
    'add': add,
    'update': update
};
function process(operateType) {
    typeFn[operateType]();
};
process('del'); //删除

也可以使用 ES6 的 map 数据结构，像这样：

let typeFn = new Map([
    ['del_1', function () {/*do something*/ }],
    ['add_2', function () {/*do something*/ }],
    ['update_3', function () {/*do something*/ }],
]);

function process(operateType, status) {
    typeFn.get(`${operateType}_${status}`)();
};
process('del', 1); // 删除

五 、 数组配置

/**
 *处理条件判断时，需要根据某阶段设置不同的数据
 *如[0,100)–a，[100,200)–b，[200,300)–c，[300-无穷]–d
*/

//if...else...
function setNm(mun) {
    if (mun< 100) {
        return 'a';
    } else if (mun< 200 && mun>= 100) {
        return 'b';
    } else if (mun< 300 && mun>= 200) {
        return 'c';
    } else if (mun>= 300) {
        return 'd';
    };
};
let nm = setNm(351); //d

//其实也可以通过数组配置的形式将条件结果抽离出来

function setNm(param) {
    let mun = [300, 200, 100];
    let nm = ['d', 'c', 'b', 'a'];
//对数据做抽离处理，不用加更多的if.else.只对数据处理

    for (let i = 0; i < mun.length; i++) {
        if (param >= mun[i]) {
            return nm[i];
        };
    };
    return nm[nm.length - 1];
};

let nm = setNm(250); //c

当然具体还是得看业务逻辑，如只能使用if...else...我们该用还是得用

引言

在JavaScript开发中，条件判断语句 if else 的使用频率还是很高的
这里我们在某些特定场景为大家额外提供一种其他的思路。

一、二元逻辑运算符：||

在函数定义时，常有若函数调用未提供参数则使用默认值的情景，当然我们可以使用if else来解决这个问题：

function fn(a) {
    if(!a){
        a = 'test';
    };
};

有没有更优雅的去除做法呢？当然，我们可以使用 || 运算符来实现，如下：

function fn(name) {
    name = name || 'test';
};

二、三元运算符： ? :

三元运算符我想大家都不会陌生，在开发中三元运算的使用场景其实非常多，比如我希望为条件为 true时变量为1，反之为0，通过三元运算符我们可以这样做：

let  B = true;
let num;
if (B) {
    num = 1;
} else {
    num = 0;
};
console.log(num);// 1

改用三元运算符

let B = false,
num;
B ? num = 1 : num = 0;
console.log(num); // 0

有时候在开发中函数常常需要 return 一份数据回去，有时候根据条件不同我们可能要分别对应返回不同的数据，三元一行就可以解决啦：

let fn = function () {
    let flo = true;
    if (flo) {
        return 1;
    } else {
        return 2;
    };
};
let f = fn(); // 1

let fn1 = function () {
    let flo = true;
    // 三元
    return flo ? 1 : 2;
};
let f1 = fn1();//1

三 、switch case

短路求值与三元运算符固然好用，但其实有一个遗憾，它们都只能解决非A即B的条件判断，凡是条件判断超过两种就显得十分无力了。那难道我们只能使用 else if 吗，其实可以使用 switch case。

例如A情况我们希望A情况输出a，B情况输出b，C情况输出c，其它情况输出d，用 else if 与switch case分别是这样：

let name = 'B';
//if else if
if (name === 'A') {
    console.log('a');
} else if (name === 'B') {
    console.log('b');
} else if (name === 'C') {
    console.log('c');
} else {
    console.log('d');
};

//switch case
switch (name) {
    case 'A':
        console.log('a');
        break;
    case 'B':
        console.log('b');
        break;
    case 'C':
        console.log('c');
    default:
        console.log('d');
};

四 、 对象配置

如果条件超过三种，else if 写起来不太优雅，switch case代码行数也差不多，就像下面的代码

function formatData(a) {
  let c = "";
  if (a === 1) {
    c = "汉族";
  } else if (a === 2) {
    c = "苗族";
  } else if (a === 3) {
    c = "维吾尔族";
  } else if (a === 4) {
    c = "回族";
  } else if (a === 5) {
    c = "藏族";
  }
 	// ... 等等等等
  
  return c;
}
var result = formatData(2) // 对应的苗族
    

这个要是有64个名族，那我们要写64个else if 啊 ~~，着实有点可怕，那么有没有好的方法呢，看下面代码

const obj = {
  1: "汉族",
  2: "苗族",
  3: "维吾尔族",
  4: "回族",
  5: "藏族",
  // ...等等等等
};
function formatData(a) {
  return obj[a]
}
var result = formatData(2);  // 苗族

上面的代码直接省去64个 else if， 有点小兴奋。

有时候我在实际开发遇到过这样一个情景，我需要根据用户不同的操作类型对同一份数据进行不同加工，比如新增，修改，删除等。那么我用 else if 是这么做的：

function del(){}; // 删除操作
function add(){}; // 新增
function update(){}; // 更新
function process(operateType) {
    if (operateType === 'del') {
        del()
    } else if (operateType === 'add') {
        add()
    } else if (operateType === 'update') {
        update()
    };
};
process('del');// 删除

还有一种很棒的做法就是通过对象配置，将你的操作类型作为key，具体操作的函数作为value，如下：

function del(){}; // 删除操作
function add(){}; // 新增
function update(){}; // 更新
let typeFn = {
    'del': del,
    'add': add,
    'update': update
};
function process(operateType) {
    typeFn[operateType]();
};
process('del'); //删除

当然我们也可以使用 ES6 的 map 数据结构，像这样：

let typeFn = new Map([
    ['del_1', function () {/*do something*/ }],
    ['add_2', function () {/*do something*/ }],
    ['update_3', function () {/*do something*/ }],
]);

function process(operateType, status) {
    typeFn.get(`${operateType}_${status}`)();
};
process('del', 1); // 删除

五 、 数组配置

在处理条件判断时，我们常会遇到条件与对应结果全部已知的情况，比如我们要根据用户的经验设置等级头衔，[0,100)–萌新，[100,200)–骑士，[200,300)–英雄，[300-无限大]–传说，那么用else if怎么写已经没有悬念了：

function youAreMyHero(experience) {
    if (experience < 100) {
        return '萌新';
    } else if (experience < 200 && experience >= 100) {
        return '骑士';
    } else if (experience < 300 && experience >= 200) {
        return '英雄';
    } else if (experience >= 300) {
        return '传说';
    };
};
let level = youAreMyHero(351); //传说

对于这种条件与结果已知的情况，我们其实可以通过数组配置的形式将条件结果抽离出来，像这样：

function youAreMyHero(param) {
    let experience = [300, 200, 100];
    let level = ['传说', '英雄', '骑士', '萌新'];

    for (let i = 0; i < experience.length; i++) {
        if (param >= experience[i]) {
            return level[i];
        };
    };
    return level[level.length - 1];
};

let level = youAreMyHero(250); //英雄

这么做的好处就是便于管理条件与执行结果，如果后面新增了等级判断，我们不用去修改业务逻辑中的 else if 语句长度，只用单纯维护我们抽离的数据即可。

总结

以上，我们大致介绍了五种可取代 if else 的方式，具体还是要看业务需求哦 ~ ~

参考链接

好友链接： 提升代码幸福度，五个技巧减少js开发中的if else语句