JavaScript中嵌套数组的过滤技巧：为何单层循环与内置方法足以胜任

本文旨在阐明在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]]

代码解析：

1. for (let i = 0; i < arr.length; i++): 这个外部循环负责遍历父数组arr。在每次迭代中，arr[i]代表父数组中的一个子数组。
2. arr[i].indexOf(elem) === -1: 这一行是关键。arr[i]是一个数组，我们直接在该数组上调用indexOf(elem)。这个方法会遍历arr[i]内部的元素来查找elem。如果elem不存在，indexOf返回-1。
3. newArr.push(arr[i]): 如果当前子数组arr[i]不包含elem（即条件为真），我们就将其添加到newArr中。

通过这种方式，我们避免了编写一个显式的内部for循环来遍历arr[i]的元素，因为indexOf()已经替我们完成了这项工作。

巧文书

巧文书是一款AI写标书、AI写方案的产品。通过自研的先进AI大模型，精准解析招标文件，智能生成投标内容。

61

查看详情

使用 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数组操作基础的关键一步。

以上就是JavaScript中嵌套数组的过滤技巧：为何单层循环与内置方法足以胜任的详细内容，更多请关注php中文网其它相关文章！