• 前言

你还在通过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. python 几个循环的效率测试

    前言:对于我这种追求极致的人来说,效率很重要. 前面看到网上关于python循环的测评,到自己在项目中的应用,发现,并不是这么回事.所以,写下次博文,一次性了解这个问题. 语言版本:python3.6 ...

  2. 关于uniapp无法navigateTo跳转的解决办法

    今天在分包时突然无法跳转了,记个笔记 场景: 位于tabbar页面(主包)的子组件跳转到分包页面时,无法跳转 尝试办法: 使用uniapp原生跳转 uni.navigateTo({ url:'xxxx ...

  3. 【mq读书笔记】消息到达唤醒挂起线程检查新消息

    DefaultMessageStore#start 当新消息到达CommitLog是,ReputMessageService线程负责将消息转发给ConsumeQueue,IndexFile,如果Bro ...

  4. 装饰模式(Decorator Pattern)

    代理模式:动态地给一个对象添加一些额外的职责,它比生成子类方式更为灵活. 优点:在某些时候装饰模式比继承(inheritance)要更加灵活 装饰模式的组成 (1)抽象组件:定义一个抽象接口,来规范准 ...

  5. Spring Boot 2.4发布了,但Spring Cloud用户不推荐着急升级

    前段时间Spring Boot发布了本年度最后一个重要更新版本:Spring Boot 2.4.0. 最近在社群里也开始有讨论关于Spring Boot 2.4的一些使用问题.我发现有很多Spring ...

  6. DBeaver连接达梦|虚谷|人大金仓等国产数据库

    前言 工作中有些项目可能会接触到「达梦.虚谷.人大金仓」等国产数据库,但通常这些数据库自带的连接工具使用并不方便,所以这篇文章记录一下 DBeaver 连接国产数据库的通用模版,下文以达梦为例(其他国 ...

  7. 【2020.11.28提高组模拟】T1染色(color)

    [2020.11.28提高组模拟]T1染色(color) 题目 题目描述 给定 \(n\),你现在需要给整数 \(1\) 到 \(n\) 进行染色,使得对于所有的 \(1\leq i<j\leq ...

  8. jquery on 动态生成绑定事件

    $(document).on("mouseenter", ".v6-div-kind-ok", function () { alert();});

  9. python核心高级学习总结6------面向对象进阶之元类

    元类引入 在多数语言中,类就是一组用来描述如何生成对象的代码段,在python中同样如此,但是在python中把类也称为类对象,是的,你没听错,在这里你只要使用class关键字定义了类,其解释器在执行 ...

  10. Python模块学习遇到的问题

    Python使用import导入模块时报ValueError: source code string cannot contain null bytes的解决方案 Python使用import导入模块 ...