如何简化JavaScript多对象属性的非空校验逻辑？

我需要实现这样的逻辑：当对象values的所有指定属性均不为空字符串时，启用下一步按钮，否则禁用。

当前的代码实现如下：

const handleButton = () => {
  if(
        values.streetAdress !== ""
     && values.postalCode !== ""
     && values.city !== ""
     && values.sex !== ""
     && values.birthName !== ""
     && values.birthPlace !== ""
     && values.birthday !== ""
     && values.country !== ""
     && values.family !== ""
     && values.insuranceID !== ""
  ){
    setDisabeld(false)
  }else{
    setDisabeld(true)
  }
}

请问是否有办法一次性校验所有属性，从而简化该判断表达式？

当然可以，你可以把需要校验的属性名整理成数组，结合数组的every()方法统一校验，代码会更简洁，也方便后续维护：

方法一：指定属性列表校验 #

这种方式适合只需要校验部分属性的场景，把要检查的字段列成数组，再逐一验证：

const handleButton = () => {
  // 列出所有需要校验的属性名
  const requiredFields = [
    'streetAdress', 'postalCode', 'city', 'sex', 
    'birthName', 'birthPlace', 'birthday', 'country', 
    'family', 'insuranceID'
  ];
  // 校验所有指定属性是否都不为空字符串
  const allFieldsFilled = requiredFields.every(field => values[field] !== "");
  // 直接设置按钮禁用状态（注意取反，allFieldsFilled为true时启用按钮，即setDisabled(false)）
  setDisabeld(!allFieldsFilled);
}

优势：

• 一目了然看到需要校验的字段，逻辑清晰
• 后续新增或删除校验字段，只需修改requiredFields数组，无需改动判断逻辑
• every()会短路执行，只要发现空字段就停止校验，性能和原代码一致

方法二：校验对象全部属性（如果所有属性都需要校验） #

如果values对象的所有属性都需要检查是否为空字符串，还能进一步简化：

const handleButton = () => {
  const allFieldsFilled = Object.values(values).every(val => val !== "");
  setDisabeld(!allFieldsFilled);
}

注意：这种方式会校验values的所有属性，若只需校验部分字段，优先用第一种方法。

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