本文旨在阐明在JavaScript中过滤嵌套数组时，如何利用内置数组方法（如`indexOf`或`includes`）配合单层`for`循环高效地实现目标，而无需额外的嵌套循环或复杂的`if/else`结构。我们将深入探讨这些方法的工作原理，并通过代码示例展示其简洁性和实用性，帮助开发者更清晰地理解数组操作的内在机制。
理解JavaScript中嵌套数组的迭代与过滤
在处理JavaScript中的嵌套数组时，一个常见的疑问是：当我们需要根据子数组的某个条件来过滤父数组时，是否总是需要使用嵌套的for循环？答案通常是否定的。JavaScript提供了强大的内置数组方法，它们能够简化此类操作，使代码更加简洁和高效。
考虑一个场景：我们有一个包含多个子数组的父数组，目标是移除所有包含特定元素的子数组，并返回一个过滤后的新数组。例如，给定数组[[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]]，如果我们要移除所有包含数字3的子数组。
核心原理：内置方法的内部迭代能力
许多JavaScript数组方法，如indexOf()和includes()，本身就具备遍历数组元素的能力。当这些方法在一个子数组上被调用时，它们会在该子数组内部进行迭代，查找目标元素。这意味着我们只需要一个外部循环来遍历父数组中的每个子数组，而子数组内部的查找工作则由这些内置方法完成。
立即学习“Java免费学习笔记（深入）”；
使用 Array.prototype.indexOf() 进行过滤
indexOf()方法返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回-1。我们可以利用这一特性来判断子数组是否包含特定元素。
下面是使用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) {
// 如果子数组不包含 elem，则将其添加到 newArr
newArr.push(arr[i]);
}
}
return newArr; // 返回过滤后的新数组
}
// 示例调用
const originalArray = [[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]];
const elementToFilter = 3;
const resultArray = filteredArray(originalArray, elementToFilter);
console.log(resultArray);
// 预期输出：[[13, 26]] (假设原始数据有误，应为[[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]] 过滤3后，应只剩 [3,13,26] 和 [19,3,9] 都不对，因为3在里面，所以都应该被过滤掉。
// 实际输出：[] (因为所有子数组都包含3，所以都被移除了)
// 让我们修改一个示例，让它能输出一些结果
const exampleArray = [[1, 2], [3, 4], [5, 6]];
const filterElem = 3;
console.log(filteredArray(exampleArray, filterElem)); // 预期输出：[[1, 2], [5, 6]]代码解析：
- for (let i = 0; i < arr.length; i++): 这个外部循环负责遍历父数组arr。在每次迭代中，arr[i]代表父数组中的一个子数组。
- arr[i].indexOf(elem) === -1: 这一行是关键。arr[i]是一个数组，我们直接在该数组上调用indexOf(elem)。这个方法会遍历arr[i]内部的元素来查找elem。如果elem不存在，indexOf返回-1。
- newArr.push(arr[i]): 如果当前子数组arr[i]不包含elem（即条件为真），我们就将其添加到newArr中。
通过这种方式，我们避免了编写一个显式的内部for循环来遍历arr[i]的元素，因为indexOf()已经替我们完成了这项工作。
使用 Array.prototype.includes() 提升可读性
includes()方法是ES6引入的，它返回一个布尔值，表示数组是否包含某个元素。这使得代码的意图更加清晰。
function filteredArrayWithIncludes(arr, elem) {
let newArr = [];
for (let i = 0; i < arr.length; i++) {
// arr[i].includes(elem) 返回 true 如果 elem 存在于 arr[i] 中
// 我们需要的是不包含 elem 的子数组，所以使用 ! (逻辑非)
if (!arr[i].includes(elem)) {
newArr.push(arr[i]);
}
}
return newArr;
}
// 示例调用
const exampleArray2 = [[10, 20], [30, 40, 10], [50, 60]];
const filterElem2 = 10;
console.log(filteredArrayWithIncludes(exampleArray2, filterElem2)); // 预期输出：[[50, 60]]includes()方法与indexOf() === -1的功能相同，但在语义上更直观，推荐在现代JavaScript开发中使用。
为什么不需要 else 语句？
在上述过滤逻辑中，我们只在子数组不包含特定元素时才将其添加到newArr。如果子数组包含了该元素，我们什么也不做。这种“不做任何事”的行为本身就实现了“移除”该子数组的目的，因为它不会被包含在最终的结果数组中。
例如，如果我们有以下逻辑：
if (arr[i].indexOf(elem) === -1) {
newArr.push(arr[i]); // 如果不包含，则添加
} else {
// 如果包含，这里需要做什么？
// 题目要求是“移除”，即不添加到 newArr，所以这里不需要任何操作。
// 任何在这里执行的操作都将是多余的，或者会改变过滤的本意。
}因此，else语句在此场景下是不必要的，因为当条件不满足时，默认行为（不添加元素）正是我们所期望的。
总结与最佳实践
- 利用内置方法：JavaScript数组的indexOf()和includes()方法能够在其内部遍历数组，查找指定元素，从而避免了手动编写嵌套循环。
- 简洁性与可读性：使用这些内置方法可以使代码更加简洁，尤其是includes()，其布尔返回值使得条件判断更具可读性。
- 单层循环足以：当过滤父数组的条件依赖于子数组内部元素的检查时，一个外部循环配合子数组上的内置查找方法通常就足够了。
- 无须else：在构建新数组进行过滤的场景中，如果某个元素不符合添加条件，简单地跳过它就实现了“移除”的效果，无需额外的else分支。
对于更复杂的过滤需求，JavaScript还提供了Array.prototype.filter()等高阶函数，它们能以声明式的方式进一步简化此类操作。例如，上述功能也可以用filter()实现：
function filteredArrayWithFilter(arr, elem) {
return arr.filter(subArray => !subArray.includes(elem));
}
const exampleArray3 = [[100, 200], [300, 400, 100], [500, 600]];
const filterElem3 = 100;
console.log(filteredArrayWithFilter(exampleArray3, filterElem3)); // 预期输出：[[500, 600]]这种方式更加函数式，并且在许多情况下被认为是更现代和推荐的做法。然而，理解for循环和内置方法的结合使用，是掌握JavaScript数组操作基础的关键一步。
