[译]5分钟内练习JavaScript数组过滤方法

本文翻译自：dev.to/jamesqquick…

作者：James Q Quick

JavaScript数组有一些强大的内置方法，可以简化使用它们的工作。在本文中，让我们看看数组过滤器（）方法。

入门指南

这篇文章是学习JavaScript数组方法系列文章的一部分。您可以在这个存储库中找到启动器代码。

在那个存储库中，有一个worksheet.js文件，里面有一些星球大战的样本数据。因此，克隆存储库，打开worksheet.js文件，并向下滚动到过滤器部分。或者，如果您愿意，您可以将示例数据复制到JavaScript文件中，而无需克隆。

这是样本数据。

const characters = [
    {
        name: 'Luke Skywalker',
        height: 172,
        mass: 77,
        eye_color: 'blue',
        gender: 'male',
    },
    {
        name: 'Darth Vader',
        height: 202,
        mass: 136,
        eye_color: 'yellow',
        gender: 'male',
    },
    {
        name: 'Leia Organa',
        height: 150,
        mass: 49,
        eye_color: 'brown',
        gender: 'female',
    },
    {
        name: 'Anakin Skywalker',
        height: 188,
        mass: 84,
        eye_color: 'blue',
        gender: 'male',
    },
];

阵列滤波器概述

过滤器方法返回一个新的数组，其中只包含我们希望包含的项。我们通过向过滤器方法传递一个回调函数来告诉它应该包含哪些项。这个回调函数接受一个参数（数组中的每个项），然后我们返回一个布尔值，说明该项是否应该包含在过滤的结果中。

例如，如果我们有一个数字数组，并且我们只想要大于50的数字，我们的筛选条件将如下所示。

num > 50

所以，整个过滤器看起来像这样。

const numbers = [25,50,75];
const lessThan50 = numbers.filter( num => {
  return num > 50;
})

让我们来看看几个练习。

1.获取质量大于100的字符

请记住，我们通过传递一个回调函数来调用过滤器，该函数确定是否应该过滤或包含给定的项。在这种情况下，条件是character.mass>100。所以，我们的过滤器会是这样的。

const greater100Characters = characters.filter(
    (character) => {
      return character.mass > 100;
    }
);

由于我们的回调函数有一行返回，我们可以通过省略返回关键字和函数括号来简化这个箭头函数。这个语法暗示了一个隐式返回，这意味着在=>之后的任何内容都将被自动返回。

const greater100Characters = characters.filter(
    (character) => character.mass > 100
);

2.获得高度小于200的字符

现在，我们的情况有点变化。条件是character.height<200。

const shorterCharacters = characters.filter(
    (character) => {
      return character.height < 200;
    }
);

同样，我们可以对隐式返回使用缩写语法。

const shorterCharacters = characters.filter(
    (character) => character.height < 200
);

3.获得所有男性角色

现在，我们只想通过检查每个角色的性别属性来获得男性角色。

const maleCharacters = characters.filter(
    (character) => character.gender === 'male'
);

4.获得所有女性角色

最后，我们可以调整前面的过滤器来搜索字符串“女性”作为性别属性。

const femaleCharacters = characters.filter(
    (character) => character.gender === 'female'
);

如果你想了解更多关于JavaScript的信息，请务必在YouTube上订阅！