检查多个变量的最佳实践：如何编写更简洁的校验代码？

你当前的代码通过逐一判断每个jQuery对象的length来校验元素是否存在，确实可以通过数组方法或jQuery特性来简化代码，以下是几种更清晰简洁的实现方式：

方案一：数组结合some()方法 #

把所有jQuery对象存入数组，利用some()方法快速判断是否存在未找到的元素：

// 先将所有元素对象存入数组
const elements = [$("#var1"), $("#var2"), $("#var3"), $("#var4"), $("#var5")];

// some()只要有一个元素满足条件就返回true
if (elements.some(el => el.length === 0)) {
  alert('Not all elements have been added :( ');
  return;
}

这种写法逻辑直观，和原代码的判断逻辑完全一致，而且避免了重复的||判断。

方案二：利用jQuery多选择器简化 #

如果这些元素的ID可以用多选择器一次性获取，还能连变量声明一起简化：

// 用逗号分隔多个选择器，一次性获取所有目标元素
const elements = $("#var1, #var2, #var3, #var4, #var5");

// 只要返回的集合长度不等于预期的5，就说明有元素缺失
if (elements.length !== 5) {
  alert('Not all elements have been added :( ');
  return;
}

注意：这种方式要求页面中所有目标ID唯一，否则会出现长度计算错误。

方案三：数组结合every()方法反向判断 #

用every()判断是否所有元素都存在，取反后得到原逻辑的判断结果：

const elements = [$("#var1"), $("#var2"), $("#var3"), $("#var4"), $("#var5")];

// every()要求所有元素都满足条件才返回true，取反即表示存在缺失元素
if (!elements.every(el => el.length > 0)) {
  alert('Not all elements have been added :( ');
  return;
}

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