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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
openlayers实现地图弹窗
Sep 25 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将html转成wml的WAP标记语言实例
2015/07/08 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
Python 抓取动态网页内容方案详解
2014/12/25 Python
python处理图片之PIL模块简单使用方法
2015/05/11 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
应付会计岗位职责
2013/12/12 职场文书
开办化妆品公司创业计划书
2013/12/26 职场文书
创业计划书的主要内容有哪些
2014/01/29 职场文书
《口技》教学反思
2014/02/21 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
买房协议书范本
2014/10/23 职场文书
期中考试复习计划
2015/01/19 职场文书
消防验收申请报告
2015/05/15 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android