如何在JavaScript中使用filter()数组方法

介绍

filter() Array 方法创建一个新数组，其中包含来自现有数组的给定条件下的元素。

在本文中，您将了解 filter() 数组方法。

先决条件

如果您想继续阅读本文，您将需要：

• 熟悉 JavaScript 数组 。
• 对 JavaScript 函数 有一定的了解。

在数字数组上使用 filter()

filter() 的语法类似于：

var newArray = array.filter(function(item) {
  return condition;
});

item 参数是对数组中当前元素的引用，因为 filter() 会根据 condition 检查它。 在对象的情况下，这对于访问属性很有用。

如果当前的 item 通过了 condition，它将返回到新数组。

考虑这个数字数组示例：

var numbers = [1, 3, 6, 8, 11];

然后应用 filter() 以返回所有大于 7 的数字：

var greaterThanSeven = numbers.filter(function(number) {
  return number > 7;
});

console.log(greaterThanSeven);

此代码将生成一个新的过滤数组：

output[8, 11]

返回具有两个大于 7 的值的数组。

在对象数组上使用 filter()

filter() 的一个常见用例是通过对象的属性来处理对象数组。

考虑以下 creature 对象的示例数组：

var creatures = [
  {name: "Shark", habitat: "Ocean"},
  {name: "Whale", habitat: "Ocean"},
  {name: "Lion", habitat: "Savanna"},
  {name: "Monkey", habitat: "Jungle"}
];

然后应用 filter() 以返回所有 habitat 等于 Ocean 的生物：

var aquaticCreatures =  creatures.filter(function(creature) {
  return creature.habitat == "Ocean";
});

console.log(aquaticCreatures);

此代码将生成一个新的过滤数组：

Output[ {name: "Shark", habitat: "Ocean"}, {name: "Whale", habitat: "Ocean"} ]

返回一个包含在“海洋”中有栖息地的两个生物的数组。

结论

在本文中，您了解了 filter() 数组方法。

有关更多详细信息，请参阅有关 filter() 的 MDN 参考。

Filter 只是 JavaScript 中数组的几种迭代方法之一，请阅读 如何在 JavaScript 中使用数组迭代方法 了解其他方法，如 map() 和 reduce()。