• 前言

你还在通过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
}
}
function myfilter(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])
} }
return newArr
}
}
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()过滤方法的使用的更多相关文章

  1. js进阶 11-15 jquery过滤方法有哪些

    js进阶 11-15  jquery过滤方法有哪些 一.总结 一句话总结:jquery方法中的参数一般是什么:选择器.元素或 jQuery 对象. 1.jquery方法中的参数一般是什么? 选择器.元 ...

  2. js数组去重五种方法

    今天来聊一聊JS数组去重的一些方法,包括一些网上看到的和自己总结的,总共5种方法(ES5). 第一种:遍历数组法 这种方法最简单最直观,也最容易理解,代码如下: var arr = [2, 8, 5, ...

  3. js 数组常用的一些方法

    数组可以说是js经常会遇到的数据结构,以下我们对数组进行详细的学习! 一.数组的创建 var mycars = new Array(): || new Array(3);  || new Array( ...

  4. Js数组的常用的方法概述

    学习JS的同学们,也曾对数组进行学习掌握,所以我也把数组中常用的方法列举下来,相互学习 不多废话,直接上正文 .                 快乐的分割线... 一.对象继承的方法 数组是一种特殊 ...

  5. JS数组添加字典的方法

    var ary_RoleType = [];  //申明数组变量 for(var j = 0;j<treeData.length;j++){ if($.inArray(treeData[j].v ...

  6. js数组去重(多种方法)

    // js数组去重 Array.prototype.fun1 = function(){ var arr = this, result = [], i, len = arr.length; for(i ...

  7. js数组中的reverse()方法

    reverse方法是将数组中的元素的顺序进行反转,在原数组上操作,然后返回原数组.由于本人是学习js的新人,对reverse函数进行了几个小实验,以下实验均在Chrome浏览器上运行 实验一:reve ...

  8. 简单谈谈JS数组中的indexOf方法

    前言 相信说到 indexOf 大家并不陌生,判断字符串是否包涵子字符串时特别常用,正则不熟练同学的利器.这篇文章就最近遇到的一个问题,用实例再说说说indexOf方法.本文是小知识点积累,不作为深入 ...

  9. JS数组中的indexOf方法

    前言 这两天在家中帮朋友做项目,项目中使用了数组的indexOf 方法,找到了一篇文章,感觉非常不错,顺便整理下以防链接丢失. 相信说到 indexOf 大家并不陌生,判断字符串是否包涵子字符串时特别 ...

随机推荐

  1. 08vue绑定用户页面

    1.vue微博回调空页面 注:微博回调空页面为: http://127.0.0.1:8888/oauth/callback/ 1.1 页面路径 components\oauth.vue <tem ...

  2. C语言讲义——开发工具Dev C++

    20世纪60年代,编程语言界发生"结构化程序设计"变革, 丹尼斯·里奇(Dennis Ritchie)& 肯·汤普森(Ken Thompson)发明C语言,率先建立了面向过 ...

  3. CentOS下的IPMI尝试

    1.载入支持 ipmi 功能的系统模块 modprobe ipmi_msghandler modprobe ipmi_devintf modprobe ipmi_poweroff modprobe i ...

  4. C#中的WinForm问题——如何设置窗体的大小为超过屏幕显示的最大尺寸?

    今天在学习C#时遇到了一个问题,在此记录下来,留作日后总结复习之用,也分享给有同样问题和困扰的园友. 我手上的电脑是笔记本电脑,屏幕的尺寸大小为1366*768,然而项目所使用的屏幕大小为1920*1 ...

  5. CentOS 7下安装Docker

    安装一些必要的系统工具: sudo yum install -y yum-utils device-mapper-persistent-data lvm2 添加软件源信息: sudo yum-conf ...

  6. iptables SNAT 和DNAT的转化配置实验

    原文链接:http://www.jb51.net/LINUXjishu/402441.html DNAT(Destination Network Address Translation,目的地址转换) ...

  7. 记一次容器CPU高占用问题排查

    起因:发现docker中有两个容器的CPU持续在百分之95以上运行了一晚上 执行命令:docker stats 发现这个两个大兄弟一点没歇满负荷跑了一晚上,再这么下去怕不是要GG 容器里跑的是JAVA ...

  8. charles功能(三)弱网测试(模拟超慢网速,会导致接口数据返回超时的那种慢)

    模拟超慢网速(会导致接口数据返回超时的那种...) 设置带宽和延迟时间(毫秒) 注:可以根据下图中的翻译体会下导致网络延迟的原因: 然后打开网页回变得非常满

  9. PyQt(Python+Qt)学习随笔:Qt Designer中连接Action和槽函数

    在Designer中试了半天,终于找到了Action添加槽函数的方法,操作步骤: 在Designer右边界面中点击鼠标右键 确保信号/槽编辑被勾选,如图是未勾选的情况:. 勾选后会出现信号和槽的编辑界 ...

  10. selenium常用的标签

    1.selenium之 下拉选择框Select.反选框Deselect.options 我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框.后者我 ...