使用 JavaScript 过滤多重嵌套数组：基于多条件筛选-js教程-PHP中文网

使用 JavaScript 过滤多重嵌套数组：基于多条件筛选

霞舞

发布： 2025-10-04 08:00:15

原创

833人浏览过

使用 javascript 过滤多重嵌套数组：基于多条件筛选

本文档旨在提供一个清晰、简洁的 JavaScript 教程，讲解如何基于多个条件过滤多重嵌套的数组，提取符合特定要求的对象。我们将通过 filter() 和 flat() 方法，展示如何高效地处理这类数据结构，并提供详细的代码示例和注意事项，帮助你理解并应用到实际开发中。

在 JavaScript 开发中，经常会遇到需要从复杂的数据结构中提取特定信息的情况。当处理多重嵌套的数组时，筛选过程可能会变得比较棘手。本文将介绍如何使用 filter() 和 flat() 方法，结合多个条件，高效地过滤这类数组。

理解数据结构

首先，我们需要明确要处理的数据结构。假设我们有一个如下所示的数组，其中包含多个子数组，每个子数组可能包含一个或多个对象：

const array = [
  [
   {
    id: 111,
    img_name: 'Image 1.jpg',
    img_url:'https://www.abc.png',
    show_img:true,
    publish:true
   }
  ],
  [],
  [
   {
    id: 333,
    img_name: 'Image 3.jpg',
    img_url:'https://www.ghi.png',
    show_img:false,
    publish:false
   }
  ]
];

登录后复制

我们的目标是基于 show_img 和 publish 两个属性的值，筛选出符合 show_img: true 且 publish: true 条件的对象。

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

使用 filter() 方法

filter() 方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。

保留原始数组结构：

如果需要保留原始数组的嵌套结构，可以使用以下代码：

硅基智能

基于Web3.0的元宇宙，去中心化的互联网，高质量、沉浸式元宇宙直播平台，用数字化重新定义直播

查看详情

const filterredArray = array.filter(item => item.length && item[0].show_img && item[0].publish);

console.log("filterredArray", filterredArray);

登录后复制

这段代码首先检查子数组是否为空 (item.length)，然后检查子数组中第一个对象的 show_img 和 publish 属性是否都为 true。只有满足这两个条件的子数组才会被保留在新数组中。

扁平化数组：

如果希望将所有符合条件的对象放入一个扁平化的数组中，可以使用 flat() 方法将多维数组转换为一维数组，然后再进行过滤：

const filterredflatternArray = array.flat().filter(item => item.show_img && item.publish);

console.log("filterredflatternArray", filterredflatternArray);

登录后复制

flat() 方法默认会将所有嵌套的数组扁平化到一层深度。然后，我们使用 filter() 方法筛选出 show_img 和 publish 属性都为 true 的对象。

代码示例与输出

以下是完整的代码示例：

const array = [
  [
   {
    id: 111,
    img_name: 'Image 1.jpg',
    img_url:'https://www.abc.png',
    show_img:true,
    publish:true
   }
  ],
  [],
  [
   {
    id: 333,
    img_name: 'Image 3.jpg',
    img_url:'https://www.ghi.png',
    show_img:false,
    publish:false
   }
  ]
];

// 保留原始数组结构
const filterredArray = array.filter(item => item.length && item[0].show_img && item[0].publish);

// 扁平化数组
const filterredflatternArray = array.flat().filter(item => item.show_img && item.publish);

console.log("filterredArray", filterredArray);
console.log("filterredflatternArray", filterredflatternArray);

登录后复制

输出结果如下：

filterredArray [
  [
    {
      id: 111,
      img_name: 'Image 1.jpg',
      img_url: 'https://www.abc.png',
      show_img: true,
      publish: true
    }
  ]
]
filterredflatternArray [
  {
    id: 111,
    img_name: 'Image 1.jpg',
    img_url: 'https://www.abc.png',
    show_img: true,
    publish: true
  }
]

登录后复制