JavaScript实现按钮触发的求职者数组过滤功能的技术求助

我来帮你搞定这个求职者过滤器的问题！先看看你当前代码里的几个小问题，然后给你一个能正常运行的完整方案：

你当前代码的问题点 #

• 你把newArray定义成了过滤后的数组，而不是一个可以被按钮调用的函数，所以点击按钮时会提示找不到该函数。
• 过滤条件里误用了赋值运算符=，应该用严格相等运算符===来判断学历；当前代码会把所有求职者的qualification强制改成'degree'，完全起不到过滤作用。
• 最后更新DOM时用了未定义的text变量，需要把过滤后的数组转换成可读的文本格式。

修正后的完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>APPLICANT FILTERING</title>
</head>
<body>
<h1>FILTER APPLICANTS</h1>
<button onclick="filterApplicants()">CLICK TO FILTER</button>
<p id="demo"></p>
<script>
// 求职者数据
const applicantsData = {
  'applicants': [
    {
      "name": "Tom",
      "qualification": "degree",
      "experience": 5
    },
    {
      "name": "David",
      "qualification": "certificate",
      "experience": 2
    },
    {
      "name": "Lisa",
      "qualification": "degree",
      "experience": 6
    } // 新增一个测试数据，方便验证过滤效果
  ]
};

// 定义过滤函数，供按钮调用
function filterApplicants() {
  // 正确的过滤条件：学历为degree且工作年限≥5
  const filteredApplicants = applicantsData.applicants.filter(function(el) {
    return el.qualification === 'degree' && el.experience >= 5;
  });

  // 将过滤后的数组转换成可读的文本（这里用JSON格式化，也可以自定义遍历生成HTML）
  const displayText = JSON.stringify(filteredApplicants, null, 2);
  // 更新DOM显示结果
  document.getElementById("demo").textContent = displayText;
  
  // 控制台输出结果，方便调试
  console.log('过滤后的求职者:', filteredApplicants);
}
</script>
</body>
</html>

关键改动说明 #

1. 函数定义：把原来的数组变量改成了filterApplicants()函数，这样按钮点击时可以正确调用它。
2. 修正过滤条件：把el.qualification = 'degree'改成el.qualification === 'degree'，确保是比较而不是赋值。
3. DOM更新优化：用JSON.stringify(..., null, 2)把数组格式化成带缩进的字符串，可读性更好；也可以遍历数组生成更美观的HTML列表，比如：

// 自定义HTML显示方式
let displayHtml = '<h3>符合条件的求职者:</h3><ul>';
filteredApplicants.forEach(applicant => {
  displayHtml += `<li>${applicant.name} - 学历: ${applicant.qualification}, 工作年限: ${applicant.experience}年</li>`;
});
displayHtml += '</ul>';
document.getElementById("demo").innerHTML = displayHtml;

4. 变量命名优化：把obj改成更有语义的applicantsData，代码可读性更强。

如果你需要扩展更多过滤条件（比如下拉选择学历、输入工作年限范围），只需要在函数里获取对应表单元素的值，然后修改过滤条件即可。

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