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 面向对象 继承
May 13 Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 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操作csv文件代码实例汇总
2014/09/22 PHP
php实现的用户查询类实例
2015/06/18 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
Python基础学习之常见的内建函数整理
2017/09/06 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
python 日期操作类代码
2018/05/05 Python
python实现自主查询实时天气
2018/06/22 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
校长岗位职责
2013/11/26 职场文书
中秋寄语大全
2014/04/11 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
2016中秋节广告语
2016/01/28 职场文书
ant design charts 获取后端接口数据展示
2022/05/25 Javascript