React/ES6中如何避免多if条件？求数据校验代码优化方案

嘿，针对你这段重复的data属性校验逻辑，我给你一个既简洁又好维护的最优方案，彻底摆脱一堆零散if判断的困扰！

先回顾下你当前的验证代码：

let data = {name: "aa", phone: 1, email: "", address: "", age: 0, gender: " "}
let selectedmemberStatus = true;
if(data.name == "" || data.name.length < 2) selectedmemberStatus = false;
if(data.phone == "") selectedmemberStatus = false;
if(data.email == "") selectedmemberStatus = false;
if(data.address == "" || data.address.length < 3) selectedmemberStatus = false;
if(data.age == "" || data.age == 0) selectedmemberStatus = false;
if(data.gender == "") selectedmemberStatus = false;

最小化且易扩展的实现思路 #

核心是把每个字段的校验规则抽象成配置数组，然后利用JavaScript数组的every()方法一次性完成所有校验。这样做不仅代码量锐减，后续新增/修改字段规则也只需要调整数组，不用改一堆判断语句：

const data = {name: "aa", phone: 1, email: "", address: "", age: 0, gender: " "};

// 定义每个字段的校验规则：[字段名, 校验函数]
const validationRules = [
  ['name', val => val.trim().length >= 2],
  ['phone', val => val !== ""],
  ['email', val => val !== ""],
  ['address', val => val.trim().length >= 3],
  ['age', val => val !== "" && val !== 0],
  ['gender', val => val.trim() !== ""] // 这里处理了空格的情况，更严谨
];

// 所有规则通过则status为true，否则为false
const selectedmemberStatus = validationRules.every(([key, validator]) => validator(data[key]));

方案优势 #

• 简洁性：把6个if判断浓缩成几行代码，结构更紧凑
• 可读性：规则数组清晰展示每个字段的校验要求，比零散的if更容易看懂
• 可维护性：新增字段校验？直接在数组里加一行就行；修改规则？只改对应校验函数
• 鲁棒性：every()会自动遍历所有规则，不会漏掉任何一个字段的判断

小提示：如果你的业务里允许字段是空格（比如gender的" "算有效），可以去掉trim()，根据实际需求调整校验函数即可。

内容的提问来源于stack exchange，提问作者Nikhil Gowda