如何在 JavaScript ES6 中过滤对象数组？ [复制]答案

【问题标题】：How to filter array of objects in JavaScript ES6? [duplicate]如何在 JavaScript ES6 中过滤对象数组？ [复制]
【发布时间】：2021-06-15 19:36:15
【问题描述】：

我有存储在 JS 对象数组中的数据。请参阅下面的示例。

const data = [
 {"company": 5, "office": 3355, "section": "00045"},
 {"company": 2, "office": 4322, "section": "00008"},
 {"company": 3, "office": 3355, "section": "00124"},
 {"company": 4, "office": 8907, "section": "00023"},
 {"company": 10, "office": 4322, "section": "00008"},
 {"company": 10, "office": 6778, "section": "00004"},
 {"company": 3, "office": 3355, "section": "00012"},
 {"company": 2, "office": 6778, "section": "00098"},
 {"company": 9, "office": 3355, "section": "00077"},
 {"company": 10, "office": 6778, "section": "00055"}
];

用户界面如下所示：

$("#btn-filter").on("click", function() {
  let company = $("#company").val().trim();
  let office = $("#office").val().trim();
  let section = $("#section").val().trim();
  $("#company").val(company);
  $("#office").val(office);
  $("#section").val(section);

  if (company == '' && office == '' && section == '') {
    alert("At least one field must be entered.");
    return;
  }

  let data = filterData(company, office, section);
  console.log(data);
});

function filterData(company, office, section) {
  let filtered_data = app_data.find(function(idx) {
    return idx.company || idx.office || idx.section;
  });
  return filtered_data;
};

const app_data = [
  {"company": 5, "office": 3355, "section": "00045"},
 {"company": 2, "office": 4322, "section": "00008"},
 {"company": 3, "office": 3355, "section": "00124"},
 {"company": 4, "office": 8907, "section": "00023"},
 {"company": 10, "office": 4322, "section": "00008"},
 {"company": 10, "office": 6778, "section": "00004"},
 {"company": 3, "office": 3355, "section": "00012"},
 {"company": 2, "office": 6778, "section": "00098"},
 {"company": 9, "office": 3355, "section": "00077"},
 {"company": 10, "office": 6778, "section": "00055"}
];

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row form-group bg-light no-gutters py-2">
  <label for="company">Company:</label>
  <div><input id="company" placeholder="Enter Company #"></div>
  <label for="office">Office:</label>
  <div><input id="office" placeholder="Enter Office #"></div>
  <label for="section">Section:</label>
  <div><input id="section" placeholder="Enter Section #"></div>
  <div><button id="btn-filter">Filter</button></div>
</div>

上面的示例应该在控制台中返回过滤后的数据。用户可以选择仅过滤一个或多个文件。如果用户只输入公司和部门，则只应返回匹配的记录。到目前为止，我无法让它正常工作。不管我在搜索条件中输入什么，总是会返回一条记录。我想知道是否有一种简单的方法可以在 JavaScript 中实现这一点。谢谢。

【问题讨论】：

find 方法只返回 1 条记录。你应该改用filter。
@Eldar 你能举个例子吗？
这会返回三个结果：app_data.filter(x => x.company == 10)

标签： javascript ecmascript-6

【解决方案1】：

你需要改变一些东西

用户filter 方法来过滤您的数组。
您需要使用 && 运算符而不是 || 来缩小搜索范围

$("#btn-filter").on("click", function() {
  let company = $("#company").val().trim();
  let office = $("#office").val().trim();
  let section = $("#section").val().trim();
  $("#company").val(company);
  $("#office").val(office);
  $("#section").val(section);

  if (company == '' && office == '' && section == '') {
    alert("At least one field must be entered.");
    return;
  }

  let data = filterData(company, office, section);
  console.log(data);
});

function filterData(company, office, section) {
  let filtered_data = app_data.filter(function(idx) {
    let result = true;
    if (company) {
      result = result && +company === idx.company
    }
    if (office) {
      result = result && +office === idx.office
    }

    if (section) {
      result = result && +section === idx.section
    }
    return result;
  });
  return filtered_data;
};

const app_data = [{
    "company": 5,
    "office": 3355,
    "section": "00045"
  },
  {
    "company": 2,
    "office": 4322,
    "section": "00008"
  },
  {
    "company": 3,
    "office": 3355,
    "section": "00124"
  },
  {
    "company": 4,
    "office": 8907,
    "section": "00023"
  },
  {
    "company": 10,
    "office": 4322,
    "section": "00008"
  },
  {
    "company": 10,
    "office": 6778,
    "section": "00004"
  },
  {
    "company": 3,
    "office": 3355,
    "section": "00012"
  },
  {
    "company": 2,
    "office": 6778,
    "section": "00098"
  },
  {
    "company": 9,
    "office": 3355,
    "section": "00077"
  },
  {
    "company": 10,
    "office": 6778,
    "section": "00055"
  }
];

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row form-group bg-light no-gutters py-2">
  <label for="company">Company:</label>
  <div><input id="company" placeholder="Enter Company #"></div>
  <label for="office">Office:</label>
  <div><input id="office" placeholder="Enter Office #"></div>
  <label for="section">Section:</label>
  <div><input id="section" placeholder="Enter Section #"></div>
  <div><button id="btn-filter">Filter</button></div>
</div>

【讨论】：

【解决方案2】：

您可以将 filterData 函数更改为“逐步”过滤数据，直到获得所需的结果。

例子：

const filterData = (company, office, section) => {
    let filteredData = app_data;

    if (company != null) {
        filteredData = filteredData.filter(d => d.company === company);
    }

    if (office != null) {
        filteredData = filteredData.filter(d => d.office === office);
    }

    if (section != null) {
        filteredData = filteredData.filter(d => d.section === section);
    }

    return filteredData;
}

这样，如果任何输入过滤器参数为空，它们将不会被应用，但所有不是的过滤器参数都将被应用。

另外，它不会改变原来的app_data数据列表。

【讨论】：