如何根据用户选择过滤JavaScript中的平均值计算函数？

Hey there! 看起来你正在做一个基于用户选择过滤数据并计算平均值的功能，用JSON存储数据、JavaScript开发对吧？我先帮你把现有代码规整一下，再给些实用的优化建议：

需求回顾 #

• 核心目标：根据用户的选择条件，过滤JSON数据并计算对应字段的平均值
• 数据来源：JSON文件，字段包含favorite、day、often、lon、device、advert

现有代码片段 #

function loadJSONishDataOften() { 
  // function for the average often button 
  var m = JSON.parse(data); 
  var myObjectArray = []; 
  for (var i = 0; i < m.length; i++) { 
    myObjectArray[i] = new MediaClass (m[i].favorite, m[i].day, m[i].often, m[i].lon, m[i].device, m[i].advert ); 
  } 
  document.getElementById("demo2").innerHTML = "On average people go on soc..."
}

优化方向与示例代码 #

目前的代码只是把JSON数据转成了MediaClass实例，但还没实现过滤逻辑和平均值计算。这里给你一套更简洁高效的实现方案：

1. 封装通用的过滤+平均值计算函数 #

// 传入过滤条件和JSON数据，返回并渲染平均值
function calculateFilteredAverage(filter, data) {
  try {
    // 第一步：过滤符合用户选择条件的数据
    const filteredItems = data.filter(item => {
      // 这里可以根据实际需求扩展多条件过滤，比如同时匹配day和device
      return item.often === filter.often;
    });

    // 处理无匹配数据的情况
    if (filteredItems.length === 0) {
      document.getElementById("demo2").innerHTML = "No matching data found!";
      return;
    }

    // 第二步：提取需要计算平均值的字段（假设often是数值类型，字符串的话需要先转换）
    const numericValues = filteredItems.map(item => parseInt(item.often) || 0);
    
    // 第三步：用reduce快速计算总和，再求平均值
    const total = numericValues.reduce((sum, value) => sum + value, 0);
    const average = total / filteredItems.length;

    // 渲染最终结果
    document.getElementById("demo2").innerHTML = `On average people go on social media ${average.toFixed(2)} times per selected period`;
  } catch (err) {
    console.error("Error processing data:", err);
    document.getElementById("demo2").innerHTML = "Failed to calculate average, please try again later.";
  }
}

2. 异步加载JSON文件（推荐） #

如果你的JSON是本地文件，建议用fetch异步加载，避免同步加载阻塞页面：

// 加载JSON数据并调用计算函数
function loadDataAndCalculate(filter) {
  fetch('./your-media-data.json')
    .then(res => res.json())
    .then(jsonData => {
      calculateFilteredAverage(filter, jsonData);
    })
    .catch(err => console.error("Failed to load JSON:", err));
}

// 示例调用：比如用户选择了"daily"频率
loadDataAndCalculate({ often: "daily" });

3. 额外小建议 #

• 如果MediaClass只是用来存储数据，现代JS里直接使用原始对象就足够了，不需要额外创建类；如果需要给数据加方法，再考虑封装类
• 可以把过滤条件做成动态的：比如监听下拉框/复选框的变化，实时获取用户选择的条件，再调用计算函数
• 对用户输入的条件做合法性校验，避免无效条件导致计算出错

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