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 Base类 包含基本的方法
Jul 22 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
Dec 27 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
JS常见算法详解
Feb 28 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
微信小程序实现列表左右滑动
Nov 19 Javascript
JavaScript实现贪吃蛇游戏
Jun 16 Javascript
JS实现简单的九宫格抽奖
Jun 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
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
python访问sqlserver示例
2014/02/10 Python
实例讲解Python中的私有属性
2014/08/21 Python
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
酒店节能降耗方案
2014/05/08 职场文书
创先争优演讲稿
2014/09/15 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
Python实现8种常用抽样方法
2021/06/27 Python
Python图片验证码降噪和8邻域降噪
2021/08/30 Python
css3新特性的应用示例分析
2022/03/16 HTML / CSS