JavaScript嵌套数组过滤：揭秘单层循环与内置方法的效率之道-js教程-PHP中文网

JavaScript嵌套数组过滤：揭秘单层循环与内置方法的效率之道

DDD

发布： 2025-10-21 12:06:25

原创

967人浏览过

JavaScript嵌套数组过滤：揭秘单层循环与内置方法的效率之道

本文深入探讨在javascript中过滤嵌套数组时，为何仅需一个`for`循环即可完成任务。通过解析`indexof()`和`includes()`等内置数组方法的内部工作机制，我们将理解它们如何独立处理子数组的遍历，从而避免了不必要的嵌套循环和`else`语句，简化代码并提高可读性。文章还将提供示例代码和最佳实践，助您高效处理类似的数据结构。

理解JavaScript中嵌套数组的过滤机制

在JavaScript中处理嵌套数组时，一个常见的疑问是：当需要根据子数组的内容进行过滤时，是否必须使用嵌套的for循环？答案是：不一定。对于某些特定的过滤任务，例如判断子数组是否包含某个元素，JavaScript的内置数组方法可以极大地简化代码，使单层循环足以完成任务。

让我们以一个具体的场景为例：给定一个包含多个子数组的数组arr，以及一个目标元素elem。我们的目标是返回一个新的数组，其中移除了所有包含elem的子数组。

考虑以下嵌套数组：

[[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]]

登录后复制

如果elem是3，我们希望移除所有包含3的子数组，最终得到一个不包含3的子数组集合。

立即学习“Java免费学习笔记（深入）”；

单层循环的奥秘：内置数组方法的威力

许多开发者初次接触嵌套数组时，会直观地认为需要两层循环：外层循环遍历主数组，内层循环遍历每个子数组的元素。然而，当我们的目标仅仅是判断子数组是否包含某个元素时，JavaScript的Array.prototype.indexOf()或Array.prototype.includes()等方法已经内置了对子数组内容的遍历逻辑。

Array.prototype.indexOf() 方法indexOf()方法用于查找数组中某个元素的第一个匹配项的索引。如果找到，则返回该元素的索引；如果未找到，则返回-1。关键在于，当你对一个子数组（例如arr[i]）调用indexOf()时，它会自行遍历arr[i]内部的所有元素来查找目标。

以下是使用indexOf()实现过滤的示例代码：

小门道AI

小门道AI是一个提供AI服务的网站

117

查看详情

function filteredArray(arr, elem) {
  let newArr = []; // 用于存储过滤后的子数组
  // 外层循环遍历主数组的每个元素（即每个子数组）
  for (let i = 0; i < arr.length; i++) {
    // arr[i] 是当前的子数组
    // arr[i].indexOf(elem) 会在当前子数组内部查找 elem
    // 如果 elem 不存在于 arr[i] 中，indexOf() 返回 -1
    if (arr[i].indexOf(elem) === -1) {
      newArr.push(arr[i]); // 将不包含 elem 的子数组添加到新数组中
    }
  }
  return newArr; // 返回过滤后的新数组
}

// 示例调用
const originalArray = [[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]];
const filtered = filteredArray(originalArray, 3);
console.log(filtered); // 输出: [[13, 26]] (假设13,26是子数组，实际应为[ [13, 26] ]，这里是示例输出)
// 实际输出应为：[[13, 26]] 是错误的，
// 实际输出应该是：[[13, 26]] -> [[3, 13, 26]] 包含 3，所以它应该被移除
// 原始数组是：[[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]]
// elem = 3
// [3, 2, 3] 包含 3，移除
// [1, 6, 3] 包含 3，移除
// [3, 13, 26] 包含 3，移除
// [19, 3, 9] 包含 3，移除
// 结果应该是 []
// 更正示例输出：
console.log(filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3)); // 输出: []
console.log(filteredArray([[1, 2], [4, 5], [7, 8]], 3)); // 输出: [[1, 2], [4, 5], [7, 8]]
console.log(filteredArray([[1, 2, 3], [4, 5, 6], [7, 8, 9]], 3)); // 输出: [[4, 5, 6], [7, 8, 9]]

登录后复制

Array.prototype.includes() 方法includes()方法是ES6引入的，它检查数组是否包含某个元素，并返回true或false。它的语义比indexOf() !== -1更清晰，是判断元素存在性的推荐方法。

以下是使用includes()实现过滤的示例代码：

function filteredArrayWithIncludes(arr, elem) {
  let newArr = [];
  for (let i = 0; i < arr.length; i++) {
    // 如果当前子数组 arr[i] 不包含 elem
    if (!arr[i].includes(elem)) {
      newArr.push(arr[i]); // 将其添加到新数组
    }
  }
  return newArr;
}

// 示例调用
console.log(filteredArrayWithIncludes([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3)); // 输出: []
console.log(filteredArrayWithIncludes([[1, 2], [4, 5], [7, 8]], 3)); // 输出: [[1, 2], [4, 5], [7, 8]]

登录后复制

为何不需要嵌套循环和else语句？

无需嵌套循环的原因： 如上所述，indexOf()和includes()方法本身就负责遍历它们被调用的数组（即子数组arr[i]）的内部元素。因此，外层的for循环负责获取每一个子数组，而子数组内部的查找工作则由这些内置方法完成。只有当我们需要对子数组的每个单独元素进行操作（例如修改它们、提取满足特定条件的单个元素，或执行更复杂的聚合操作）时，才需要额外的嵌套循环。
无需else语句的原因： 在过滤场景中，我们的目标是“移除”不符合条件的元素。这通常意味着我们只对符合条件的元素执行“添加”操作。如果一个子数组不符合条件（即它包含elem），我们只需简单地“跳过”它，不将其添加到newArr中即可。没有必要显式地在else块中执行任何操作，因为不执行push本身就达到了“移除”的效果。

例如，如果尝试使用类似newArr.pop(arr[i])的逻辑，这是不正确的。pop()方法用于移除数组的最后一个元素，并且不接受参数。此外，在循环内部使用return语句会导致函数提前退出，无法完成对整个数组的遍历。

更简洁的现代JavaScript方法：Array.prototype.filter()

对于这种过滤数组的常见任务，JavaScript提供了更具声明性和函数式编程风格的filter()方法，它可以进一步简化代码：

function filteredArrayModern(arr, elem) {
  // filter() 方法会遍历数组中的每个元素，并对每个元素执行回调函数。
  // 如果回调函数返回 true，则保留该元素；如果返回 false，则过滤掉该元素。
  return arr.filter(subArray => !subArray.includes(elem));
}

// 示例调用
console.log(filteredArrayModern([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3)); // 输出: []
console.log(filteredArrayModern([[1, 2], [4, 5], [7, 8]], 3)); // 输出: [[1, 2], [4, 5], [7, 8]]

登录后复制

filter()方法内部也实现了遍历逻辑，使得代码更加简洁和易读。它接收一个回调函数，该函数会为数组中的每个元素执行，并根据其返回值决定是否将该元素包含在新数组中。