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

理解嵌套数组的结构与迭代

假设我们有一个如下所示的嵌套数组：

const nestedArr = [[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]];

当我们使用一个简单的for循环来迭代这个数组时：

for (let i = 0; i < nestedArr.length; i++) {
  // nestedArr[i]
}

在每次迭代中，nestedArr[i]所代表的实际上是nestedArr中的一个子数组，例如 [3, 2, 3]、[1, 6, 3]等。这意味着，nestedArr[i]本身就是一个数组对象，它可以直接调用数组的各种方法。

关键：利用子数组的内置方法

问题的核心在于，我们并非要遍历子数组中的每一个单独元素并进行操作，而是要检查整个子数组是否包含某个特定元素。这时，JavaScript数组的内置方法如indexOf()或includes()就显得尤为高效。

• Array.prototype.indexOf(element): 此方法返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回 -1。
• Array.prototype.includes(element): 此方法判断一个数组是否包含一个指定的值，根据情况，返回 true 或 false。

这些方法在内部已经实现了对当前数组（即我们的子数组nestedArr[i]）的遍历，以查找目标元素。因此，我们无需手动编写一个嵌套的for循环来完成同样的工作。

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

示例：高效过滤嵌套数组

让我们来看一个具体的过滤函数实现，该函数的目标是移除所有包含特定元素elem的子数组：

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74

查看详情

function filteredArray(arr, elem) {
  let newArr = []; // 用于存储过滤后的子数组
  // 遍历外部数组，每次迭代获取一个子数组
  for (let i = 0; i < arr.length; i++) {
    // 检查当前子数组 arr[i] 是否不包含目标元素 elem
    // arr[i].indexOf(elem) == -1 表示 elem 不在 arr[i] 中
    // 或者使用更现代的 !arr[i].includes(elem)
    if (arr[i].indexOf(elem) === -1) {
      // 如果子数组不包含 elem，则将其添加到新数组中
      newArr.push(arr[i]);
    }
  }
  return newArr; // 返回过滤后的新数组
}

// 示例调用
const originalArray = [[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]];
const elementToFilter = 3;
const result = filteredArray(originalArray, elementToFilter);
console.log(result); // 预期输出: [[19, 3, 9]] (因为只有这个子数组不包含3)

在这个解决方案中：

1. 单层for循环: 我们只使用了一个外层for循环，它负责遍历arr中的每一个子数组。
2. arr[i].indexOf(elem): 在循环的每次迭代中，arr[i]代表当前的子数组。我们直接对这个子数组调用indexOf()方法来检查它是否包含elem。这个方法本身就完成了对arr[i]内部元素的遍历。
3. 条件判断: 如果indexOf()返回-1（表示elem不存在于当前子数组中），我们才将整个子数组arr[i]添加到newArr中。

为什么不需要额外的else语句？

在构建newArr这种过滤操作中，通常不需要else语句。其原因在于：

• 我们的目标是构建一个新数组，其中只包含符合特定条件的元素（在这里是子数组）。
• if语句负责将符合条件的子数组push到newArr中。
• 如果一个子数组不符合条件（即它包含elem），我们只需不将其添加到newArr即可。循环会自然地继续到下一个子数组。
• 如果使用else语句尝试pop或以其他方式修改newArr，那将是错误的，因为newArr是正在构建的空数组，pop操作通常用于移除数组末尾的元素，与过滤逻辑不符。

更简洁的ES6方法：filter()

对于这种过滤数组的需求，JavaScript ES6提供了更声明式、更简洁的filter()方法，它可以进一步简化代码：

function filteredArrayWithFilter(arr, elem) {
  return arr.filter(subArray => !subArray.includes(elem));
}

const originalArray = [[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]];
const elementToFilter = 3;
const result = filteredArrayWithFilter(originalArray, elementToFilter);
console.log(result); // 预期输出: [[19, 3, 9]]

filter()方法会遍历原数组中的每个元素（在这里是每个子数组），并对每个元素执行回调函数。如果回调函数返回true，则该元素被包含在新数组中；如果返回false，则被排除。subArray.includes(elem)在这里直接判断子数组是否包含目标元素，!操作符则将其反转，以符合我们的过滤逻辑（不包含elem的子数组才保留）。

总结

在JavaScript中处理嵌套数组的过滤任务时，关键在于理解arr[i]本身就是一个数组，可以直接调用其内置方法如indexOf()或includes()。这些方法在内部已经完成了对子数组的遍历，因此无需手动编写额外的嵌套for循环。通过利用这些内置方法，我们可以编写出更简洁、更高效且易于理解的代码。同时，避免不必要的else语句，专注于构建符合条件的新数组，是编写清晰过滤逻辑的重要实践。对于更复杂的过滤场景，filter()等高阶函数提供了更加优雅的解决方案。

以上就是JavaScript嵌套数组过滤：理解单层循环与内置方法的效率之道的详细内容，更多请关注php中文网其它相关文章！