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
}
}
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()过滤方法的使用的更多相关文章
- js进阶 11-15 jquery过滤方法有哪些
js进阶 11-15 jquery过滤方法有哪些 一.总结 一句话总结:jquery方法中的参数一般是什么:选择器.元素或 jQuery 对象. 1.jquery方法中的参数一般是什么? 选择器.元 ...
- js数组去重五种方法
今天来聊一聊JS数组去重的一些方法,包括一些网上看到的和自己总结的,总共5种方法(ES5). 第一种:遍历数组法 这种方法最简单最直观,也最容易理解,代码如下: var arr = [2, 8, 5, ...
- js 数组常用的一些方法
数组可以说是js经常会遇到的数据结构,以下我们对数组进行详细的学习! 一.数组的创建 var mycars = new Array(): || new Array(3); || new Array( ...
- Js数组的常用的方法概述
学习JS的同学们,也曾对数组进行学习掌握,所以我也把数组中常用的方法列举下来,相互学习 不多废话,直接上正文 . 快乐的分割线... 一.对象继承的方法 数组是一种特殊 ...
- JS数组添加字典的方法
var ary_RoleType = []; //申明数组变量 for(var j = 0;j<treeData.length;j++){ if($.inArray(treeData[j].v ...
- js数组去重(多种方法)
// js数组去重 Array.prototype.fun1 = function(){ var arr = this, result = [], i, len = arr.length; for(i ...
- js数组中的reverse()方法
reverse方法是将数组中的元素的顺序进行反转,在原数组上操作,然后返回原数组.由于本人是学习js的新人,对reverse函数进行了几个小实验,以下实验均在Chrome浏览器上运行 实验一:reve ...
- 简单谈谈JS数组中的indexOf方法
前言 相信说到 indexOf 大家并不陌生,判断字符串是否包涵子字符串时特别常用,正则不熟练同学的利器.这篇文章就最近遇到的一个问题,用实例再说说说indexOf方法.本文是小知识点积累,不作为深入 ...
- JS数组中的indexOf方法
前言 这两天在家中帮朋友做项目,项目中使用了数组的indexOf 方法,找到了一篇文章,感觉非常不错,顺便整理下以防链接丢失. 相信说到 indexOf 大家并不陌生,判断字符串是否包涵子字符串时特别 ...
随机推荐
- python 几个循环的效率测试
前言:对于我这种追求极致的人来说,效率很重要. 前面看到网上关于python循环的测评,到自己在项目中的应用,发现,并不是这么回事.所以,写下次博文,一次性了解这个问题. 语言版本:python3.6 ...
- 关于uniapp无法navigateTo跳转的解决办法
今天在分包时突然无法跳转了,记个笔记 场景: 位于tabbar页面(主包)的子组件跳转到分包页面时,无法跳转 尝试办法: 使用uniapp原生跳转 uni.navigateTo({ url:'xxxx ...
- 【mq读书笔记】消息到达唤醒挂起线程检查新消息
DefaultMessageStore#start 当新消息到达CommitLog是,ReputMessageService线程负责将消息转发给ConsumeQueue,IndexFile,如果Bro ...
- 装饰模式(Decorator Pattern)
代理模式:动态地给一个对象添加一些额外的职责,它比生成子类方式更为灵活. 优点:在某些时候装饰模式比继承(inheritance)要更加灵活 装饰模式的组成 (1)抽象组件:定义一个抽象接口,来规范准 ...
- Spring Boot 2.4发布了,但Spring Cloud用户不推荐着急升级
前段时间Spring Boot发布了本年度最后一个重要更新版本:Spring Boot 2.4.0. 最近在社群里也开始有讨论关于Spring Boot 2.4的一些使用问题.我发现有很多Spring ...
- DBeaver连接达梦|虚谷|人大金仓等国产数据库
前言 工作中有些项目可能会接触到「达梦.虚谷.人大金仓」等国产数据库,但通常这些数据库自带的连接工具使用并不方便,所以这篇文章记录一下 DBeaver 连接国产数据库的通用模版,下文以达梦为例(其他国 ...
- 【2020.11.28提高组模拟】T1染色(color)
[2020.11.28提高组模拟]T1染色(color) 题目 题目描述 给定 \(n\),你现在需要给整数 \(1\) 到 \(n\) 进行染色,使得对于所有的 \(1\leq i<j\leq ...
- jquery on 动态生成绑定事件
$(document).on("mouseenter", ".v6-div-kind-ok", function () { alert();});
- python核心高级学习总结6------面向对象进阶之元类
元类引入 在多数语言中,类就是一组用来描述如何生成对象的代码段,在python中同样如此,但是在python中把类也称为类对象,是的,你没听错,在这里你只要使用class关键字定义了类,其解释器在执行 ...
- Python模块学习遇到的问题
Python使用import导入模块时报ValueError: source code string cannot contain null bytes的解决方案 Python使用import导入模块 ...