← 返回首页
Javascript基础教程(二十四)
发表时间:2020-03-30 01:17:06
讲解Javascript的filter

1.什么是filter

filter()方法会创建一个新数组,原数组的每个元素传入回调函数中,回调函数中有return返回值,若返回值为true,这个元素保存到新数组中;若返回值为false,则该元素不保存到新数组中;原数组不发生改变。简单来说就是把原数组的某些元素过滤掉,然后返回剩下的元素。

2.实例

1)使用filter过滤出数组中的素数。

<script>
    const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
    let filterArray = arr.filter(function (e) {
        if(e<2){
            return false;
        }else{
            for(let i=2;i<=Math.sqrt(e);i++){
                //说明发生了整除
                if(e%i==0){
                    return false;
                }
            }
        }
       return true;
    });
    console.log(filterArray);
</script>
运行结果:
(8) [2, 3, 5, 7, 11, 13, 17, 19]

2)利用filter,可以巧妙地去除Array的重复元素。

如果不使用过滤器(filter),咱们至少可以考虑使用map或者json对象返回keys或者属性集合的思路来解决。

使用map实现数组元素去重。

 let arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];

  //1. 先使用map来实现数组元素去重。

  let map = new Map();
  for(let i=0;i<arr.length;i++){

      if(!map.has(arr[i])){  //说明key已经存在。
          map.set(arr[i],arr[i]);    //"apple" : "apple"
      }
  }

  //console.log(map);

  arr = map.keys();
  console.log(arr);

使用json对象实现数组元素去重。

let arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];

let obj = {};
  for(let i=0;i<arr.length;i++){

      if(!obj.hasOwnProperty(arr[i])){ //如果对象没有这个属性

          //obj.arr[i] = arr[i];
          obj[arr[i]] = arr[i];
      }
  }

  console.log(obj);
  arr = Object.keys(obj); //获得对象的属性集合。

  console.log(arr);

把数组元素添加到Set实现去重。

<script>

  let arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
  let set = new Set();
  arr.forEach((e,i)=>{
     set.add(e);
  })
  console.log(set);
  arr = Array.from(set); //集合转数组
  console.log(arr);
</script>

使用过滤器。

<script>

    let r,
        arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
    r = arr.filter(function (element, index, self) {
        return self.indexOf(element) === index;
    });
    console.log(r.toString());
</script>

运行结果:
apple,strawberry,banana,pear,orange