登录
首页 >  文章 >  前端

JavaScript多条件筛选：AND与OR用法解析

时间：2025-08-27 11:06:42 251浏览 收藏

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《JavaScript多条件筛选：AND与OR逻辑详解》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

JavaScript 多条件筛选实现：AND/OR 逻辑的应用

本文详细介绍了如何使用 JavaScript 实现多条件筛选功能，特别是针对不同筛选类别（如颜色和尺寸）之间采用“与”（AND）逻辑，而同一类别内采用“或”（OR）逻辑的场景。通过清晰的 HTML 结构和优化的 JavaScript 代码，教程展示了如何有效管理用户选择，并动态更新产品列表的显示，确保筛选结果的准确性和灵活性。

在现代网页应用中，动态筛选是提升用户体验的关键功能之一。当涉及到多个筛选维度时，如何正确处理不同维度之间的逻辑关系（如“与”AND 或“或”OR）变得尤为重要。本教程将深入探讨一个常见场景：用户希望根据产品的颜色和尺寸进行筛选，要求当同时选择颜色和尺寸时，产品必须同时满足这两个条件（AND 逻辑）；而当只选择其中一个维度时，则显示满足该维度下任一条件的产品（OR 逻辑）。

HTML 结构准备

为了实现多维筛选，我们需要为不同的筛选类别（例如颜色和尺寸）分配不同的 CSS 类，以便在 JavaScript 中能够精确地获取它们的状态。同时，产品列表项需要包含足够的数据属性来存储其特性。

以下是建议的 HTML 结构：


  
颜色

  
  
  




  
尺寸

  
  
  




  
筛选结果

  
  
产品 A

  
产品 B

  
产品 C

  
产品 D

关键点：

  • 为颜色和尺寸复选框分别添加了 color-checkbox 和 size-checkbox 类，方便 JavaScript 区分。
  • filterable 元素使用 data-colors 属性存储产品的颜色和尺寸，并约定第一个值是颜色，第二个值是尺寸。这种约定对于解析数据至关重要。

JavaScript 核心逻辑实现

核心的筛选逻辑将封装在一个函数中，并在任何筛选条件改变时触发。

const filterCheckboxes = document.querySelectorAll('.filter-checkbox'); // 所有筛选复选框
const colorCheckboxes = document.querySelectorAll('.color-checkbox');   // 颜色复选框
const sizeCheckboxes = document.querySelectorAll('.size-checkbox');     // 尺寸复选框
const filterables = document.querySelectorAll('.filterable');           // 所有可筛选的产品元素

/**
 * 更新筛选结果的函数
 */
function updateFilter() {
  // 1. 获取当前选中的颜色值
  const colorChecked = Array.from(colorCheckboxes)
    .filter(checkbox => checkbox.checked)
    .map(checkbox => checkbox.value);

  // 2. 获取当前选中的尺寸值
  const sizeChecked = Array.from(sizeCheckboxes)
    .filter(checkbox => checkbox.checked)
    .map(checkbox => checkbox.value);

  // 3. 处理无筛选条件的情况：如果没有任何颜色或尺寸被选中，则显示所有产品
  if (!(colorChecked.length || sizeChecked.length)) {
    filterables.forEach(filterable => {
      filterable.style.display = 'block';
    });
    return; // 结束函数执行
  }

  // 4. 遍历所有产品元素，根据筛选条件决定其显示状态
  filterables.forEach(filterable => {
    // 从 data-colors 属性中解析出产品的颜色和尺寸
    const attributes = filterable.dataset.colors.split(' ');
    const productColor = attributes[0]; // 约定第一个是颜色
    const productSize = attributes[1];  // 约定第二个是尺寸

    // 判断是否同时选择了颜色和尺寸筛选条件
    if (colorChecked.length >= 1 && sizeChecked.length >= 1) {
      // 5.1. 如果同时选择了颜色和尺寸（AND 逻辑）：
      // 产品必须同时满足选中的颜色和尺寸条件
      if (colorChecked.includes(productColor) && sizeChecked.includes(productSize)) {
        filterable.style.display = 'block';
      } else {
        filterable.style.display = 'none';
      }
    } else {
      // 5.2. 如果只选择了颜色或只选择了尺寸（OR 逻辑）：
      // 产品只要满足选中的颜色或尺寸条件之一即可
      // 注意：如果 colorChecked 为空，则 colorChecked.includes(productColor) 为 false，
      // 此时条件判断依赖于 sizeChecked.includes(productSize)，反之亦然。
      if (colorChecked.includes(productColor) || sizeChecked.includes(productSize)) {
        filterable.style.display = 'block';
      } else {
        filterable.style.display = 'none';
      }
    }
  });
}

