微信小程序filter函数
时间: 2025-04-05 08:01:53 浏览: 21
### 微信小程序中 `filter` 函数的用法
在微信小程序开发过程中,`filter` 是一种非常实用的 JavaScript 数组方法。它通过对数组中的每一项执行回调函数来进行筛选,并返回一个新的数组,其中只包含那些使回调函数返回 `true` 的元素[^4]。
#### 基本语法
```javascript
array.filter(callback(element[, index[, array]])[, thisArg])
```
- **callback**: 对每个数组元素调用的函数。该函数接收三个参数:
- **element**: 当前正在处理的数组元素。
- **index**(可选): 正在处理的当前元素索引。
- **array**(可选): 调用了 `filter` 方法的原数组。
- **thisArg**(可选): 执行 `callback` 时使用的 `this` 值。
#### 示例代码
以下是一个简单的例子,展示如何使用 `filter` 来筛选出符合条件的数据:
假设有一个商品列表,我们需要找出价格大于等于 50 的商品。
```javascript
const goodsList = [
{ id: 1, name: '苹果', price: 30 },
{ id: 2, name: '香蕉', price: 60 },
{ id: 3, name: '橙子', price: 45 }
];
// 使用 filter 筛选出价格 >= 50 的商品
const filteredGoods = goodsList.filter(function(item) {
return item.price >= 50;
});
console.log(filteredGoods);
// 输出结果:[{id: 2, name: "香蕉", price: 60}]
```
如果希望代码更加简洁,还可以使用箭头函数:
```javascript
const filteredGoodsArrow = goodsList.filter((item) => item.price >= 50);
console.log(filteredGoodsArrow);
// 输出结果相同:[{id: 2, name: "香蕉", price: 60}]
```
#### 实际应用场景
在微信小程序的实际项目中,`filter` 可用于动态筛选数据并更新视图。例如,在用户界面中提供一个输入框,允许用户按关键字搜索商品名称或类别。
```javascript
Page({
data: {
allItems: [
{ id: 1, title: '手机' },
{ id: 2, title: '电脑' },
{ id: 3, title: '平板' }
],
searchKeyword: '',
filteredItems: []
},
onSearchInput(e) {
const keyword = e.detail.value.toLowerCase();
const result = this.data.allItems.filter(item =>
item.title.toLowerCase().includes(keyword)
);
this.setData({ filteredItems: result });
}
});
```
在这个示例中,每当用户输入新的关键词时,都会触发 `onSearchInput` 方法重新计算匹配的结果,并将其赋值给 `filteredItems` 属性以刷新页面显示的内容。
---
阅读全文
相关推荐

















