JavaScript复杂条件判断优化

前言

我们在写 JavaScript 代码的时候，通常涉及条件判断时，最常用的就是if/else，再复杂一点，用switch基本就解决了。但遇到逻辑判断比较复杂的情况，这三个场景会显的力不从心，或代码重复。

如何优化复杂的条件判断逻辑呢？

我们下来这个例子中，看一下几种方案
例子说明：通过组件类型dataType，控制相关属性的显示

1、常规If/Else逻辑

// 根据数据类型返回需要渲染的字段
const getTypes = (dataType: number) => {
  if (dataType == 1) {
    return ["treeLeafFlag", "initializeFlag"];
  } else if (dataType == 2) {
    return ["initializeFlag"];
  } else if (dataType == 3) {
    return ["select"];
  } else if (dataType == 4) {
    return ["select"];
  } else {
    return [""];
  }
};

如果同一类型有重复的属性，就需要在if中使用|| 或者返回值重复的情况，但逻辑上显然不够清晰。

const getTypes1 = (dataType: number) => {
  if (dataType == 1) {
    return ["treeLeafFlag", "initializeFlag"];
  } else if (dataType == 2) {
    return ["initializeFlag"];
  } else if (dataType == 3 || dataType == 4) {
    return ["select"];
  } else {
    return [""];
  }
};

2、使用Swith优化

下面的代码与if/else相比，代码逻辑上更易于理解。

// 使用switch语句优化复杂判断
const getTypes = (dataType: number) => {
  switch (dataType) {
    case 1:
      return ["treeLeafFlag", "initializeFlag"];
    case 2:
      return ["initializeFlag"];
    case 3:
    case 4:
      return ["list"];
    default:
      return [""];
  }
};

3、借用对象属性使用一元条件的匹配

把判定条件作为对象的属性名，把处理逻辑作为对象的属性值，通过查找对象属性进行逻辑判断，这种特别适合单一条件属性过滤。

const getTypes = (dataType: number) => {
	const files: any = {
	  "1": ["treeLeafFlag", "initializeFlag"],
	  "2": ["initializeFlag"],
	  "3": ["select"],
	  "4": ["select"],
	  default: [""],
	};
	let action = files[status] || files["default"];
    return action;
}

4、对象查的的升级，多对多的关系的应用

如果是多对多的关系，使用swith时，配置上清晰，但代码上涉及共用属性时，会用大量的case属性共享一个break情况，有没有可以简化的代码呢？可以看一下下面的代码。

/**
 * 组件属性静态配置
 * 由于控件类型和属性存在多对多的关系，所以使用数组进行配置
 * 由于对象的key不能是数组，所以用逗号分隔的字符串进行配置
 */

function getAttributeVisible(dataType: string) {
  const attributeConfig = [
    {
      "1,2,5,18": ["treeLeafFlag", "initializeFlag"], 
    },
    {
      "6,11": ["picker","showTime","dateFormat"], 
    },
    {
      "7,15,8,13,19": ["max","min","isSum"],
    },
  ];
  let attibutes = [];
  // 遍历配置项，找到与当前数据类型匹配的配置项，然后取出配置项中的属性值
  for (const item of attributeConfig) {
    if (Object.keys(item).toString().includes(dataType)) {
      attibutes = Object.values(item) || [];
      break;
    }
  }
  return attibutes;
}

写在最后

以上只是日常开发中的一些实践思路，相信还有其他更好的实践方法，期待大家补充，一起探索最佳实践。