本文深入探讨在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()实现过滤的示例代码：
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()方法内部也实现了遍历逻辑，使得代码更加简洁和易读。它接收一个回调函数，该函数会为数组中的每个元素执行，并根据其返回值决定是否将该元素包含在新数组中。
总结与注意事项
- 理解内置方法的抽象： indexOf()和includes()等数组方法已经封装了内部遍历逻辑，它们能够高效地判断一个数组是否包含某个特定元素。
- 区分遍历目的： 如果你的目标是根据子数组的整体属性（如是否包含某个元素）来过滤主数组，那么一个单层循环配合内置方法就足够了。
- 何时需要嵌套循环： 如果你需要访问或修改子数组中的每个单独元素，或者执行涉及子数组内部元素之间关系的复杂操作，那么嵌套循环是必要的。
- 避免不必要的else： 在过滤操作中，通常只需处理符合条件的元素。不符合条件的元素只需被忽略，无需显式地在else块中执行操作。
- 拥抱现代JavaScript： 对于过滤任务，Array.prototype.filter()提供了更优雅、更具表达力的解决方案，是推荐的实践方式。
通过理解这些核心概念，您可以更有效地编写处理嵌套数组的JavaScript代码，使其既高效又易于维护。
