JS中的filter()是什么?功能之一:筛选符合条件的json数据

一、语法

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

二、参数名称

currentValue:必须。当前元素的值;
index:可选。当前元素的索引值;
arr:可选。当前元素属于的数组对象;
thisValue:可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。 如果省略了 thisValue ,"this"的值为 “undefined”。

三、注意

  • filter用于对数组进行过滤。
  • 它创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
  • 注意:filter()不会对空数组进行检测、不会改变原始数组

四、用法

1、单条件筛选数据

  • 数组根据某个字段的值进行过滤,返回过滤后的集合,可以使用filter()方法
let array = [
	{id:'001',name:'小强',key_dict:'是'},
	{id:'002',name:'小明',key_dict:'是'},
	{id:'003',name:'小紫',key_dict:'否'},
	{id:'004',name:'小红',key_dict:'否'},
	{id:'005',name:'小白兔',key_dict:'是'}
	]
array = array.filter((item) => {
	return item.key_dict == '否'
	})
console.log("过滤出来的array",array)


结果为
	{id:'003',name:'小紫',key_dict:'否'},
	{id:'004',name:'小红',key_dict:'否'},

2、多条件筛选数据

let array = [
	{id:'001',name:'小强',key_dict:'是'},
	{id:'002',name:'小明',key_dict:'是'},
	{id:'003',name:'小紫',key_dict:'否'},
	{id:'004',name:'小红',key_dict:'否'},
	{id:'005',name:'小白兔',key_dict:'是'}
	]
array = array.filter((item) => {
	return item.key_dict == '否'&&item.name =='小紫'})
console.log("过滤出来的array",array)


结果为
	{id:'003',name:'小紫',key_dict:'否'},
好的,这个需求可以分为以下几个步骤实现: 1. 创建一个页面用于展示所有个人信息,并添加筛选功能。 2. 在该页面添加姓名、年龄、年份、奖励四个筛选条件。 3. 通过 wx.request 发送请求获取个人信息数据,然后根据筛选条件进行筛选。 4. 将筛选后的数据展示在页面。 下面是一个简单的实现过程: 1. 在 app.json 配置页面路径: ``` "pages": [ "pages/index/index" ] ``` 2. 创建一个 index 页面,并添加筛选条件: ``` <view class="filter"> <input placeholder="姓名" bindinput="bindName" /> <input placeholder="年龄" bindinput="bindAge" /> <input placeholder="年份" bindinput="bindYear" /> <input placeholder="奖励" bindinput="bindReward" /> </view> <view class="list"> <block wx:for="{{list}}" wx:key="index"> <view class="item">{{item.name}} {{item.age}} {{item.year}} {{item.reward}}</view> </block> </view> ``` 3. 在 index 页面的 js 文件添加筛选相关代码: ``` Page({ data: { list: [], // 所有个人信息 name: '', // 姓名筛选条件 age: '', // 年龄筛选条件 year: '', // 年份筛选条件 reward: '', // 奖励筛选条件 }, onLoad() { this.getData() }, getData() { wx.request({ url: '请求个人信息数据的接口地址', success: (res) => { this.setData({ list: res.data }) } }) }, bindName(e) { this.setData({ name: e.detail.value }) this.filterList() }, bindAge(e) { this.setData({ age: e.detail.value }) this.filterList() }, bindYear(e) { this.setData({ year: e.detail.value }) this.filterList() }, bindReward(e) { this.setData({ reward: e.detail.value }) this.filterList() }, filterList() { const { name, age, year, reward, list } = this.data const filteredList = list.filter((item) => { let flag = true if (name && item.name.indexOf(name) === -1) { flag = false } if (age && item.age !== age) { flag = false } if (year && item.year !== year) { flag = false } if (reward && item.reward.indexOf(reward) === -1) { flag = false } return flag }) this.setData({ list: filteredList }) } }) ``` 4. 在 index 页面的 wxss 文件添加样式: ``` .filter { display: flex; justify-content: space-around; align-items: center; margin-top: 20px; } .list { margin-top: 20px; } .item { padding: 10px; border: 1px solid #ccc; margin-bottom: 10px; } ``` 这样就完成了一个简单的小程序筛选功能代买,带 wxss,展示个人信息的功能
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值