JavaScript 数组方法 every 的隐藏陷阱，你真的避开了吗？

在学习 JavaScript 的过程中，Array.prototype.every 这个方法可能是你经常使用的工具之一。按照 MDN 的描述，这个方法用于测试数组中的所有元素是否都通过了提供的测试函数，并返回一个布尔值。乍一看，这个方法非常简单易用，但如果不小心，可能会遇到一些隐藏的坑。

简单的使用场景

我们先来看一个简单的例子，假设你有一个装满各种水果的篮子（数组），你想检查这个篮子里的所有水果（数组元素）是否都很新鲜（符合条件）。你可以这样做：

const isFresh = (fruit) => fruit.fresh;
const fruits = [{name: 'apple', fresh: true}, {name: 'banana', fresh: true}, {name: 'grape', fresh: true}];

console.log(fruits.every(isFresh)); // 预期输出: true

这个代码的意思是：如果篮子里的所有水果都是新鲜的，那么 every 会返回 true；如果有任何一个不新鲜，结果就会是 false。这看起来很简单，然而，在实际开发中，every 方法的行为可能会出乎你的意料。

实际开发中的陷阱

假设你在开发一个系统，用户的消费数据被保存在一个数组里。现在你需要判断用户在各个商品类别中的消费金额是否都超过了某个标准，比如 1000 元。如果都超过了，你就会给他们发放优惠券。假设服务器返回的数据是这样的：

[
  {sub: '奶粉', amount: 10800}, 
  {sub: '尿布', amount: 2500}, 
  {sub: '童装', amount: 3200},
]

你可能会写出这样一段代码来判断：

const isAboveCouponsThreshold = (data) => data.every((item) => item.amount > 1000);

看起来一切正常，但是，当传入一个空数组时，问题就出现了：

console.log(isAboveCouponsThreshold([])); // 输出: true

空数组竟然返回了 true！这和我们直觉上的理解完全不同——既然没有任何消费记录，怎么可能满足发放优惠券的条件呢？

为什么空数组会返回 true？

想象一下，你是一个门卫，你的任务是检查每个进门的人（数组元素）是否都佩戴了口罩（符合条件）。如果你发现有一个人没有佩戴口罩，你就不能让任何人进去（返回 false）。但是，某一天大门前空无一人（数组为空），没有人需要检查，你会怎么做呢？

在这种情况下，你自然不会发现任何没戴口罩的人，因为根本没有人。所以，你只能得出一个结论：“好吧，所有人都戴了口罩。”（every 返回 true）。这看起来有点奇怪，但这就是 every 方法在处理空数组时的逻辑。

JavaScript 的 every 方法就是这么做的。当数组为空时，没有任何元素可以去“反驳”这个条件，因此默认认为所有元素都满足了条件，所以返回 true。这种现象在数学上被称为“真空真理（Vacuous Truth）”。

数学中的“真空真理”

“真空真理”这个概念源自数学，指的是当一个条件在没有可能的验证对象（例如，空数组中没有元素）时，默认认为这个条件是满足的。换句话说，如果没有任何反例存在，我们就默认所有条件都成立。

在 every 方法的具体实现中，回调函数是用来测试每个数组元素的条件。如果数组是空的，回调函数根本不会执行，因为没有元素去调用它。这种情况下，JavaScript 默认所有“元素”都满足条件，因此 every 返回 true。

重新理解 every

我们通常认为 every 是在检查数组中每个元素是否都满足某个条件。但实际上，更准确的理解是：every 是在检查是否存在至少一个不满足条件的元素。如果找不到这样的元素，那么 every 就返回 true。

正是因为这个逻辑，当我们传入一个空数组时，由于没有元素存在，因此也没有元素不满足条件，所以 every 自然返回 true。这是一种非常重要的逻辑，特别是在处理数组为空的情况时，如果不理解这一点，很容易导致意外的逻辑错误。

深入理解 every 方法的原理

现在，让我们更深入地探讨 every 方法的工作原理，并通过代码来具体说明它是如何运作的。

Array.prototype.every = function(callbackfn, thisArg) {
  const O = this; 
  const len = O.length;

  if (typeof callbackfn !== "function") { 
    throw new TypeError("Callback is not callable");
  } 

  let k = 0;

  while (k < len) { 
    const Pk = String(k);
    const kPresent = O.hasOwnProperty(Pk);

    if (kPresent) {
      const kValue = O[Pk]; 
      const testResult = Boolean(callbackfn.call(thisArg, kValue, k, O));

      if (testResult === false) { 
        return false;
      }
    }

    k = k + 1;
  }

  return true;
};

让我们通过一个比喻来理解这段代码的工作机制：

1. O = this; 和 len = O.length;(注：字母O，不是数字零)
   这两行代码首先获取当前数组对象 this 并将其赋值给 O，然后获取数组的长度 len。这是为了后续遍历数组元素做准备。

2. typeof callbackfn !== "function"
   这里通过 typeof 判断传入的回调函数 callbackfn 是否为一个可调用的函数，如果不是，就抛出一个 TypeError，这是为了确保我们传入的确实是一个函数。

3. while (k < len) 循环
   这个循环用于遍历数组的每一个元素。变量 k 是数组的索引，每次循环都会递增 k，直到 k 达到数组的长度 len 为止。

4. hasOwnProperty(Pk)
   这一行代码用来检查数组 O 中当前索引 k 是否存在对应的属性（即数组元素是否存在）。如果存在，则获取该元素的值并存储在 kValue 中。

5. callbackfn.call(thisArg, kValue, k, O)
   这是核心的回调执行部分。every 方法会调用传入的回调函数 callbackfn，并传入当前的元素值 kValue，元素的索引 k，以及整个数组 O 作为参数。thisArg 是可选的，作为 this 的上下文。如果回调函数返回 false，every 方法就立即返回 false，否则继续检查下一个元素。

6. return true;
   如果所有的元素都通过了回调函数的测试，最后返回 true。

当数组为空时，every 的 while 循环根本不会执行，因为 k 从 0 开始，而 len 为 0，因此不会进入循环体。这就解释了为什么空数组直接返回 true，因为没有任何元素去否定这个条件。

这段代码展示了 Array.prototype.every 的工作原理。它表明 every 方法依赖于回调函数的结果来判断整个数组是否满足条件。当数组为空时，由于没有元素去验证，every 直接返回 true。这背后的逻辑和数学中的“真空真理”类似，理解这个概念可以帮助我们避免在开发中掉进类似的陷阱。

如何避免这个坑？

在实际开发中，我们通常不希望空数组被视为“所有条件都满足”，因为这可能会导致逻辑错误。为了避免这个问题，我们可以在调用 every 之前，先检查数组是否为空：

const isAboveCouponsThreshold = (data) => {
  return data.length > 0 && data.every((item) => item.amount > 1000);
};

这样一来，如果数组是空的，代码就会直接返回 false，从而避免了错误的逻辑判断。

结束

通过这篇文章，你应该已经了解了 every 方法的工作原理以及它在处理空数组时的特殊逻辑。every 方法看似简单，但如果没有深入理解它的逻辑，很容易在实际开发中踩到坑。特别是在处理数组为空的情况时，务必小心谨慎。

希望这篇文章能帮助你更好地掌握 JavaScript 中的这个常用方法，同时提醒你在开发中关注细节，避免潜在的问题。如果你在开发过程中遇到过类似的问题，或者有其他疑问，欢迎在评论区分享你的经验和见解，我们一起学习进步！