// 6. 为所有筛选复选框添加 change 事件监听器
filterCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', updateFilter);
});

// 7. 页面加载时执行一次筛选，以处理默认选中状态
updateFilter();

代码解析：

  1. 获取筛选值： 通过 querySelectorAll 和 Array.from 获取所有颜色和尺寸复选框，然后使用 filter 筛选出被选中的复选框，并用 map 提取其 value 值，形成 colorChecked 和 sizeChecked 数组。
  2. 处理无筛选条件： 如果 colorChecked 和 sizeChecked 数组都为空（即 !(colorChecked.length || sizeChecked.length) 为真），表示用户没有选择任何筛选条件，此时应显示所有产品。
  3. 遍历产品元素： 对每个 filterable 产品元素，从其 data-colors 属性中解析出产品的实际颜色和尺寸。
  4. AND 逻辑（同时选中多类筛选）：
    • 当 colorChecked.length >= 1 且 sizeChecked.length >= 1 时，表示用户同时在颜色和尺寸两个类别中进行了选择。
    • 此时，产品必须同时满足选中的颜色和尺寸条件 (colorChecked.includes(productColor) && sizeChecked.includes(productSize)) 才能显示。
  5. OR 逻辑（只选中一类筛选）：
    • 当上述 if 条件不满足时（即只选择了颜色，或只选择了尺寸，或两者都未选但已在第3步处理），执行 else 块。
    • 此时，产品只要满足选中的颜色或尺寸条件之一 (colorChecked.includes(productColor) || sizeChecked.includes(productSize)) 即可显示。这种设计巧妙地利用了 || 操作符的短路特性，当某一类筛选数组为空时，对应的 includes 判断会返回 false，不影响另一类筛选的判断。
  6. 事件监听： 为所有筛选复选框添加 change 事件监听器，确保每次用户更改选择时都能触发 updateFilter 函数。
  7. 初始化： 在脚本加载完成后立即调用 updateFilter() 一次，以确保页面初次加载时根据默认的复选框状态显示正确的筛选结果。

完整示例

将上述 HTML 和 JavaScript 代码结合，即可实现一个功能完善的多条件筛选器。






JavaScript 多条件筛选




  

    
颜色

    
    
    
  

  

    
尺寸

    
    
    
  

  

    
筛选结果

    
产品 A

    
产品 B

    
产品 C

    
产品 D

注意事项与扩展

  1. 数据属性格式约定： 当前示例中 data-colors="blue large" 依赖于颜色和尺寸的固定顺序。如果产品属性更多或顺序不固定，建议使用更明确的数据属性，例如 data-color="blue" 和 data-size="large"。这样在 JavaScript 中获取时会更清晰和健壮：

    // HTML

    产品 A
    

// JavaScript
const productColor = filterable.dataset.color;
const productSize = filterable.dataset.size;

    这将使代码更具可读性和可维护性，特别是在未来需要添加更多筛选维度时。

  2. 多类别筛选的通用性： 当前逻辑适用于两个筛选类别。如果需要支持更多类别（例如品牌、材质等），可以扩展 updateFilter 函数，为每个类别获取其选中值，并相应地调整 AND/OR 逻辑。一种更通用的方法是动态生成筛选条件，并使用 Array.prototype.every()（用于 AND 逻辑）和 Array.prototype.some()（用于 OR 逻辑）来判断产品是否符合所有激活的筛选组。

  3. 性能优化： 对于包含大量产品元素的页面，每次筛选都遍历所有元素并修改其 display 属性可能会影响性能。可以考虑以下优化：

    • 数据缓存： 将产品数据存储在 JavaScript 数组中，筛选时操作数据数组，然后根据筛选结果批量更新 DOM。
    • 虚拟滚动/分页： 只渲染当前视口可见的产品，或实现分页加载。
    • CSS 替代： 使用 CSS 类来控制显示/隐藏，而不是直接操作 style.display，这有时能让浏览器优化渲染。

  4. 用户体验：

    • 清除/重置按钮： 提供一个按钮，允许用户一键清除所有筛选条件，显示所有产品。
    • 筛选结果计数： 显示当前有多少产品符合筛选条件。
    • 加载指示器： 对于大型数据集，在筛选操作进行时显示加载指示器。

通过本教程，您应该能够掌握在 JavaScript 中实现复杂多条件筛选的核心逻辑，并能根据实际需求进行扩展和优化。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript多条件筛选：AND与OR用法解析》文章吧，也可关注golang学习网公众号了解相关技术文章。

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>