JavaScript进阶操作之过滤filter

引入

我们在日常生活中，不难遇到一个非常耗时间的工作——筛选。

比如，帮老师筛查出不及格的人数，帮老总筛选出上班考勤全满的人——掘金工作人员筛选出更文数量在30以上的创作者（不是）……

人肉计数和筛查显然非常低效，而且很容易出错。计算机就是用来帮我们干这件事的。很多人估计第一反应回是用循环，遍历所有元素，满足条件提出来，不满足就下一个

这个是没有问题的。但是我们程序员往往会把常用的功能封装起来，形成一个可以随时调用的工具——

这就是filter

1. filter使用机理

一般用filter来过滤array中的元素。当我们把filter作用于array的时候，他本身是一个array的方法（和对象绑定的函数）。

我们需要传入的参数是一个函数，filter之后会把我们传入的函数依次对每个array中的元素作用一遍，当获得返回值是True的时候保留该元素，False的时候则丢弃该元素。最后返回一个过滤后的值，而不对原来的对象array进行修改

从机理我们可以看出，filter中需要传入的函数需要能返回布尔值。并且我们需要把过滤后的值赋给一个变量，或者直接输出出来，否则无法拿到这个结果，因为filter不改变原array。

2. filter实用案例

最经典的案例就是奇偶数过滤了：

var test1 = [1, 2, 3, 4, 5, 6, 7, 9];
var r = test1.filter(function (x) {
    return x % 2 !== 0;
});
r; // [1, 3, 5, 7, 9]

我们定义了一个array，进行filter之后希望输出奇数，那么我们就设计一个函数，函数内部进行x % 2 !== 0的判断，不等于0的时候返回True，则保留，等于0的时候即为偶数，返回False，丢弃。把结果赋值给r之后输出r即可。

还有一个实用的效果是，把传入的空字符串过滤掉：

var arr = ['A', '', 'B', null, undefined, 'C', '  '];
var r = arr.filter(function (s) {
    return s && s.trim(); // 注意：IE9以下的版本没有trim()方法
});
r; // ['A', 'B', 'C']

trim方法是用于移除字符串左右的空格

3. filter的回调函数

filter方法中支持回调函数。其中主要有三个参数可以使用，一是element，二是index，三是self。

element表示原数组的某个元素

index表示元素位置

self表示数组本身

我们可以将它们依次输出看看效果

var test1 = ['1', '2', '3'];
var r = test1.filter(function (element, index, self) {
    console.log(element); // 输出'1', '2', '3'
    console.log(index); // 输出0, 1, 2
    console.log(self); // self就是变量test1这个数组
    return true;
});

这样在日志输出中我们会看到上面的效果。array的各项参数就被提取出来了。

那么这个有什么用呢？、

我们可以利用这个来去重。去除重复元素，有经验的小伙伴应该知道，我们可以放进集合，可以循环并判断……这个filter方法可以拓宽一下大家的知识面，也相当于增加一种理解。

var r;
var test1 = ['a','b','a','c','b','c','d','e'];
r = test1.filter(function (element, index, self) {
    return self.indexOf(element) === index;
});

indexOf函数返回的是第一个元素的位置，而element则用于回调所有元素来供给判断。当第一个元素的index和当前元素的index一样的时候，说明当前元素之前没有出现，于是返回True，被filter保留下来，反之则被过滤掉。

输出成功。