本文详细介绍了如何使用 JavaScript 的 filter() 方法，结合 flat() 方法，对嵌套数组进行多条件筛选。通过示例代码，展示了如何在保持原始数组结构和扁平化数组两种情况下，根据 show_img 和 publish 属性的值，过滤出符合条件的元素。
在 JavaScript 中，处理复杂的数据结构，如嵌套数组，并根据多个条件进行过滤是一项常见的任务。本文将深入探讨如何使用 filter() 方法有效地实现这一目标，并通过具体的示例代码，演示如何基于 show_img 和 publish 两个属性的值，从嵌套数组中筛选出符合条件的元素。
过滤嵌套数组
假设我们有如下的嵌套数组：
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 都为 true 的对象。
立即学习“Java免费学习笔记（深入）”；
保持原始数组结构
如果需要保持原始数组的结构，可以使用以下代码：
const filterredArray = array.filter(item => item.length && item[0].show_img && item[0].publish);
console.log("filterredArray", filterredArray);这段代码首先使用 filter() 方法遍历数组。对于每个子数组 item，它检查 item.length 是否大于 0，以及 item[0].show_img 和 item[0].publish 是否都为 true。只有当所有条件都满足时，该子数组才会被保留在 filterredArray 中。
扁平化数组
如果希望将嵌套数组扁平化，可以使用 flat() 方法：
const filterredflatternArray = array.flat().filter(item => item.show_img && item.publish);
console.log("filterredflatternArray", filterredflatternArray);这段代码首先使用 flat() 方法将嵌套数组转换为一个一维数组。然后，它使用 filter() 方法遍历扁平化后的数组，并检查每个对象的 show_img 和 publish 属性是否都为 true。只有当两个条件都满足时，该对象才会被保留在 filterredflatternArray 中。
注意事项
- flat() 方法默认只会扁平化一层嵌套。如果数组嵌套层级更深，可以传递一个数字参数来指定扁平化的层数，例如 array.flat(2)。
- 在判断 item.length 之前，务必确保 item 存在，否则可能会导致错误。
- filter() 方法返回一个新的数组，不会修改原始数组。
总结
通过结合 filter() 和 flat() 方法，可以灵活地处理嵌套数组，并根据多个条件进行筛选。选择保持原始数组结构还是扁平化数组，取决于具体的应用场景和需求。理解这些方法的工作原理，可以帮助你编写更简洁、更高效的 JavaScript 代码。
