不使用React，如何动态更新filter对象实现用户自定义数据筛选？

首先给出你提供的原始代码：

const filter = {
  address: 'India',
  name: 'Aleena'
};

const users = [{
    name: 'John Doe',
    email: 'johndoe@mail.com',
    age: 25,
    address: 'USA'
  },
  {
    name: 'Aleena',
    email: 'aleena@mail.com',
    age: 35,
    address: 'India'
  },
  {
    name: 'Mark Smith',
    email: 'marksmith@mail.com',
    age: 28,
    address: 'England'
  }
];

const filteredUsers = users.filter((item) => {
  for (var key in filter) {
    if (item[key] === undefined || item[key] != filter[key])
      return false;
  }
  return true;
});

如何动态更新/修改filter对象，让用户能够选择筛选所用的键值对？我知道通常这类功能会使用React实现，但想了解是否有原生JavaScript的实现方式。

可以通过原生JavaScript结合HTML实现完全动态的筛选功能，核心是通过用户交互控件更新筛选器，再实时执行筛选并更新页面。以下是完整实现方案：

1. HTML交互界面 #

先搭建用户可操作的筛选控件和结果展示区域：

<!-- 筛选控制区 -->
<div class="filter-panel">
  <div>
    <label for="filter-field">选择筛选字段:</label>
    <select id="filter-field">
      <option value="name">姓名</option>
      <option value="address">地址</option>
      <option value="age">年龄</option>
    </select>
  </div>
  <div>
    <label for="filter-content">输入筛选值:</label>
    <input type="text" id="filter-content" placeholder="例如：Aleena / India">
  </div>
  <button id="add-condition">添加筛选条件</button>
  <button id="reset-filter">清空所有筛选</button>
</div>

<!-- 结果展示区 -->
<h3>筛选结果</h3>
<ul id="result-container"></ul>

2. JavaScript逻辑实现 #

将筛选逻辑封装为可复用函数，通过事件监听实现动态更新：

// 原始用户数据
const users = [{
    name: 'John Doe',
    email: 'johndoe@mail.com',
    age: 25,
    address: 'USA'
  },
  {
    name: 'Aleena',
    email: 'aleena@mail.com',
    age: 35,
    address: 'India'
  },
  {
    name: 'Mark Smith',
    email: 'marksmith@mail.com',
    age: 28,
    address: 'England'
  }
];

// 动态筛选器，改用let方便修改
let filter = {};

// 封装筛选逻辑
function getFilteredData() {
  // 筛选器为空时返回全部用户
  if (Object.keys(filter).length === 0) return users;
  
  return users.filter(user => {
    for (const key in filter) {
      // 处理年龄的数字类型比较
      const userValue = key === 'age' ? Number(user[key]) : user[key];
      const filterValue = key === 'age' ? Number(filter[key]) : filter[key];
      
      if (userValue === undefined || userValue !== filterValue) {
        return false;
      }
    }
    return true;
  });
}

// 渲染筛选结果到页面
function renderResults() {
  const resultList = document.getElementById('result-container');
  const filteredUsers = getFilteredData();
  
  // 清空现有内容
  resultList.innerHTML = '';
  
  // 生成新的结果列表项
  filteredUsers.forEach(user => {
    const listItem = document.createElement('li');
    listItem.textContent = `姓名：${user.name} | 地址：${user.address} | 年龄：${user.age} | 邮箱：${user.email}`;
    resultList.appendChild(listItem);
  });
}

// 绑定页面事件
document.addEventListener('DOMContentLoaded', () => {
  const fieldSelect = document.getElementById('filter-field');
  const contentInput = document.getElementById('filter-content');
  const addBtn = document.getElementById('add-condition');
  const resetBtn = document.getElementById('reset-filter');
  
  // 添加筛选条件
  addBtn.addEventListener('click', () => {
    const selectedField = fieldSelect.value;
    const inputValue = contentInput.value.trim();
    
    if (!inputValue) {
      alert('请输入有效的筛选值');
      return;
    }
    
    // 更新筛选器对象
    filter[selectedField] = inputValue;
    // 清空输入框
    contentInput.value = '';
    // 重新渲染结果
    renderResults();
  });
  
  // 重置筛选器
  resetBtn.addEventListener('click', () => {
    filter = {};
    renderResults();
  });
  
  // 页面加载时先渲染全部用户
  renderResults();
});

功能说明 #

• 支持用户选择筛选字段（姓名/地址/年龄）并输入对应值，点击添加后动态更新filter对象
• 可叠加多个筛选条件（比如同时筛选姓名和地址），只有满足所有条件的用户会被展示
• 针对年龄字段做了类型转换，确保数字比较的准确性
• 清空按钮可一键重置筛选器，展示全部用户

内容的提问来源于stack exchange，提问作者user11855540