js中数组的filter过滤器的理解

定义和用法

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

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

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

语法

array.filter(function(currentValue,index,arr), thisValue)

参数说明

参数描述
function(currentValue, index,arr)必须。函数,数组中的每个元素都会执行这个函数
函数参数:
参数描述
currentValue必须。当前元素的值
index可选。当前元素的索引值
arr可选。当前元素属于的数组对象
thisValue可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。
如果省略了 thisValue ,"this" 的值为 "undefined"

实例

返回数组中所有年龄大于18的元素集合

        let sunArr = [{
            id: '1',
            name: 'lee',
            age: '20'
        }, {
            id: '2',
            name: 'sun6sian',
            age: '24'
        }]
        newArr = sunArr.filter((item, index, arr) => item.age > 18)

 结果是

  • 4
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue,可以使用`filter`过滤数组。可以将一个函数传递给`filter`方法,该函数将应用于数组的每个元素,通过该函数返回`true`或`false`的元素将被过滤出来。 例如,假设我们有一个数组`books`,我们要过滤出所有价格低于50元的图书,可以使用以下代码: ```javascript var books = [ { title: 'JavaScript高级程序设计', price: 99 }, { title: 'Vue.js实战', price: 59 }, { title: 'CSS权威指南', price: 89 }, { title: 'HTML5权威指南', price: 49 }, ]; var cheapBooks = books.filter(function(book) { return book.price < 50; }); console.log(cheapBooks); // Output: [{ title: 'HTML5权威指南', price: 49 }] ``` 在上面的代码,我们传递了一个函数作为`filter`的第一个参数。该函数接收一个`book`参数,表示数组的每个元素。如果`book.price`小于50,则返回`true`,否则返回`false`。最终,我们得到了一个只包含价格低于50元的图书的新数组`cheapBooks`。 在Vue,我们可以在模板使用过滤器过滤数组,例如: ```html <ul> <li v-for="book in books | cheap"> {{ book.title }} </li> </ul> ``` 在上面的模板,我们使用了一个名为`cheap`的过滤器过滤数组`books`。这个过滤器可以在Vue实例的`filters`属性定义,例如: ```javascript new Vue({ el: '#app', data: { books: [ { title: 'JavaScript高级程序设计', price: 99 }, { title: 'Vue.js实战', price: 59 }, { title: 'CSS权威指南', price: 89 }, { title: 'HTML5权威指南', price: 49 }, ], }, filters: { cheap: function(books) { return books.filter(function(book) { return book.price < 50; }); }, }, }); ``` 在上面的代码,我们定义了一个名为`cheap`的过滤器,它接收一个`books`参数,表示要过滤数组。该过滤器内部调用`filter`方法,使用一个函数来过滤出所有价格低于50元的图书,并返回过滤后的新数组。然后在模板使用`|`管道符号来调用这个过滤器,将过滤后的数组渲染到页面上。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值