使用 JavaScript 过滤对象数组：类别 OR 标签 AND

本文旨在提供一种使用 JavaScript 过滤对象数组的有效方法，该数组基于类别和标签的组合条件。类别采用 OR 逻辑，即只要对象包含任何一个指定的类别即可；而标签采用 AND 逻辑，即对象必须包含所有指定的标签。我们将提供一个可复用的代码示例，并解释其工作原理，帮助你轻松实现复杂的数据过滤需求。

过滤对象数组

在实际开发中，我们经常需要根据特定的条件过滤对象数组。例如，假设我们有一个包含汽车信息的对象数组，每个对象包含 categories 和 tags 属性。我们需要根据用户选择的类别和标签来过滤这些汽车信息。类别采用 OR 逻辑，标签采用 AND 逻辑。

以下是如何使用 JavaScript 实现此过滤的示例：

const filters = {
    categories: [
        'car',
        'van',
        'motorbike',
    ],
    tags: [
        '4x4',
        'petrol',
        'sunroof'
    ]
};

const items = [
    {
        title: '2016 VW Polo',
        categories: [
            {
                title: 'Car',
                slug: 'car'
            }
        ],
        tags: [
            {
                title: 'Sunroof',
                slug: 'sunroof',
            },
            {
                title: 'Power Steering',
                slug: 'power-steering',
            },
            {
                title: 'Petrol',
                slug: 'petrol',
            },
        ]
    },
    {
        title: '2015 Audi A4',
        categories: [
            {
                title: 'Car',
                slug: 'car'
            }
        ],
        tags: [
            {
                title: 'Sunroof',
                slug: 'sunroof',
            },
            {
                title: 'Power Steering',
                slug: 'power-steering',
            },
            {
                title: 'Petrol',
                slug: 'petrol',
            },
            {
                title: '4x4',
                slug: '4x4',
            },
        ]
    }
];

const filtered = items.filter(({tags, categories}) => 
  // 首先按标签过滤，因为标签的限制性更强
  (!filters.tags.length || filters.tags.every(tag => tags.some(({slug}) => slug === tag)))
  && (!filters.categories.length || filters.categories.some(category => categories.some(({slug}) => slug === category)))
);

console.log(filtered);

代码解释：

燕雀Logo

为用户提供LOGO免费设计在线生成服务

下载

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

1. filters 对象： 定义了过滤条件，包含 categories 和 tags 两个属性，分别存储类别和标签的数组。
2. items 数组： 包含了需要过滤的对象，每个对象都包含 categories 和 tags 属性，这两个属性都是对象数组，每个对象都包含 title 和 slug 属性。
3. filter() 方法： 使用 filter() 方法对 items 数组进行过滤。
4. every() 方法： filters.tags.every(tag => tags.some(({slug}) => slug === tag)) 确保 filters.tags 数组中的每个标签都存在于 items 数组中对象的 tags 数组中。every() 方法对数组中的每一项运行给定函数，如果该函数对每一项都返回 true，则返回 true。
5. some() 方法： filters.categories.some(category => categories.some(({slug}) => slug === category)) 确保 filters.categories 数组中的任何一个类别存在于 items 数组中对象的 categories 数组中。some() 方法对数组中的每一项运行给定函数，如果该函数对任一项返回 true，则返回 true。
6. && 运算符： 使用 && 运算符将标签和类别的过滤条件连接起来，确保对象同时满足标签和类别的过滤条件。
7. ! 运算符和 length 属性： 使用 !filters.tags.length 和 !filters.categories.length 来处理 filters.tags 或 filters.categories 为空数组的情况。如果 filters.tags 或 filters.categories 为空数组，则表示不根据标签或类别进行过滤。

注意事项

• 确保 filters 对象和 items 数组的结构与示例代码中的结构一致。
• 可以根据实际需求修改 filters 对象中的类别和标签。
• 该方法适用于任何包含对象数组的数据结构，只需根据实际情况调整代码中的属性名即可。

总结

本文提供了一种使用 JavaScript 过滤对象数组的有效方法，该数组基于类别和标签的组合条件。通过使用 filter()、every() 和 some() 方法，我们可以轻松实现复杂的数据过滤需求。该方法具有良好的可读性和可维护性，可以方便地应用于各种实际开发场景。