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 相关文章推荐
用javascript做拖动布局的思路
May 31 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
详解Vue.use自定义自己的全局组件
Jun 14 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
jquery实现选项卡切换代码实例
May 14 jQuery
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
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
Java中final关键字详解
2015/08/10 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
javascript 面向对象的JavaScript类
2010/05/04 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python字典序问题实例
2014/09/26 Python
python获取本地计算机名字的方法
2015/04/29 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
本科毕业生的求职信范文
2013/11/20 职场文书
个人融资协议书
2014/10/02 职场文书
2015年人事科工作总结
2015/04/28 职场文书
纪检监察立案决定书
2015/06/24 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
go语言中http超时引发的事故解决
2021/06/02 Golang
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers