Detailed explanation of array filter() parameters, clever use of filter() array to deduplicate

There are quite a lot of array methods, but foreach, splice and slice may be used for more contact, and filter() did not know much before to tell the truth. In fact, filter() provides a filtering function for the array. It traverses all the elements of the array and returns the elements that meet the conditions, as follows:

first parameter

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x) {
return x >= 8;
});
console.log(arr2); //[8, 9, 10]

What the above code does is compare each element in arr passed to the function one at a time with 8 to get 8, 9, 10. The first parameter X represents the element in the array.

second parameter

Let's look at the following code again:

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
});
console.log(arr2); //[1, 4, 7, 8, 9, 10]

index represents the index of the array, and its looping process is like this. First, the element 1 is passed in, and its index is 0, and 0%3===0, which satisfies the condition.

The second pass passes in 2, the index is 1, but 1% 3! ==0, and 1 is smaller than 8, so it is excluded, and loops in turn to get the output of our arr2.

third parameter

Let's look at another piece of code, combining filter to deduplicate the array

var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7];
var arr2 = arr.filter(function(x, index,self) {
return self.indexOf(x)===index;
});
console.log(arr2); //[1, 2, 3, 4, 5, 6 ,7]

How is this achieved? The third parameter self of filter represents the function itself, and indexOf always returns the index that matches the element for the first time. Let's walk through the traversal process.

In the first loop, the element 1 is passed in, the index of index(1) is 0, and the index of 1 is originally 0 at this time, OK, satisfied.

The second loop, incoming element 2, the index of index (2) is 1, and the index of 2 is also 1 at this time, OK, also satisfied.

The third loop, incoming element 2, the index of index(2) is 1, and the index of 2 is 2 at this time, OK, not satisfied, passed, here is the clever use of indexOf to always find the first occurrence s position.

Summarize

filter(x, index, self) can provide a filtering function for an array, where x represents the element, index is the index of the element passed in with X, and self represents the array itself.

That's all.