如何过滤对象数组中的数字和字符串答案

【问题标题】：How to filter number and string in object array如何过滤对象数组中的数字和字符串
【发布时间】：2019-05-27 16:29:16
【问题描述】：

我想过滤员工详细信息..因为我有包含数字和字符串的选择选项...我可以过滤对象中的字符串但不能使其成为数字...请指导我

        <select id="endDate" onchange="sortEDate()">
            <option value="All Years">All Years</option>
            <option value="Past Years">Past Years</option>
            <option value="Present">Present</option>
        </select>
        <p id="demo1"></p>

const employees = [
    { firstname: "Dav", start: 2013, end: 2018 },
    { firstname: "Gemmy", start: 2016, end: "Present" }
]
function sortEDate() {
    const filterDate = [];
    let cDate = document.getElementById("endDate").value;
    employees.forEach(function(item, index, array) {
        if (item.end === cDate) {
            filterDate.push(item);
        }
    });

    let fDate = "<table>";
    filterDate.forEach(function(filterDate) {
        fDate += "<tr>";
        fDate += "<td>" + filterDate.firstname + "</td>";
        fDate += "<td>" + filterDate.start + "</td>";
        fDate += "<td>" + filterDate.end + "</td>";
        fDate += "</tr>";
    });
    fDate += "</table>";
    document.getElementById("demo1").innerHTML = fDate;

    let allEducation = document.getElementById("endDate").value;
    if (allEducation === "All Years") {
        showEmployees();
    }
}

【问题讨论】：

显示employees数组
代码的哪一部分产生了意想不到的结果，该结果与您的预期有何不同？
const filterDate = []; let cDate = document.getElementById("endDate").value; employees.forEach(function(item, index, array) { if (item.end === cDate) { filterDate.push(item); } });

标签： javascript arrays sorting filter

【解决方案1】：

在下面，如果阻止尝试使用== 而不是===

if (item.end == cDate) {
    filterDate.push(item);
}

【讨论】：

因为 item.end 也可以是一个数字，当您从 DOM 获取值时，它将是一个字符串，因为 === 也会检查类型。因此，我认为您看到了意想不到的结果。

【解决方案2】：

我进行了一些更改以使其按预期工作。我将label 和value 用于option 元素，并将实际选择的值传递给select onchange 处理程序。我还加载了 load 上的项目，您可以将其删除

const employees = [{
    firstname: "Dav",
    start: 2013,
    end: 2018
  },
  {
    firstname: "Gemmy",
    start: 2016,
    end: "Present"
  }
]

function filterDates(sel) {
  let filterDate = []
  sel = sel || "All"
  filterDate.push(...employees.filter(function(obj) {
    switch (sel) {
      case "All":
        return true  // return all
      case "Past":
        return obj.end < new Date().getFullYear() // just past years
      case "Present":
        return obj.end === 'Present' 
    }
  }))

  let fDate = "<table>";
  filterDate.forEach(function(filterDate) {
    fDate += "<tr>";
    fDate += "<td>" + filterDate.firstname + "</td>";
    fDate += "<td>" + filterDate.start + "</td>";
    fDate += "<td>" + filterDate.end + "</td>";
    fDate += "</tr>";
  });
  fDate += "</table>";
  document.getElementById("demo1").innerHTML = fDate;
}

<body onload="filterDates()">
  <select id="endDate" onchange="filterDates(this.value);">
    <option label="All Years" value="All">All Years</option>
    <option label="Past Years" value="Past">Past Years</option>
    <option label="Present" value="Present">Present</option>
  </select>
  <p id="demo1"></p>
  <body/>

关键是过滤，我不想改变太多，所以我留下了大部分情况下你是怎么做的，除了现在它在内部使用 Array.filter 和 switch 来知道如何过滤基于所选选项。

【讨论】：

不客气。如果此答案解决了您的问题，请随时将其作为答案进行检查。很高兴我能提供帮助。
``` 函数 sortEDate() { const filterDate = [];让 cDate = document.getElementById("endDate").value; cDate = cDate || “所有年份”； filterDate.push(...employees.filter(function(item){ switch (cDate) { case "All Years": return true; case "Past Years": return item.end
这是因为我们需要将过滤器的结果传播到“推送”中，以便它们被插入，我们不推送数组本身，而是单独推送项目。它被称为扩展运算符。
好的，这是一个没有展开运算符的更新版本：jsfiddle.net/kz63v42L/1