js中filter过滤用法总结
定义和用法
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。
语法
array.filter(function(currentValue,index,arr), thisValue)
参数说明
参数 | 描述 | ||||||||
---|---|---|---|---|---|---|---|---|---|
function(currentValue, index,arr) | 必须。函数,数组中的每个元素都会执行这个函数 函数参数:
|
||||||||
thisValue | 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。 如果省略了 thisValue ,"this" 的值为 "undefined" |
首先回顾一下filter的作用:过滤数组中符合条件的元素
基本用法
1 |
let arr = [1, 3, 5, 8] |
另外也可以用来过滤对象数组中符合条件的对象,eg:
1 |
let arrObj = [{ |
进阶用法
数组去重(有点过时)
1 |
let arr = [1, 2, 3, 2, 3, 4] |
目前比较常用的方法是使用ES6的set完成,eg:
1 |
let arr = [1, 2, 3, 2, 3, 4] |
数组中的空字符去除
1 |
let arr = ['1', '2', '3', '', null, undefined, ' ', '4'] |
高级用法
结合map使用可以先过滤出符合条件的对象然后去除某些不需要的字段,比如:
1 |
// 需求: 年龄大于18的姓名 |
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过滤用法总结的更多相关文章
- js中filter的用法
filter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素. 和map()类似,Array的filter()也接收一个函数.和map()不同的是,filter()把传入的函 ...
- 浅谈JS中 reduce() 的用法
过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...
- JS中 reduce() 的用法
过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...
- [转载]js中return的用法
一.返回控制与函数结果,语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制,无函数结果,语法为:return; 在大多数情况下,为事件处理函 ...
- js中this的用法
经过近几周的模拟面试题,我查询了一些资料,今天就来说说,在js中this的用法吧.方法有四:第一,用作全局变量,第二,用作表该对象,第三,用作构造函数,第四,用作call和applay
- JQuery之append和appendTo的区别,还有js中的appendChild用法
JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的 ...
- JS中event.keyCode用法及keyCode对…
js中event.keyCode用法及keyCode对照表 标签: javascriptJavaScriptJavascriptjavaScript 2012-12-11 15:11 HTML Jav ...
- springboot中filter的用法
一.在spring的应用中我们存在两种过滤的用法,一种是拦截器.另外一种当然是过滤器.我们这里介绍过滤器在springboot的用法,在springmvc中的用法基本上一样,只是配置上面有点区别. 二 ...
- JS中的this用法详解
随着对js的深入学习和使用,你会发现它里面包含了很多令人困惑的机制,比如对象.闭包.原型链继承等等,而这其中肯定包含令你现在或者曾经费解的this,如果你不把心一横,花点时间还真不明白这个this的用 ...
随机推荐
- sql server join联结
join学习起来有点乱,现做如下整理: table A id abc 1 a 2 b 3 c 4 d table B id abc 1 e 2 a 3 f 4 c --join或者inner join ...
- 哈希表(Hash table)
- GitLab: Deploy keys are not allowed to push code.
被这个问题坑了,大半天.写此博文,愿入坑的童鞋能及时托坑 一.当你第一次pull或者push gitlab远程项目的时候提示你一个该建立一个sshkey,此时你在客户端生成sshkey 二.切记要把这 ...
- 深入理解hive基础学习
Hive 是什么? 1.Hive 是基于 Hadoop处理结构化数据的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供类 SQL 查询功能. 2.Hive 利用 HDFS 存储数据 ...
- 02 Redis防止入侵
在使用云服务器时,安装的redis3.0+版本都关闭了protected-mode,因而都遭遇了挖矿病毒的攻击,使得服务器99%的占用率!! 因此我们在使用redis时候,最好更改默认端口,并且使用r ...
- 第三篇 HTML 表单及表格
表单及表格 表单,常用在登录.注册等地方,这也是一个最基本的. 我们就用登录,来学习什么是表单! 表单 form 标签,在某些好用的编辑工具,比如:WebStorm 你在上面写出form再按 ...
- Jenkins+GitHub 项目环境搭建(一)
安装Jenkins yum install -y java-1.8.0-openjdk wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkin ...
- PAT Basic 1018 锤子剪刀布 (20 分)
大家应该都会玩“锤子剪刀布”的游戏:两人同时给出手势,胜负规则如图所示: 现给出两人的交锋记录,请统计双方的胜.平.负次数,并且给出双方分别出什么手势的胜算最大. 输入格式: 输入第 1 行给出正整数 ...
- python之django_form组件笔记
Form字段 Field required=True, 是否允许为空 widget=None, HTML插件 label=None, 用于生成Label标签或显示内容 initial=None, 初始 ...
- Fatal Error: Out of memory php内存溢出处理三种方法
有时候我们在运行php程序的时候会发现 Fatal Error: Out of memory 这样的提示,这有可能是程序中用到了大量了变量和对象,导致分配的内存不够用. 修改php.ini文件里的me ...