zoukankan      html  css  js  c++  java
  • 数组filter()参数详解,巧用filter()数组去重

     

     

    数组方法挺多,但是用来用去可能也就foreach,splice以及slice接触较多,filter()说实话之前也没过多了解。其实filter()为数组提供过滤功能,它会遍历数组所有元素,并且返回满足条件的元素,如下:

    第一位形参

    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]

    上述代码所做的事情,就是将arr中每个元素一次传入函数与8进行比较,得出8,9,10。第一个形参X就代表了数组中的元素。

    第二位形参

    让我们再来看看如下代码:

    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代表数组索引,它的循环过程是这样的,首先传入元素1,它的索引为0,而0%3===0,满足了条件。

    第二遍传入了2,索引为1,但1%3!==0,且1比8小,所以被排除,依次循环,得出我们arr2的输出结果。

    第三位形参

    我们再来看一段代码,结合filter进行数组去重

    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]

    这是怎么实现的呢,filter的第三参数self代表函数本身,而indexOf始终返回第一次找到匹配该元素的索引,我们来走走遍历过程。

    第一次循环,传入元素1,index(1)的索引为0,而此时1的索引本来就是0,OK,满足。

    第二次循环,传入元素2,index(2)的索引为1,而此时2的索引也是1,OK,也满足。

    第三次循环,传入元素2,index(2)的索引为1,而此时2的索引为2,OK,不满足,被PASS,这里就是巧妙的借用了indexOf始终查找到第一次出现的位置。

    总结

    filter(x,index,self)可以为数组提供过滤功能,其中x代表元素,index是与X一同传入元素的索引,而self代表数组本身。

    就这么多吧。

  • 相关阅读:
    Spring Data Rest如何暴露ID字段
    Windows空间清理2
    把爱好变成职业
    面对面的口头信息传递对人决策的影响力最大
    最好是更好的敌人
    文明主线
    钱的本质
    2019第42周日
    开源与商业化
    生涯四度
  • 原文地址:https://www.cnblogs.com/shouyeren/p/9012723.html
Copyright © 2011-2022 走看看