js filter()方法的使用

灰太狼 2022-05-04 00:30 144阅读 0赞

**<1>  
filter**   
它用于把Array的**某些元素过滤掉**，然后返回剩下的元素。

和map()类似，Array的filter()也**接收一个函数**。和map()不同的是，filter()**把传入的函数依次作用于每个元素**，然后根**据返回值是true还是false决定保留还是丢弃**该元素。

例如，在一个Array中，删掉偶数，只保留奇数，可以这么写

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

把一个Array中的空字符串删掉，可以这么写：

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

trim()函数去掉字符串首尾空白字符

**回调函数**

filter()接收的回调函数，其实可以有多个参数。**通常**我们仅使用**第一个参数**，表示**Array的某个元素**。回调函数还可以接收**另外两个**参数，表示**元素的位置**和**数组本身**：

var arr = ['A', 'B', 'C'];
    var r = arr.filter(function (element, index, self) {
        console.log(element); // 依次打印'A', 'B', 'C'
        console.log(index); // 依次打印0, 1, 2
        console.log(self); // self就是变量arr
        return true;
    });

利用filter，可以巧妙地去除Array的重复元素：

'use strict';
    
    var
        r,
        arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
    
        r = arr.filter(function (element, index, self) {
        return self.indexOf(element) === index;
    });
    
    alert(r.toString());

indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了，所以重复的元素仅会保留第一个位置的元素

练习

请尝试用filter()筛选出素数：

'use strict';
    
    function get_primes(arr) {
    var s = arr.filter(function(x){
       if(x<4)return x!=1;
       var i=2;
       for(;i<=x/2;++i)
       if(x%i==0)return false;
       return true;
    });
    return s;
    }
    
    // 测试:
    var
        x,
        r,
        arr = [];
    for (x = 1; x < 100; x++) {
        arr.push(x);
    }
    r = get_primes(arr);
    if (r.toString() === [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97].toString()) {
        alert('测试通过!');
    } else {
        alert('测试失败: ' + r.toString());
    }

<2>

廖雪峰官网 filter()

[https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014351219769203e3fbe1ed611475db3d439393add8997000][https_www.liaoxuefeng.com_wiki_001434446689867b27157e896e74d51a89c25cc8b43bdb3000_0014351219769203e3fbe1ed611475db3d439393add8997000]

[https_www.liaoxuefeng.com_wiki_001434446689867b27157e896e74d51a89c25cc8b43bdb3000_0014351219769203e3fbe1ed611475db3d439393add8997000]: https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014351219769203e3fbe1ed611475db3d439393add8997000