Solution: Count pets in an array - JavaScript教程

- [Instructor] We need to create a function called Count Cats that's going to take a look at our test data, our pet array, and it's going to find any that have a category of cat. So if I scroll over here, that's a cat. We have a dog, we have other dogs, there's rabbits, there's stingrays in the mix as well. We just want to find the cats. So the first thing I want to do is start to stub out our function here. What I'm really trying to do is filter the pets, right? So we'll say return pets.filter. Now, the function that we need to place inside of pets.filter we're actually going to create here on line 13. So we're going to create a function called by category and this is going to be what's called a higher order function. This is going to help us deal with the scope of this function. So I'm going to need to drill down into these different objects in order to find the right thing. So the first thing it's going to do is going to send in some sort of category that we're going to filter by. So in this case, we'll use a cat. Then we're going to compare that category with the pets category. So check this out. We're actually going to create what's called a higher order function. It's a function that returns another function. So this function we'll use the function keyword is going to take a look at each individual object that's inside of this pet array. Then we're going to compare, we'll say return pet.category equal category. So we're making that comparison, making sure that this category matches the one that I've sent in. So what do I mean by sent in? It'll make more sense as I use this function here as the argument that we send to filter. So we're going to say by category, and the parameter that we send is again the category. So we're going to use cat. So anytime we iterate through our array of pets we're going to be calling this function. So we're calling the function. It's going to check that the pets category matches the category that I sent in, and it's going to send that back up to the function. So we'll return the object if it matches. We'll skip over it if we don't, okay? Now the final thing we want to do, because we're counting, is we're going to chain on the dot length property so that we're not returning the actual array but we're actually returning the length of that array. Okay, let's give this a test. We're going to say, test my code, and check it out. All of our tests have passed. Our output matches the test case. Let's go ahead and refactor this so that our big long function, our higher order function here, actually is a single line. So let me show you this. In order to refactor it all we need to do is remove the function keyword. We'll use the arrow to point at what our function returns. So category is pointing at this set of braces here. Then we're going to remove this, because if we are using the arrow we don't have to implicitly say return. This is just going to return whatever comes next. We're shortening this. We're removing a lot of syntax here, and at this point this is what this should look like. And you even can do this. You can remove the parentheses, because we're just sending a single parameter to this function. So that's a quick refactor that we can do. Let's test it again to make sure that this is still working and our tests are still passing. So an optional refactor, if you wanted to use a single line function for your higher order function.