If else 并在 Javascript 中切换大小写答案

【问题标题】：If else and switch case alternative in JavascriptIf else 并在 Javascript 中切换大小写
【发布时间】：2022-01-02 14:03:56
【问题描述】：

寻找条件语句的替代方案。从我的代码中可以看出，这个过程过于重复和杂乱无章。随着代码规模的扩大，维护代码将变得越来越困难。为了避免这种情况，我正在寻找替代方案。

function validate(values) {
  let errors = {};
  //   Email Error
  if (!values.email) {
    errors.email = "Email address is required";
  } else if (!/\S+@\S+\.\S+/.test(values.email)) {
    errors.email = "Email address is invalid";
  }
  //   Password Error
  if (!values.password) {
    errors.password = "Password is required";
  } else if (values.password.length < 6) {
    errors.password = "Password must be 6 or more characters";
  }
  return errors;
}

【问题讨论】：

看起来不错，你最多可以这样做。您最多可以将每种错误类型划分为单独的函数
它也不过分重复。每个案例以不同的方式处理一个字段。如果您担心规模（即包含大量字段的大量表单），您最终可能希望查看 Yup 之类的内容以进行表单验证。

标签： javascript if-statement switch-statement

【解决方案1】：

您可以将一些逻辑移动到配置中。尝试协调检查，使它们都依赖于正则表达式。因此，对于 6 的最小长度，使用 /....../ 作为正则表达式。还要确保正则表达式不会接受空字符串，以防该字段被认为是必需的。

例如：

// All specifics are encoded here:
const checks = [
    { field: "email", regex: /^\S+@\S+\.\S+$/, name: "Email address", msg: "must be 6 or more characters" },
    { field: "password", regex: /....../, name: "Password", msg: "is invalid" },
];

// ...while this is now (more) generic:
function validate(values) {
    const errors = {};
    for (const {field, regex, name, msg} of checks) {
        if (!regex.test(values[field])) {
            errors[field] = name + " " + (values[field] ? msg : "is required");
        }
    }
    return errors;
}

【讨论】：

这是一个好方法。该代码易于更新和维护。 :D

【解决方案2】：

您可以使用myObject[nameOfYourColumn]访问js对象中的列

所以我们可以考虑构建一个这样的泛型方法

function validateColumn(object, columnName, format, errors) {
  if (!object[columnName]) {
       errors[columnName] = `${columnName} is required`;
  } else if (!format.test(object[columnName])) {
      errors[columnName] = `${columnName} is invalid`;
  }
}

你的方法会变成

function validate(values) {
  let errors = {};
  //   Email Error
  validateColumn(values, 'email', '/\S+@\S+\.\S+/', errors);
  //   Password Error
  validateColumn(values, 'password', '/^.{6,}$/', errors);
  return errors;
}

【讨论】：

【解决方案3】：

目前，验证功能用于密码和电子邮件。

但是，这可以分为两个功能，一个用于验证电子邮件，另一个用于验证密码。这有助于将验证电子邮件与验证密码的操作分离，并使调试/维护更容易。

此外，如果您想让 if-else 子句不那么混乱，您可以尝试三元运算符。

function validate(values) {
    errors = {};
    errors.email = validate_email(values.email) == null
        ? null : validate_email(values.email);

    errors.password = validate_password(values.password) == null 
        ? null : validate_password(values.password);
  
    return errors;
}

function validate_email(email) {
    if (email == null) {
        return "Email address is required";
    } else if (!/\S+@\S+\.\S+/.test(values.email)) {
        return "Email address is invalid";
    } 
    
    return null;
}

//validate_password left as an exercise

【讨论】：

你可以试试 switch case 而不是 If Else