JavaScript中如何应用DRY原则简化含多个||判断的重复代码？

核心优化思路 #

当前代码的重复点在于多个字段都执行了相同的「转大写+判断包含过滤值」逻辑，且通过||串联判断，我们可以借助数组的some()方法批量处理校验逻辑，完全符合DRY原则。

优化后代码（ES6+ 环境） #

// 所有需要校验的字段统一存入数组管理
const isMatch = [titleValue, sepiValue, discValue, dateValue].some(item => 
  item.toUpperCase().indexOf(filter) > -1
)
movieCard[i].style.display = isMatch ? "" : "none"

可选项优化点 #

如果业务逻辑允许，还可以做两处细节优化：

• 把过滤值filter也做转大写处理，避免用户输入小写过滤值时匹配失效的问题
• 用更语义化的includes()方法替代indexOf() > -1判断
  修改后代码如下：

const filterUpperCase = filter.toUpperCase()
const isMatch = [titleValue, sepiValue, discValue, dateValue].some(item => 
  item.toUpperCase().includes(filterUpperCase)
)
movieCard[i].style.display = isMatch ? "" : "none"

ES5 兼容版本（适配不支持ES6语法的旧环境） #

var checkFields = [titleValue, sepiValue, discValue, dateValue];
var isMatch = false;
for (var n = 0; n < checkFields.length; n++) {
  if (checkFields[n].toUpperCase().indexOf(filter) > -1) {
    isMatch = true;
    break; // 匹配到就跳出循环，减少不必要的性能消耗
  }
}
movieCard[i].style.display = isMatch ? "" : "none";

优化收益 #

• 完全消除重复的校验逻辑代码，后续新增/删除校验字段只需要修改数组内容即可，维护成本大幅降低
• 逻辑更清晰直观，some方法天然对应原代码的「任一条件满足即成立」的或逻辑
• 性能无损耗，some方法匹配到第一个符合条件的元素就会终止遍历，和原||的短路逻辑一致

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