前端开发中的常用工具函数(六)

🔍 十四、every () 方法：

在前端业务逻辑中，我们经常需要判断一个数组是否"全部满足"某个条件。例如：勾选列表中的所有项是否都已审核？表单中的所有字段是否都已填写合法？

面对这种"全真即真，一假即假"的逻辑，Array.prototype.every() 是最优雅、最高效的解决方案。它是数组校验的"守门员"，只要有一个"违规"，大门就会关闭。

every() 方法测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值。

核心逻辑：

如果回调函数对每一个 元素都返回 true，则 every() 返回 true。
只要有一个元素导致回调函数返回 false，every() 立即停止遍历并返回 false（短路特性）。

1. 基本语法

javascript 复制代码

arr.every(callback(element[, index[, array]])[, thisArg])

参数解析：

callback ：用来测试每个元素的函数。
- element：数组中当前正在处理的元素。
- index：正在处理的元素的索引（可选）。
- array：调用了 every 的数组本身（可选）。
thisArg ：执行 callback 时使用的 this 值（可选）。

返回值：

true：所有元素都通过测试，或数组为空。
false：有任意元素未通过测试。

2. 基础示例

(1) 基础类型校验

检查数组中所有数字是否都小于 40。

javascript 复制代码

const numbers = [1, 30, 39, 29, 10, 13];

const isAllSmall = numbers.every(num => num < 40);

console.log(isAllSmall); // 输出: true

(2) 对象属性校验

检查所有学生的分数是否都及格（大于等于 60 分）。

javascript 复制代码

const students = [
  { name: 'Alice', score: 85 },
  { name: 'Bob', score: 92 },
  { name: 'Charlie', score: 78 }
];

const isAllPassed = students.every(student => student.score >= 60);

console.log(isAllPassed); // 输出: true

(3) 短路特性演示

一旦遇到不符合条件的元素，立即停止。

javascript 复制代码

const arr = [1, 2, 3, 4, 5];

const result = arr.every(item => {
  console.log(`正在检查: ${item}`);
  return item < 3; 
});

// 控制台输出:
// 正在检查: 1
// 正在检查: 2
// 正在检查: 3
// result: false (遇到3停止，4和5不会被检查)

3. 企业开发中的实际应用场景

every() 在企业级开发中常用于权限控制、表单验证和状态判断。

场景 1：批量操作的按钮禁用逻辑

后台管理系统中，用户勾选了多条数据进行"批量删除"，要求所有选中的数据状态必须是"待审核"才能删除。只要有一条数据状态不符，按钮就置灰。

javascript 复制代码

const selectedRows = [
  { id: 1, status: 'pending' },
  { id: 2, status: 'pending' },
  { id: 3, status: 'approved' } // 这条状态不对
];

// 检查是否所有选中行都是 'pending' 状态
const canBatchDelete = selectedRows.every(row => row.status === 'pending');

console.log(canBatchDelete); // 输出: false

// 实际应用：
// <Button disabled={!canBatchDelete}>批量删除</Button>

场景 2：复杂表单的"下一步"按钮

分步表单中，只有当前步骤的所有必填项都已填写且合法，才能点击"下一步"。

javascript 复制代码

const formData = [
  { field: 'username', value: 'admin', required: true },
  { field: 'email', value: 'admin@example.com', required: true },
  { field: 'phone', value: '', required: false } // 非必填，空值也无所谓
];

const isStepValid = formData.every(item => {
  // 如果是必填项，检查是否有值
  if (item.required) {
    return item.value.trim() !== '';
  }
  // 非必填项直接通过
  return true;
});

console.log(isStepValid); // 输出: true

场景 3：权限全量匹配

某些高级功能要求用户同时拥有多项权限才能解锁。

javascript 复制代码

const userPermissions = ['read', 'write', 'delete'];
const requiredPermissions = ['read', 'write'];

// 检查用户是否拥有所有必需权限
const hasAccess = requiredPermissions.every(perm => userPermissions.includes(perm));

console.log(hasAccess); // 输出: true

4. 注意事项与常见陷阱

虽然 every() 简单好用，但有一个数学逻辑上的特殊情况容易引发 Bug。

(1) 空数组的"悖论"

如果对空数组 调用 every()，无论条件是什么，它都返回 true。

这符合数学逻辑（空真，Vacuous truth）：因为数组中没有元素，所以"没有元素不满足条件"。

业务陷阱：

如果一个列表数据是空的（比如搜索无结果），此时用 every 校验按钮状态，可能会意外让按钮变为可点击状态。

javascript 复制代码

const emptyList = [];
const result = emptyList.every(item => item.id > 100); 
console.log(result); // 输出: true (需警惕！)

解决方案： 在业务逻辑中结合数组长度判断，如 list.length > 0 && list.every(...)。

(2) 不修改原数组

every 不会改变原数组，但在回调函数中修改数组元素是可能的，但不推荐，这会降低代码可读性并引发副作用。

(3) 区分 every 与 some

every ：逻辑与 (AND)。全部满足才为 true。
some ：逻辑或 (OR)。只要有一个满足就为 true。

不要混淆。例如"批量操作按钮禁用"通常用 every 检查一致性，而"显示标签"可能用 some 检查是否有特定属性。