【JS学习】数组过滤方法的使用filter
前言:本博客系列为学习后盾人js教程过程中的记录与产出,如果对你有帮助,欢迎关注,点赞,分享。不足之处也欢迎指正,作者会积极思考与改正。
使用效果:
可以返回参数函数为真的值
//情景:实现从stu数组里面提取js成绩大于60的项
let stu=[
{name:"张三",js:90},
{name:"李四",js:50},
{name:"王五",js:60},
];//定义数组
let newarr=stu.filter(function(item,index,arr0){//调用filter方法,传入函数,若函数返回值为真,则返回该项
// console.log(index);
return item.js>60;//当每项元素的元素的js成绩大于60时返回真
});
console.table(newarr);

参数说明:
参数名称不重要,重要的是第几个参数
| 参数 | 作用 |
|---|---|
| function | 执行方法,函数返回真的项会被收集 |
| 第一参数item | 指被调用函数stu的遍历中的当前项{name:"张三",js:90} |
| 第二参数index | 指被调用函数stu的遍历中的当前项的索引值0,1,2 |
| 第三参数arr | 指被调用函数stu |
方法原理解析:
//filter的实现原理
let stu=[
{name:"张三",js:90},
{name:"李四",js:50},
{name:"王五",js:60},
];
function filter1(arr,callback){//arr为数组,callback为函数
let newArr=[];
for(const value of arr){//遍历数组
if(callback(value)===true){//将每个值放入回调函数,返回真执行
newArr.push(value);//将值加入数组
}
}
return newArr;//返回结果
}
console.log(filter1(stu,function(value){
return value.js>60;
}));

尾记:
有任何问题,欢迎私聊哟~~~
也可关注公众号“诗与凉风”联系作者哦~~

【JS学习】数组过滤方法的使用filter的更多相关文章
- JS实现数组去重方法大总结
js数组根据对象中的元素去重: var arr2 = [ { name: "name1", num: "1" }, { name: "name2&qu ...
- JavaScript -- 时光流逝(二):js中数组的方法
JavaScript -- 知识点回顾篇(二):js中数组的方法 1. 数组 (1)定义数组,数组赋值 <script type="text/javascript"> ...
- js中数组去重方法及性能对比
js中数组的 数组去重 常用的数组去重方法以及效率分析: 首先我们先构建一个数组,主要是用于进行去重实验,我们主要实验的量级为1000,10000,100000,500000.具体的生成数组的方法如下 ...
- es6 filter() 数组过滤方法总结
1.创建一个数组,判断数组中是否存在某个值 var newarr = [ { num: , val: 'ceshi', flag: 'aa' }, { num: , val: 'ceshi2', fl ...
- es6 filter() 数组过滤方法总结(转载)
1.创建一个数组,判断数组中是否存在某个值 var newarr = [ { num: 1, val: 'ceshi', flag: 'aa' }, { num: 2, val: 'ceshi2', ...
- JS实现数组去重方法整理
前言 我们先来看下面的例子,当然来源与网络,地址<删除数组中多个不连续的数组元素的正确姿势> 我们现在将数组中所有的‘ a’ 元素删除: var arr = ['a', 'a', 'b', ...
- JS实现数组去重方法总结(六种方法)
方法一: 双层循环,外层循环元素,内层循环时比较值 如果有相同的值则跳过,不相同则push进数组 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Array. ...
- Jsの练习-数组其他常用方法 -map() ,filter() ,every() ,some()
map() :映射,对数组中的每一项运行给定函数,返回每次函数调用结果组成的函数. <!DOCTYPE html> <html lang="en"> < ...
- JS中数组的方法
1. join() Array.join() 是 String.split() 的逆向操作 var arr = [1, 2, 3] arr.join()// "1,2,3" arr ...
随机推荐
- logstash导入DNS解析数据到es中,中间有filebeat
这个过程中,主要用logstash处理数据的时候不好处理. 在logstash-sample.conf这个配置文件中的配置,我用这个监控filebeat的5044端口 # Sample Logstas ...
- Jmeter(6)命令行执行
Jmeter执行方式有2种:GUI和非GUI模式 GUI:在Windows电脑上运行,图形化界面,可直接查看测试结果,但是消耗压力机资源较高 非GUI:通过命令行执行,无图形化界面,不方便查看测试结果 ...
- 在Nuxt中使用react-id-swiper封装公共的轮播图组件(移动端
首先就是引入swiper import Swiper from 'react-id-swiper': 一个轮播图首先要考虑到一种情况就是当只有一张图的时候是不是需要按轮播图来处理 一般情况下,一张图是 ...
- Oracle 要慌了!华为终于开源了自家的 Huawei JDK——毕昇 JDK!
没错,自阿里.腾讯之后,华为也终于开源了自家的 JDK--毕昇 JDK! 免费!免费!免费!!! Oracle 要慌了? 毕昇 JDK 毕昇 JDK 是华为内部 OpenJDK 定制版 Huawei ...
- SpringBoot集成Swagger2并配置多个包路径扫描
1. 简介 随着现在主流的前后端分离模式开发越来越成熟,接口文档的编写和规范是一件非常重要的事.简单的项目来说,对应的controller在一个包路径下,因此在Swagger配置参数时只需要配置一 ...
- monkey在指定的activity里面运行
下载包地址:链接: https://pan.baidu.com/s/1Wk2eOj3saZx71Mx6pT2L4Q 提取码: gupa 运行方式:步骤1: 将工具下载下来放到本地目录下,解压步骤2:配 ...
- tp5使用PHPWord(下载引入/composer两种方式)
PHPWORD使用文档 一:引入 tp5.0,tp5.1: 1:composer方式(推荐) a:根目录下执行:composer require phpoffice/phpword b:引入: use ...
- Unity GameObject
GameObject 游戏对象 GameObject是unity所有实体的基类 gameObject 获取当前脚本所挂载的游戏对象 一般来说,在属性视图中能看到或修改的属性,我们同样可以在脚本中获取并 ...
- 初始化CentOS7
安装CentOS7 配置网络 # 修改网络配置 vi /etc/sysconfig/network-scripts/ifcfg-ens33 TYPE="Ethernet" PROX ...
- 牛客挑战赛46 B
题目链接: 最小的指数 乍一看还以为是Pollard_rho算法,其实大可不必. 发现\(1<= n <= 1e18\),我们可以将n分为两部分(分块思想降低时间复杂度). 剔除小于等于\ ...