前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript中的过滤器(filter)

JavaScript中的过滤器(filter)

作者头像
刘亦枫
发布2020-03-19 17:30:51
3.2K0
发布2020-03-19 17:30:51
举报

定义:

filter()方法会创建一个新数组,原数组的每个元素传入回调函数中,回调函数中有return返回值,若返回值为true,这个元素保存到新数组中;若返回值为false,则该元素不保存到新数组中;原数组不发生改变。

注意: filter() 不会对空数组进行检测。

注意: filter() 不会改变原始数组。

语法:

 array.filter(function(currentValue,index,arr), thisValue)
filter()参数介绍:   参数名    说明   callback   用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)  返回true表示保留该元素(通过测试),false则不保留。  thisArg    可选。执行 callback 时的用于 this 的值。
filter()参数介绍:   参数名 说明   callback 用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)  返回true表示保留该元素(通过测试),false则不保留。  thisArg 可选。执行 callback 时的用于 this 的值。

用法:

filter 为数组中的每个元素调用一次 callback 函数,并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。

callback 只会在已经赋值的索引上被调用,对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过,不会被包含在新数组中。

callback 被调用时传入三个参数:

1.元素的值。 2.元素的索引。 3.被遍历的数组。 如果为 filter 提供一个 thisArg 参数,则它会被作为 callback 被调用时的 this 值。否则,callback 的this 值在非严格模式下将是全局对象,严格模式下为 undefined。。

filter 不会改变原数组。

filter 遍历的元素范围在第一次调用 callback 之前就已经确定了。在调用 filter 之后被添加到数组中的元素不会被 filter 遍历到。 如果已经存在的元素被改变了,则他们传入 callback 的值是 filter 遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。

实例:

例如,在一个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()方法
 });
 r; // ['A', 'B', 'C']

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,打印A,B,C
     return true;
 });

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

1 '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;
   });
 console.log(r.toString()); //apple,strawberry,banana,pear,orange
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 定义:
  • 语法:
  • 用法:
  • 实例:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档