Javascript中关于Array.filter()的妙用详解


Posted in Javascript onDecember 04, 2016

前言

和map类似,Array的filter也接收一个函数。但是和map不同的是, filter把传入的函数依次作用于每个元素,然后根据返回值是 true 还是false决定保留还是丢弃该元素。

实例介绍

例如,在一个Array中,删掉偶数,只保留奇数,可以这么写:

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
 return x % 2 !== 0;
});
r; // [1, 5, 9, 15]

把一个Array中的空字符串删掉,可以这么写:

var arr = ['A', '', 'B', null, undefined, 'C', ' '];
var r = arr.filter(function (s) {
 return s && s.trim(); // 注:IE9(不包含IE9)以下的版本没有trim()方法
});
arr; // ['A', 'B', 'C']

可见用 filter 这个高阶函数,关键在于正确实现一个“筛选”函数。

回调函数

filter 接收的回调函数,其实可以有多个参数。通常我们仅使用第一个参数,表示Array的某个元素。回调函数还可以接收另外两个参数,表示元素的位置和数组本身:

var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
 console.log(element); // 依次打印'A', 'B', 'C'
 console.log(index); // 依次打印0, 1, 2
 console.log(self); // self就是变量arr
 return true;
});

利用 filter ,可以巧妙地去除Array的重复元素:

var r,
 arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];

r = arr.filter(function (element, index, self) {
 return self.indexOf(element) === index;
});

console.log(r.toString());

去除重复元素依靠的是 indexOf 总是返回第一个元素的位置,后续的重复元素位置与 indexOf 返回的位置不相等,因此被 filter 滤掉了。

总结

以上就是关于Javascript中Array.filter()妙用的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
javascript框架设计之框架分类及主要功能
Jun 23 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
详解微信小程序中组件通讯
Oct 30 Javascript
JavaScript创建表格的方法
Apr 13 Javascript
Vue项目移动端滚动穿透问题的实现
May 19 Javascript
js编写简易的计算器
Jul 29 Javascript
JavaScript 中对象的深拷贝
Dec 04 #Javascript
详解JavaScript模块化开发
Dec 04 #Javascript
javascript 定时器工作原理分析
Dec 03 #Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 #Javascript
简单理解Vue条件渲染
Dec 03 #Javascript
学习vue.js条件渲染
Dec 03 #Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 #Javascript
You might like
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
一个tab标签切换效果代码
2009/03/27 Javascript
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
深入探究node之Transform
2017/07/20 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
vue实现条件判断动态绑定样式的方法
2018/09/29 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
容易被忽略的Python内置类型
2020/09/03 Python
Python通过format函数格式化显示值
2020/10/17 Python
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
年度考核自我鉴定
2014/02/02 职场文书
医德医风演讲稿
2014/05/20 职场文书
党员评议个人总结
2014/10/20 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
班级班风口号大全
2015/12/25 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书
Python实现天气查询软件
2021/06/07 Python
千万级用户系统SQL调优实战分享
2022/03/03 MySQL
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL