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继承(上)——对象构建介绍
Nov 08 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
node.js中的Socket.IO使用实例
Nov 04 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 Javascript
ionic3双击返回退出应用的方法
Sep 17 Javascript
vue点击当前路由高亮小案例
Sep 26 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
PHPlet在Windows下的安装
2006/10/09 PHP
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
ThinkPHP中I(),U(),$this->post()等函数用法
2014/11/22 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
Jquery中删除元素的实现代码
2011/12/29 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
使用SAE部署Python运行环境的教程
2015/05/05 Python
python网络编程之数据传输UDP实例分析
2015/05/20 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
python实现kMeans算法
2017/12/21 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
Python WSGI的深入理解
2018/08/01 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
深入浅析Python代码规范性检测
2020/07/31 Python
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
机械工程师的岗位职责
2013/11/17 职场文书
临床护士自荐信
2014/01/31 职场文书
销售经理岗位职责
2014/03/16 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
财产分割协议书范本
2014/11/03 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
二婚主持词
2015/06/30 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript