javascript 过滤

javascript 过滤

Javascript filter() function is one of my favorite array functions and can be very useful in many cases. But it can be tricky to get the hang of at first and to get over the that bump in the road you need to understand 2 things about filter().

Javascript filter()函数是我最喜欢的数组函数之一，在许多情况下可能非常有用。 但是，要想一开始就克服困难，您需要了解关于filter()的两件事可能很棘手。

1. Filter returns a new array so you will need to set this to a new variable.

1. Filter返回一个新数组，因此您需要将其设置为新变量。

2. You must realize that filter() is creating a new array based off of something inside of a different array that is being interpreted as either true or false.

2.您必须意识到filter()正在基于被解释为true或false的另一个数组内部的内容创建一个新数组。

Lets take a look. We will use this small data set of a few numbers for example:

让我们来看看。 我们将使用一些数字的小数据集，例如：

let arrList = [2, 3, 4, 2, 5];

Now, lets say we want a new array containing only numbers greater than 3. Using filter() we could have our end product do something like this:

现在，假设我们想要一个仅包含大于3的数字的新数组。使用filter()我们可以让最终产品执行以下操作：

let newArr = arrList.filter(item => { return item > 3;})//[4,5];

But, what happened?

但是，发生了什么事？

We know that filter needs to be set to a new variable since it returns a new array so we have set newArr to be just that:

我们知道必须将filter设置为新变量，因为它会返回一个新数组，因此我们将newArr设置为：

let newArr;

Now we need to add the array that we want to filter which is arrList. So you can visualize(or type out if you are following along):

现在，我们需要添加要过滤的数组arrList。 因此，您可以可视化(如果要继续，则可以键入)：

let newArr = arrList.filter();

Once we have this set up, we need a variable to let the filter() function know which element of the original array we are currently on. We will use the word “item” for this. (You can use anything you would like for this but I recommend it to always be something that makes sense).

设置好之后，我们需要一个变量来让filter()函数知道我们当前在原始数组的哪个元素上。 为此，我们将使用“项目”一词。 (您可以为此使用任何东西，但我建议始终使用有意义的东西)。

At this moment, our steps so far have got us to this point:

目前，我们到目前为止的步骤已经使我们达到了这一点：

let newArr = arrList.filter(item);

This item represents each value from newArr variable. So the first time we go through this function, item will first be the number 2 because that is the first element of the set, once the function does what it needs to do with this current number 2 it will go to 3 since it is the second number in the list and so on and so on:

此项代表newArr变量中的每个值。 因此，当我们第一次使用此函数时，item将首先是数字2，因为它是集合的第一个元素，一旦函数对该当前数字2进行了必要的处理，它将变为3，因为它是集合的第一个元素。列表中的第二个数字，依此类推：

let arrList = [2, 3, 4, 2, 5];

But, we still need to check each of these to see if each number is greater than 3. We will use arrow functions for this for shorthand and will be the code from earlier:

但是，我们仍然需要检查每个数字，以查看每个数字是否大于3。为此，我们将使用箭头函数作为简写，并且将是更早的代码：

let newArr = arrList.filter(item => { return item > 3;})

Note: You can also write this without the curly braces but for familiarity we will keep them.

注意：您也可以在不使用花括号的情况下编写此代码，但为熟悉起见，我们将其保留。

So, we have a variable that will contain our new array, we have the variable we will use for each item in the array and now we have added the function that we need to evaluate to true or false.

因此，我们有一个包含新数组的变量，我们有将用于数组中每个项目的变量，现在我们添加了需要评估为true或false的函数。

So lets walk through this final step.

因此，让我们完成最后一步。

The arrList.filter() runs and the “item” variable gets set to 2.

运行arrList.filter()并将“ item”变量设置为2。

In the function you see “return item > 3” which is really “return 2 > 3”.

在功能中，您会看到“返回项目> 3”，实际上是“返回2> 3”。

2 is not larger than 3 so it skips it.

2不大于3，因此跳过它。

Item now becomes 3 or “item > 3” or “3 > 3”.

现在，项目变为3或“项目> 3”或“ 3> 3”。

3 is not larger than 3 so it skips it.

3不大于3，因此将其跳过。

Item now becomes 4 or “item > 3” or “4 > 3”

物品现在变为4或“物品> 3”或“ 4> 3”

4 is larger than 3! So 4 gets added to this new array at which point it looks like this in the background running:

4大于3！ 因此，将4添加到此新数组中，此时它在后台运行中看起来像这样：

newArr = [4];

It will continue through 2 and then 5 until the end product:

它将持续2到5，直到最终产品：

newArr = [4, 5];

I hope this has helped you understand filter() in javascript just a little better. If you have any questions please feel free to reach out.

我希望这可以帮助您更好地了解javascript中的filter()。 如有任何疑问，请随时与我们联系。

Happy coding!

编码愉快！

If you would like to learn more I recommend following me here or checking out my blog http://jaylanthedev.tech/

如果您想了解更多信息，我建议在这里关注我或查看我的博客http://jaylanthedev.tech/

翻译自: https://medium.com/swlh/understanding-javascript-filter-out-the-noise-7df3d776712b

javascript 过滤

相关资源：微信小程序源码-合集6.rar