当前位置：首页 > 文章列表 > 文章 > 前端 > JS对象数组筛选：按类别或标签过滤技巧

JS对象数组筛选：按类别或标签过滤技巧

2025-08-27 18:07:41 0浏览收藏

想知道如何使用 JavaScript 轻松过滤对象数组吗？本文为你详细解读**JS过滤对象数组**的实用技巧，重点讲解如何根据类别和标签的组合条件进行筛选。类别筛选采用 OR 逻辑，只要对象包含任一指定类别即可；标签筛选采用 AND 逻辑，对象必须包含所有指定标签。通过可复用的代码示例，深入理解 `filter()`、`every()` 和 `some()` 方法的运用，助你高效实现复杂的数据过滤，提升 Web 开发效率。掌握**JavaScript数组过滤**技巧，让数据处理更得心应手！

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

代码解释：

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 为空数组，则表示不根据标签或类别进行过滤。