前言

你还在通过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()过滤方法的使用相关推荐

  1. js中数组filter过滤奇偶数_JS filter()方法:根据指定条件过滤数组元素

    JavaScript filter() 方法可以返回数组中满足指定条件的元素.具体用法如下: array.filter(callbackfn[, thisArg]); 参数说明: array:必需参数 ...

  2. js 中遇到英文双引号后端无法正常存储的解决方法

    js 中遇到英文双引号后端无法正常存储的解决方法 当在前端js输入框中要输入英文双引号的时候比如,"你好,北京",这个时候后端获取不到前端传输的数据.工作中遇到此文题思考很久,查资 ...

  3. concat合并的数组会有顺序么_JS数组 Array

    Array​developer.mozilla.org JS没有真正数组,数组实际上是一种特殊的对象 创建数组的方法: let arr = [1,2,3]; // let arr = new Arra ...

  4. concat合并的数组会有顺序么_JS 数组操作 记录 笔记

    Array数组的方法 Mutator方法----"突变方法"会改变数组自身的值:Accessor方法----"访问方法"不会改变数组自身的值:Iteration ...

  5. python数组和列表的区别_JS数组方法与python列表方法的比较

    JS的数组(Array)与python的列表(List)很相似,本人因为之前学过JS,后来学习python感觉有些方法很容易混淆,这里对常用的一些方法做些区分 增 删 改 查 排序 逆序 增加元素 1 ...

  6. JS中this的指向与改变this指向的三个方法

    目录 一.this指向的分类 1.全局函数的调用 2.对象中函数的调用 3.setTimeout与setInterval中的this 4.事件绑定中的this 5.箭头函数中的this 6.构造函数中 ...

  7. JS中使用正则表达式封装的一些常用的格式验证的方法-是否外部url、是否小写、邮箱格式、是否字符、是否数组

    场景 在vue页面中需要对一些变量或者属性进行判断等. 所以讲这些js方法抽离出来一个公共的验证的方法. 注: 博客: https://blog.csdn.net/badao_liumang_qizh ...

  8. js中如何把 json对象转换成 数组

    // var data2 = JSON.parse(data); // JSON.parse() 把 json字符串 转化成 json 对象 // var a = JSON.stringify(dat ...

  9. js中通过split函数分割字符串成数组

    <script language="javascript"> str="2,2,3,5,6,6"; //这是一字符串 var strs= new A ...

最新文章

  1. spring+springmvc+springboot 常用注解
  2. mysql缓存淘汰机制_Redis缓存总结:淘汰机制、缓存雪崩、数据不一致....
  3. python 将txt 表格转化为excel
  4. 网格机房机柜、机架内的空间规划及理线方法
  5. Binary Tree Non-recursive Traversal
  6. Callable接口
  7. protobuf在java应用中通过反射动态创建对象
  8. 猎豹浏览器小号窗口怎么打开 小号窗口打开方法简述
  9. java 多个ssl证书_java – 将多个SSL证书固定添加到Android KeyStore不起作用. (来自资源文件)...
  10. zebra(斑马)PDA扫码uniapp程序小demo
  11. Luogu3387【模板】缩点(Kosaraju)
  12. 编辑栏不见了_微信图文编辑器集合和使用技巧
  13. 趣图:各种程序员的键盘热力图
  14. 10.pyecharts柱状图-----班级各地区男女所占人数
  15. Git版本回退的两种方式_艾孜尔江撰
  16. C语言界杠把子的书籍,你读过几本?
  17. 使用Packet Tracer简单配置路由器
  18. Android校验应用签名是否被篡改
  19. Visual Studio工程没有生成lib文件,只生成了dll文件
  20. Python第三方库推荐:pyttsx3

热门文章

  1. 家用宽带搭建个人服务器(二)
  2. JS 对象直接量方法创建对象
  3. 如何做看到总服务器的文件,怎么看到服务器大内存文件夹
  4. 增益与功率电压的关系
  5. sbc,aac,aptx,ldac蓝牙编码简单介绍。
  6. 湘潭大学计算机组成原理试卷,湘潭大学 计算机组成与原理 控制器实验 实验报告...
  7. c语言错误L104,KEILC51编译问题ERROR L104
  8. SAP HANA XS CDS简介
  9. 2021鹏业安装算量软件常见问题整理(二十)
  10. 如何幽默的介绍php是撒,终于明白如何幽默介绍自己名字