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 相关文章推荐
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
vue-prop父组件向子组件进行传值的方法
Mar 01 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
js里面的变量范围分享
Jul 18 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 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使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
详解 Python 与文件对象共事的实例
2017/09/11 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
电子信息专业学生自荐信
2013/11/09 职场文书
工程力学硕士生的自我评价范文
2013/11/16 职场文书
建筑个人求职信范文
2014/01/25 职场文书
导师评语大全
2014/04/26 职场文书
2014年团支部工作总结
2014/11/17 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
刘公岛导游词
2015/02/05 职场文书
个人先进事迹总结
2015/02/26 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书