定义和用法

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

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

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

语法

array.filter(function(currentValue,index,arr), thisValue)

参数说明

参数 描述
function(currentValue, index,arr) 必须。函数,数组中的每个元素都会执行这个函数
函数参数:

参数 描述
currentValue 必须。当前元素的值
index 可选。当期元素的索引值
arr 可选。当期元素属于的数组对象
thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。
如果省略了 thisValue ,"this" 的值为 "undefined"

首先回顾一下filter的作用:过滤数组中符合条件的元素

基本用法

1
2
3
let arr = [1, 3, 5, 8]
let arrFilter = arr.filter(ele => ele > 4)
console.log(arrFilter) // [5, 8]

另外也可以用来过滤对象数组中符合条件的对象,eg:

1
2
3
4
5
6
7
8
9
10
11
12
13
let arrObj = [{
name: 'aa', age: 13
}, {
name: 'bb', age: 23
}, {
name: 'cc', age: 18
}, {
name: 'dd', age: 11
}, {
name: 'ee', age: 28
}]
let arrObjFilter = arrObj.filter(ele => ele.age > 18)
console.log(arrObjFilter) // [{name: 'bb', age: 23}, {name: 'ee', age: 28}]

进阶用法

数组去重(有点过时)

1
2
3
4
5
let arr = [1, 2, 3, 2, 3, 4]
let arrFilter = arr.filter((ele, index, arr) => {
return arr.indexOf(ele) === index
})
console.log(arrFIlter)

目前比较常用的方法是使用ES6的set完成,eg:

1
2
3
let arr = [1, 2, 3, 2, 3, 4]
let arrFilter = [...new Set(arr)]
console.log(arrFilter)

数组中的空字符去除

1
2
3
4
5
let arr = ['1', '2', '3', '', null, undefined, '  ', '4']
let arrFilter = arr.filter((ele, index, arr) => {
return ele && ele.trim()
})
console.log(arrFIlter)

高级用法

结合map使用可以先过滤出符合条件的对象然后去除某些不需要的字段,比如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 需求: 年龄大于18的姓名
let arrObj = [{
name: 'aa', age: 13
}, {
name: 'bb', age: 23
}, {
name: 'cc', age: 18
}, {
name: 'dd', age: 11
}, {
name: 'ee', age: 28
}]
let arrObjFilter = arrObj.filter(ele => ele.age > 18).map(ele => {
return ele.name
})
console.log(arrObjFilter) // ['bb', 'ee']
filter()

简单讲filter就是一个数组过滤器,参数接收一个函数,数组的每一项经过函数过滤,返回一个符合过滤条件的新数组

函数接收三个参数:

  • item (当前遍历的数组项)
  • i (当前项索引)
  • arr (调用filter数组本身)
      // 需求找到数组内偶数
 let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

        let newArr = arr.filter((item, i, arr) => {
//函数本身返回布尔值,只有当返回值为true时,当前项存入新数组。
return item % 2 == 0
})
console.log(newArr)
再来一个应用,巧妙地用filter结合indexof实现去重
indexOf在js中有着重要的作用,可以判断一个元素是否在数组中存在,或者判断一个字符是否在字符串中存在,如果存在返回该元素或字符第一次出现的位置的索引,不存在返回-1。
let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 2, 3, 4, 5, 6, 7]

        let newArr = arr1.filter(function(item, i, self) {
let a = self.indexOf(item)
console.log(`item----${item},self.indexOf(item)---${a},i----${i}`)
return self.indexOf(item) === i;
}); console.log(newArr) //[1, 2, 3, 4, 5, 6, 7, 8]

js中filter过滤用法总结的更多相关文章

  1. js中filter的用法

    filter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素. 和map()类似,Array的filter()也接收一个函数.和map()不同的是,filter()把传入的函 ...

  2. 浅谈JS中 reduce() 的用法

    过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...

  3. JS中 reduce() 的用法

    过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...

  4. [转载]js中return的用法

    一.返回控制与函数结果,语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制,无函数结果,语法为:return;  在大多数情况下,为事件处理函 ...

  5. js中this的用法

    经过近几周的模拟面试题,我查询了一些资料,今天就来说说,在js中this的用法吧.方法有四:第一,用作全局变量,第二,用作表该对象,第三,用作构造函数,第四,用作call和applay

  6. JQuery之append和appendTo的区别,还有js中的appendChild用法

    JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的 ...

  7. JS中event.keyCode用法及keyCode对…

    js中event.keyCode用法及keyCode对照表 标签: javascriptJavaScriptJavascriptjavaScript 2012-12-11 15:11 HTML Jav ...

  8. springboot中filter的用法

    一.在spring的应用中我们存在两种过滤的用法,一种是拦截器.另外一种当然是过滤器.我们这里介绍过滤器在springboot的用法,在springmvc中的用法基本上一样,只是配置上面有点区别. 二 ...

  9. JS中的this用法详解

    随着对js的深入学习和使用,你会发现它里面包含了很多令人困惑的机制,比如对象.闭包.原型链继承等等,而这其中肯定包含令你现在或者曾经费解的this,如果你不把心一横,花点时间还真不明白这个this的用 ...

随机推荐

  1. Abp添加新的Api(不扩展底层方法)

    定义新的实体类:FileManage;继承 FullAuditedEntity<Guid> 在XX.Application 中定义IXXservice及实现XXservice public ...

  2. 物联网的语言c,python,go等

    日本生鱼片 电热水器的使用方法http://www.hiry.cn/b/mt/33959.html 物联网层次很多,首先要看你从事哪个层级的工作了.既然你问语言,那么肯定是开发类的工作,开发类的对象中 ...

  3. 黑马java课程视频java学习视频

    资料获取方式,关注公总号RaoRao1994,查看往期精彩-所有文章,即可获取资源下载链接 更多资源获取,请关注公总号RaoRao1994

  4. linux下mysql忘记密码解决方案

    一.写随笔的原因:之前自己服务器上的mysql很久不用了,忘记了密码,所以写一下解决方案,以供以后参考 二.具体的内容: 1. 检查mysql服务是否启动,如果启动,关闭mysql服务 运行命令:ps ...

  5. time:时间就是生命

    golang中的time包是用来处理时间的. 1.时间的基本属性 package main import ( "fmt" "strings" "tim ...

  6. 英国电信选择由 Canonical 开发的 Ubuntu OpenStack 作为云平台

    英国电信(简称 BT,British Telecom)宣布,选择由 Canonical 开发的 Ubuntu OpenStack 作为云平台,该平台将有助于支持引入 5G 和光纤到户的连接. 作为 U ...

  7. IList,List<T>转换为DataTable 常用收藏

    List<info> infos = Dal.GetInfos(); DataTable dt = new DataTable(); dt.Columns.Add("cName& ...

  8. Android九宫格解锁有多少种姿势

    参考知乎:知乎.

  9. SQL truncate 、delete与drop区别(转)

    相同点: 1.truncate和不带where子句的delete.以及drop都会删除表内的数据. 2.drop.truncate都是DDL语句(数据定义语言),执行后会自动提交. 不同点: 1. t ...

  10. C++ Primer 第 5 版 习题参考答案

    从 5 月初 - 8 月 16 日,每天基本都在啃 C++ 的语法.起初直接看C++ Primer 中文版(第 5 版),发现后边的章节看着很吃力.所以就转而看了清华大学郑莉老师和李超老师的视频C++ ...