js中数组filter过滤奇偶数_js--数组的filter()过滤方法的使用
前言
你还在通过for循环遍历数组吗?你还在遍历之后一项一项的通过if判断过滤你需要的数据吗?你还在写着一大堆代码实现一个简单的过滤数据功能吗?那么,今天他来了。他就是这里要介绍的es6中数组filter()过滤方法的使用,理解比较浅显,希望在工作和学习中遇到的时候方便查找。
正文
语法及定义
定义:filter()方法:创建一个包含通过测试的数组元素的新数组。
上面这句话有几个需要注意的地方,首先,操作对象是数组,还要注意filter()方法针对的是非空数组的检测过滤,其次是创建新数组,也就是说filter()方法会产生新数组,同时不会改变原数组,最后新数组中的元素是通过测试的原数组的元素,也就是说要有测试规则,定义测试规则会想到map()方法也是这样,就是给filter()传入一个回调函数而已吗。说白了就是,针对非空数组中的每一项,判断一个是否通过测试规则,通过的话就添加到新数组中。
根据上面的理解,先用自己的方法模仿下造个轮子呗!这里测试规则为大于5的数
//定义原始数组
var arr=[1,2,3,5,6,7]//定义过滤规则
var rules=function(a){if(a>5){return true}else{return false}
}functionmyfilter(array,rules) {if (array.length===0) {//判断传入的原数组不能为空
console.log("原数组不能为空")
}else{
let newArr=[]for (let index = 0; index < array.length; index++) {if(rules(arr[index])){
newArr.push(arr[index])
}
}returnnewArr
}
}var myarr=myfilter(arr,rules)
console.log(myarr)//输出[6,7]
语法:array.filter(function(currentValue,index,arr),thisValue)
参数一:一个回调函数,和map方法的回调函数一样,改回调有三个参数,第一个当前元素的值,必填参数,后面两个根据实际选填,分别代表当前袁术在原数组中对应的索引和原始数组 。
参数二:可选,对象作为该执行回调时使用,传递给函数,用作this的值,如果省略了thisValue,this的值变为undefined
使用
1.学会了filter()的使用,就可以直接使用es6中的轮子了,首先实现过滤出数组中大于5的数
var arr=[1,2,3,,5,6,7]var myarr=arr.filter(v=>v>5)
console.log(myarr);//输出[6,7]
2.通过filter判断数组中是否存在某个值
var arr=[1,2,3,,5,6,7]
console.log(arr.filter(v=>v==5).length==0?"不存在":"存在")//输出存在
3.去掉空数组空字符串、undefined、null
var arr=["",undefined,null,1,2,3]var myarr=arr.filter(v=>v)
console.log(myarr)//输出[1,2,3]
4.数组去重
var arr = [1, 2, 2, 3, 4, 5, 5,6,,7];var myarr = arr.filter((item, index,self)=>self.indexOf(item)===index)
console.log(myarr);//[1,2,3,4,5,6,7]
其他用法,比如实际开发中需要过滤掉返回list中某一项下面多个属性按条件的筛选等等。。总之,filter的用法很多,关键在于工作学习中遇到的场景中如何去使用操作。
以上就是本文的全部内容,希望给读者带来些许的帮助和进步,方便的话点个关注,小白的成长之路会持续更新一些工作中常见的问题和技术点。
js中数组filter过滤奇偶数_js--数组的filter()过滤方法的使用相关推荐
- js中数组filter过滤奇偶数_JS filter()方法:根据指定条件过滤数组元素
JavaScript filter() 方法可以返回数组中满足指定条件的元素.具体用法如下: array.filter(callbackfn[, thisArg]); 参数说明: array:必需参数 ...
- js 中遇到英文双引号后端无法正常存储的解决方法
js 中遇到英文双引号后端无法正常存储的解决方法 当在前端js输入框中要输入英文双引号的时候比如,"你好,北京",这个时候后端获取不到前端传输的数据.工作中遇到此文题思考很久,查资 ...
- concat合并的数组会有顺序么_JS数组 Array
Arraydeveloper.mozilla.org JS没有真正数组,数组实际上是一种特殊的对象 创建数组的方法: let arr = [1,2,3]; // let arr = new Arra ...
- concat合并的数组会有顺序么_JS 数组操作 记录 笔记
Array数组的方法 Mutator方法----"突变方法"会改变数组自身的值:Accessor方法----"访问方法"不会改变数组自身的值:Iteration ...
- python数组和列表的区别_JS数组方法与python列表方法的比较
JS的数组(Array)与python的列表(List)很相似,本人因为之前学过JS,后来学习python感觉有些方法很容易混淆,这里对常用的一些方法做些区分 增 删 改 查 排序 逆序 增加元素 1 ...
- JS中this的指向与改变this指向的三个方法
目录 一.this指向的分类 1.全局函数的调用 2.对象中函数的调用 3.setTimeout与setInterval中的this 4.事件绑定中的this 5.箭头函数中的this 6.构造函数中 ...
- JS中使用正则表达式封装的一些常用的格式验证的方法-是否外部url、是否小写、邮箱格式、是否字符、是否数组
场景 在vue页面中需要对一些变量或者属性进行判断等. 所以讲这些js方法抽离出来一个公共的验证的方法. 注: 博客: https://blog.csdn.net/badao_liumang_qizh ...
- js中如何把 json对象转换成 数组
// var data2 = JSON.parse(data); // JSON.parse() 把 json字符串 转化成 json 对象 // var a = JSON.stringify(dat ...
- js中通过split函数分割字符串成数组
<script language="javascript"> str="2,2,3,5,6,6"; //这是一字符串 var strs= new A ...
最新文章
- spring+springmvc+springboot 常用注解
- mysql缓存淘汰机制_Redis缓存总结:淘汰机制、缓存雪崩、数据不一致....
- python 将txt 表格转化为excel
- 网格机房机柜、机架内的空间规划及理线方法
- Binary Tree Non-recursive Traversal
- Callable接口
- protobuf在java应用中通过反射动态创建对象
- 猎豹浏览器小号窗口怎么打开 小号窗口打开方法简述
- java 多个ssl证书_java – 将多个SSL证书固定添加到Android KeyStore不起作用. (来自资源文件)...
- zebra(斑马)PDA扫码uniapp程序小demo
- Luogu3387【模板】缩点(Kosaraju)
- 编辑栏不见了_微信图文编辑器集合和使用技巧
- 趣图:各种程序员的键盘热力图
- 10.pyecharts柱状图-----班级各地区男女所占人数
- Git版本回退的两种方式_艾孜尔江撰
- C语言界杠把子的书籍,你读过几本?
- 使用Packet Tracer简单配置路由器
- Android校验应用签名是否被篡改
- Visual Studio工程没有生成lib文件,只生成了dll文件
- Python第三方库推荐:pyttsx3
热门文章
- 家用宽带搭建个人服务器(二)
- JS 对象直接量方法创建对象
- 如何做看到总服务器的文件,怎么看到服务器大内存文件夹
- 增益与功率电压的关系
- sbc,aac,aptx,ldac蓝牙编码简单介绍。
- 湘潭大学计算机组成原理试卷,湘潭大学 计算机组成与原理 控制器实验 实验报告...
- c语言错误L104,KEILC51编译问题ERROR L104
- SAP HANA XS CDS简介
- 2021鹏业安装算量软件常见问题整理(二十)
- 如何幽默的介绍php是撒,终于明白如何幽默介绍自己名字