使用 JavaScript 过滤对象数组：类别 OR 标签 AND-js教程-PHP中文网

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

碧海醫心

发布： 2025-08-17 21:02:26

原创

557人浏览过

使用 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);

登录后复制

代码解释：

BeatBot

Splash的AI音乐生成器，AI歌曲制作人！

165

查看详情

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

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