JavaScript Array filter()方法

在 JavaScript 中，Array对象提供了很多实用的数组操作方法，其中 filter() 方法可以筛选数组中符合条件的元素并组成新的数组返回。

语法

array.filter(callback(element[, index[, array]])[, thisArg])

• callback(element[, index[, array]]): 必须，回调函数，对数组中的每个元素执行一次该函数；
• element: 必须，当前处理的数组元素；
• index: 可选，当前处理元素的索引；
• array: 可选，当前处理的数组；
• thisArg: 可选，执行 callback 时 this 对象。

示例

假设有一个数组：

var numbers = [10, 2, 7, 5, 8, 3];

现在我们想要筛选出其中大于 5 的元素，可以使用 filter() 方法：

var filteredNumbers = numbers.filter(function(element) {
  return element > 5;
});

此时 filteredNumbers 数组将只包含符合条件的元素，即：

[10, 7, 8]

应用

filter() 方法可以用于很多实际的场景，比如筛选表格中符合条件的行、过滤搜索结果等。

筛选表格

假设有一个表格，表格每行包含学生姓名、年龄、成绩三列，现在我们想要筛选出成绩大于 90 分的学生信息：

<table id="scoreTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>成绩</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>80</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td>95</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>19</td>
      <td>90</td>
    </tr>
  </tbody>
</table>

我们可以通过以下代码来实现筛选：

var scoreTable = document.getElementById('scoreTable');
var rows = scoreTable.getElementsByTagName('tr');
var filteredRows = Array.prototype.filter.call(rows, function(row) {
  var score = row.getElementsByTagName('td')[2].textContent;
  return score > 90;
});

最终 filteredRows 数组就包含了符合条件的行元素。

过滤搜索结果

假设有一个输入框，用户可以输入关键字进行搜索，搜索结果将显示在一个列表中，现在我们想要根据用户的输入筛选出符合条件的结果：

<input type="text" id="searchInput">
<ul id="searchResult">
  <li>Red</li>
  <li>Green</li>
  <li>Yellow</li>
  <li>Blue</li>
  <li>Black</li>
</ul>

我们可以通过以下代码来实现筛选：

var searchInput = document.getElementById('searchInput');
var searchResult = document.getElementById('searchResult');
searchInput.addEventListener('input', function() {
  var keyword = searchInput.value;
  var items = searchResult.getElementsByTagName('li');
  Array.prototype.forEach.call(items, function(item) {
    item.style.display = item.textContent.indexOf(keyword) > -1 ? '' : 'none';
  });
});

每次用户输入内容时，筛选出符合条件的结果并设置相应的 CSS 样式，从而达到过滤搜索结果的效果。

总结

Array filter() 方法可以筛选出数组中符合条件的元素并组成新的数组返回，非常方便实用。在实际的开发中，可以结合其他 DOM 操作或者业务逻辑进行更加复杂的应用。