JS的filter用法

Posted 2021-02-14 jianxian

filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。

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

（1）筛选过滤，保留偶数

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

    <script type="text/javascript">
        var arr = [0,1,2,3,4,5,1,4,0];
        var arr_filter = arr.filter(function(x){
            return x%2 == 0;/* 筛选偶数 */ 
        })
        console.log(arr_filter)
    </script>

（2）筛选去除空格

筛选去除空格

    <script type="text/javascript">
        var arr = [‘0‘,1,2,3,4,"",5,1,4,‘0‘,""];
        var arr_filter = arr.filter(function(x){
            return x;/* 筛选空格 */ 
        })
        console.log(arr_filter)
    </script>

（3）回调函数

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

        var arr = [‘A‘,‘B‘,‘C‘,‘d‘];
        var arr_filter = arr.filter(function(element,index,self){
            console.log(element);/* 依次打印‘A‘,‘B‘,‘C‘,‘d‘ */
            console.log(index);/* 依次打印0,1,2,3 */
            console.log(self);/* 打印数组本身即arr */
            return true;
        })

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

        var arr_repeat = [‘A‘,‘B‘,‘A‘,‘B‘,‘B‘,‘C‘,‘A‘,‘D‘];
        var arr_filter = arr_repeat.filter(function(element,index,self){
            return self.indexOf(element) == index;
        })
        console.log(arr_filter);//返回[‘A‘,‘B‘,‘C‘,‘D‘]

    去除重复元素依靠的是indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了。

 

 

 

.