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

map()类似,Arrayfilter()也接收一个函数。和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。

(1)筛选过滤,保留偶数

例如,在一个Array中,删掉奇数,只保留偶数,可以这么写:

    <script type="text/javascript">
var arr = [0,1,2,3,4,5,1,4,0];
var arr_filter = arr.filter(function(x){
return x%2 == 0;/* 筛选偶数 */
})
console.log(arr_filter)
</script>

(2)筛选去除空格

筛选去除空格

    <script type="text/javascript">
var arr = ['0',1,2,3,4,"",5,1,4,'0',""];
var arr_filter = arr.filter(function(x){
return x;/* 筛选空格 */
})
console.log(arr_filter)
</script>

(3)回调函数

  filter()接收的回调函数,其实可以有多个参数。通常仅使用第一个参数,表示Array的某个元素。回调函数还可以接收另外两个参数,表示元素的位置和数组本身:

        var arr = ['A','B','C','d'];
var arr_filter = arr.filter(function(element,index,self){
console.log(element);/* 依次打印'A','B','C','d' */
console.log(index);/* 依次打印0,1,2,3 */
console.log(self);/* 打印数组本身即arr */
return true;
})

利用filter,可以巧妙地去除Array的重复元素:

        var arr_repeat = ['A','B','A','B','B','C','A','D'];
var arr_filter = arr_repeat.filter(function(element,index,self){
return self.indexOf(element) == index;
})
console.log(arr_filter);//返回['A','B','C','D']

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

.

JS的filter用法的更多相关文章

  1. python3 filter用法(举例求0~n之间的素数)

    在用python3求0~n之间的素数时,关于filter用法的有点模糊,于是上网查了一下filter用法. 求0~n之间素数的脚本prime.py: def f(x): plist = [0,0] + ...

  2. js事件监听器用法实例详解

    这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分 ...

  3. Ext.Net学习笔记12:Ext.Net GridPanel Filter用法

    Ext.Net学习笔记12:Ext.Net GridPanel Filter用法 Ext.Net GridPanel的用法在上一篇中已经介绍过,这篇笔记讲介绍Filter的用法. Filter是用来过 ...

  4. js事件监听器用法实例详解-注册与注销监听封装

    本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分析如下: 1.当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事 ...

  5. JS数组filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()实例

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

  6. JS的简单用法

    JS的简单用法 参考:http://www.w3school.com.cn/js/js_switch.asp JavaScript 是网络的脚本语言 JavaScript 是可插入 HTML 页面的编 ...

  7. js 的filter()方法

    filter()方法使用指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组. filter()基本语法: arr.filter(callback[, thisArg]) filter() ...

  8. Django 资源 与 知识 Django中自建脚本并使用Django环境 model中的save()方法说明 filter()用法

    Django 资源 与 知识 Django中自建脚本并使用Django环境 model中的save()方法说明 filter()用法 2018/11/06 Chenxin 资料说明 Django基础入 ...

  9. JS和jQuery用法区别

    目录 JS和jQuery用法区别 外观区别 查找元素 操作标签 操作内容 操作属性 操作位置 操作样式 事件 JS和jQuery用法区别 外观区别 jQuery与JS最直观的区别就是外观上jQuery ...

随机推荐

  1. B. Error Correct System (CF Round #296 (Div. 2))

    B. Error Correct System time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  2. 【bzoj1798】[Ahoi2009]Seq 维护序列seq

    大意:一个数组,三个操作,第一种是区间[a,b]每个数乘乘,第二种是区间[a,b]每个数加c,第三种是查询[a,b]区间的和并对p取摸. 两种操作就不能简单的只往下传标记.每次传乘法标记时,要把加法标 ...

  3. 什么是sibling and tail recursive calls

    1 tail call 在函数f中调用函数b,如果这个调用是函数f中执行的最后一条指令,那么这个调用就称为tail call. 例子: int foo(float a, float b) { ... ...

  4. tf.float32 implicity

    简介  |  TensorFlow https://tensorflow.google.cn/programmers_guide/low_level_intro 我们来构建一个简单的计算图.最基本的指 ...

  5. 关于The hierarchy of the type TestBeforeAdvice is inconsistent的问题

    今天准备写一个spring aop的demo,创建了TestBeforeAdvice类,该类实现了MethodBeforeAdvice接口,eclipse报了"The hierarchy o ...

  6. python安装了2.7之后终端无法使用退格,上下左右

    遇到RT问题,原因是由于在编译python的时候去烧readline库造成的 解决办法: yum install readline-devel 然后重新编译安装python,终端控制符可用!

  7. Codeforces Round #363 (Div. 2)E. LRU

    E. LRU time limit per test 2 seconds memory limit per test 256 megabytes input standard input output ...

  8. win7(windows 7)系统下安装SQL2005(SQL Server 2005)图文教程( Win7 SQL Server2005 安装教程)

    win7(windows 7)系统下安装SQL2005(SQL Server 2005)图文教程 由于工作需要,今天要在电脑上安装SQL Server 2005.以往的项目都是使用Oracle,MS的 ...

  9. Vue.js 项目接口管理

    在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 本文使用vue-cli生成的项目举例. 第一步.在src目录下新建一个文件夹http,在http目录下建 ...

  10. E20171106-hm

    pulldown   adj. 折叠式的; pulldown menu 下拉菜单