JavaScript中filter的用法实例分析


Posted in Javascript onFebruary 27, 2019

本文实例讲述了JavaScript中filter的用法。分享给大家供大家参考,具体如下:

filter

filter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素。

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以下的版本没有trim()方法
});
r; // ['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的重复元素:

'use strict';
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());

运行结果:

apple,strawberry,banana,pear,orange

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

尝试用filter()筛选出素数:

'use strict';
function get_primes(arr) {
  var i;
  return arr.filter(function (element) {
      var flag=true;
      if(element<2){
      flag=false;
    }else {
      for(var i=2;i<element;i++){
        if (element%i==0){
          flag=false;
          break;
        }
      }
    }
    return flag;
  });
}
// 测试:
var
  x,
  r,
  arr = [];
for (x = 1; x < 100; x++) {
  arr.push(x);
}
r = get_primes(arr);
if (r.toString() === [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97].toString()) {
  console.log('测试通过!');
} else {
  console.log('测试失败: ' + r.toString());
}

运行结果:

测试通过!

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

Javascript 相关文章推荐
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
基于JavaScript实现数码时钟效果
Mar 30 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
JS实现深度优先搜索求解两点间最短路径
Jan 17 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
解决Layui数据表格的宽高问题
Sep 28 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 #jQuery
简单了解node npm cnpm的具体使用方法
Feb 27 #Javascript
js中对象与对象创建方法的各种方法
Feb 27 #Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 #Javascript
react的滑动图片验证码组件的示例代码
Feb 27 #Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 #jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 #jQuery
You might like
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
python最长回文串算法
2018/06/04 Python
理工大学毕业生自荐信
2013/11/01 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
2015年售票员工作总结
2015/04/29 职场文书
信息技术国培研修日志
2015/11/13 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
聊聊redis-dump工具安装问题
2022/01/18 Redis