JS过滤器(filter)的用法

JavaScript015

JS过滤器(filter)的用法,第1张

有时候我们想筛选出一个对象列表中符合某个属性特征的列表,这个时候我们就可以使用js中的filter功能了。

function(currentValue, index,arr)

①currentValue:必须。当前元素的值

②index:可选。当前元素的索引值

③arr:可选。当前元素属于的数组对象

借鉴自: https://www.cnblogs.com/yddzyy/p/13272110.html

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意: filter() 不会对空数组进行检测。

注意: filter() 不会改变原始数组。

| 参数 | 描述 |

| function(currentValue, index,arr) | 必须。函数,数组中的每个元素都会执行这个函数

函数参数:

| 参数 | 描述 |

| currentValue | 必须。当前元素的值 |

| index | 可选。当期元素的索引值 |

| arr | 可选。当期元素属于的数组对象 |

|

| thisValue | 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。

如果省略了 thisValue ,"this" 的值为 "undefined" |

首先回顾一下filter的作用:过滤数组中符合条件的元素

另外也可以用来过滤对象数组中符合条件的对象,eg:

|

目前比较常用的方法是使用ES6的set完成,eg:

结合map使用可以先过滤出符合条件的对象然后去除某些不需要的字段,比如:

简单讲filter就是一个数组过滤器,参数接收一个函数,数组的每一项经过函数过滤,返回一个符合过滤条件的新数组

函数接收三个参数:

查找当前页的url

Filter的基本原型( '|' 类似于Linux中的管道模式):

Filter可以被链式使用(即连续使用多个filter):

Filter也可以指定多个参数:

货币 默认是美元符号$,想要变成其他的如人民币¥

HTML:{{ currency_expression | currency:symbol:fractionSize}}

JS:$filter(“currency”)(amount,symbol,fractionSize)

date格式化

HTML:{{date_expression | date:format:timezone}}

JS:$filter(“date”)(date,format,timezone)

number格式化 如果输入是null或undefined,那么其将被返回。如果输入的是无穷(正无穷/负无穷),将会返回无穷大的符号“∞”。如果输入不是一个数字,返回一个空字符串。

HTML:{{number_expression | number:fractionSize}}

JS:$filter(“number”)(number,fractionSize)

filter过滤数组

HTML:{{filter_expression | filter:expression:comparator}}

JS:$filter(“filter”)(array,expression,comparator)

limitTo字符串 对象的截取创建一个只包含指定数目元素的数组或字符串。元素是按指定的值和符号(+或-)从数组、字符串或数字的开头或结尾获取的。如果输入一个数字,则转换为字符串。

HTML:{{limitTo_expression | limitTo:limit:begin}}

JS:$filter(“limitTo”)(input,limit,begin)

uppercase,lowercase大小转换

HTML:{{lowercase_expression | lowercase}}

JS:$filter(“lowercase”)(input)

json格式化

HTML:{{json_expression | json:spacing}}

JS:$filter(“json”)(object,spacing)

orderBy对象排序 通过判断表达式将指定的数组进行排序。它是按字符串的字母顺序和数值的数字排序的。

注意:如果你发现数字没有按预期排序,请确保它们实际上是被保存为数字而不是字符串。

HTML:{{orderBy_expression | orderBy:expression:reverse}}

JS:$filter(“orderBy”)(array,expression,reverse)

在filter.js中定义一个module

在app.js中加载这个module

在html中调用

参考资料:

推酷:angular中的filter用法详解

野兽:angularjs filter过滤器