微信小程序filter函数

### 微信小程序中 `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` 属性以刷新页面显示的内容。 ---