小程序也来赶时髦了，看看filter是怎么用！

前端

2023-09-03 15:04:06

前言

随着小程序的日益普及，越来越多的开发者开始使用小程序来构建自己的应用。小程序是一种基于JavaScript的跨平台应用，具有开发成本低、运行速度快、用户体验好等优点。

filter简介

filter() 方法创建一个新的数组，其包含通过所提供的测试函数通过的数组元素。

filter() 方法不改变原始数组。

filter() 方法对每个数组元素调用一次测试函数。

测试函数接收三个参数：

元素值
元素索引
包含元素的数组

测试函数应返回一个布尔值：

如果测试函数返回 true，则元素被添加到新数组中。
如果测试函数返回 false，则元素不会被添加到新数组中。

filter在小程序中的使用

小程序中可以使用filter() 方法对数组进行过滤。语法如下：

const filteredArray = array.filter(function(item, index, array) {
  // 返回 true 以将元素添加到新数组中，否则返回 false
});

例如，以下代码创建一个新数组，其中只包含原始数组中大于10的元素：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

const filteredNumbers = numbers.filter(function(number) {
  return number > 10;
});

console.log(filteredNumbers); // 输出：[11, 12, 13, 14, 15]

案例

以下是一个使用filter() 方法过滤小程序中数据的实际案例。

前端早读课小程序是一个资讯类小程序，其中有一个页面展示了最新的文章列表。为了只显示分类为“前端”的文章，我们可以使用filter() 方法对文章列表进行过滤。

const articles = [
  {
    title: '文章1',
    category: '前端'
  },
  {
    title: '文章2',
    category: '后端'
  },
  {
    title: '文章3',
    category: '设计'
  },
  {
    title: '文章4',
    category: '产品'
  },
  {
    title: '文章5',
    category: '运营'
  }
];

const filteredArticles = articles.filter(function(article) {
  return article.category === '前端';
});

console.log(filteredArticles); // 输出：[
{
  title: '文章1',
  category: '前端'
}
]