在 JavaScript 中过滤对象数组

Question

JavaScript 数组有一个 filter() 方法 让您创建一个新数组，该数组仅包含通过特定测试的元素。 换句话说， filter() 给你一个只包含你需要的元素的新数组。

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

nums.filter(function isEven(num) {
  return num % 2 === 0;
}); // [2, 4, 6, 8, 10]

这 filter() 方法接受一个 回调 参数，并返回一个包含回调返回的所有值的数组 true 为了。 这使得它很容易用于过滤对象数组。 例如，给定一个字符列表，这里是你如何找到所有字符的方法 team 财产是 'Avengers' .

const characters = [
  { name: 'Batman', team: 'Justice League' },
  { name: 'Hulk', team: 'Avengers' },
  { name: 'Flash', team: 'Justice League' },
  { name: 'Iron Man', team: 'Avengers' },
  { name: 'Deadpool', team: 'X-Force' }
];

const avengers = characters.filter(character => character.team === 'Avengers');

过滤器回调通常使用 箭头函数 ，因为过滤器回调通常是单行的。

更复杂的例子

过滤器回调可以任意复杂，只要它是同步的。 例如，假设您有一个 Star Trek 角色列表，并且只想获取出现在 Star Trek: The Next Generation 中的角色。 这是您可以使用的方法 Array#filter() 过滤字符数组 series 属性是一个数组：

const characters = [
  { name: 'James T. Kirk', series: ['Star Trek'] },
  { name: 'Spock', series: ['Star Trek', 'Star Trek: The Next Generation'] },
  { name: 'Jean-Luc Picard', series: ['Star Trek: The Next Generation'] },
  { name: 'Worf', series: ['Star Trek: The Next Generation', 'Star Trek: Deep Space Nine'] }
];

const tngCharacters = characters.filter(character => {
  return character.series.includes('Star Trek: The Next Generation');
});