JS中filter( )数组过滤器的使用

下面是关于"JS中filter()数组过滤器的使用"的详细讲解。

简介

filter()是JavaScript数组对象的函数，它可以基于某一条件对数组进行过滤，在返回的新数组中只保留符合条件的值。使用数组过滤器可以只保留想要的值，同时节省代码。filter()方法不会修改原始数组，它会返回一个新数组，所以在使用时需要记住将它赋值给一个变量来保存新数组。

使用方法

filter()方法通过一个回调函数来过滤数组，回调函数有3个参数：

• value(必选)：数组中正在操作的当前元素
• index (可选)：数组中正在操作的当前元素的索引值
• array (可选)：操作的整个数组

回调函数必须有一个返回值：true 或者 false。如果返回 true，则当前元素会被返回到新数组中；如果返回 false，则不会。

示例

示例1：基础使用

const arr = [1, 2, 3, 4, 5]
const newArr = arr.filter((value) => {
    return value % 2 === 0  // 过滤出所有偶数
})

console.log(newArr)  // [2, 4]

在例子中，我们定义了一个数组 arr，然后定义了一个回调函数，在每个元素上进行过滤操作。在这个回调函数中，我们判断当前元素是否为偶数，如果是，返回 true，将其添加到新数组；如果不是，则返回 false，过滤掉。最终，我们会得到过滤后的新数组 newArr，包含原数组 arr 中所有偶数元素。

示例2：按对象属性过滤

const books = [
    { title: 'JavaScript高级程序设计', author: 'Nicholas C. Zakas', year: 2017 },
    { title: 'JavaScript权威指南', author: 'David Flanagan', year: 2019 },
    { title: 'ES6标准入门', author: '阮一峰', year: 2015 },
    { title: 'CSS权威指南', author: 'Eric A. Meyer', year: 2010 },
    { title: 'HTML5权威指南', author: 'Jeffrey Zeldman', year: 2011 },
]

const newArr = books.filter((book) => {
    return book.year > 2015   // 过滤出出版年份大于2015年的书籍
})

console.log(newArr)

在以上示例中，我们定义了一个包含多个对象的数组 books，然后定义了一个回调函数，在每个元素上进行过滤操作。在这个回调函数中，我们比较当前元素的 year 属性是否大于 2015，如果是，返回 true，将其添加到新数组 newArr；如果不是，则返回 false，过滤掉。最终，我们会得到过滤后的新数组 newArr，包含原数组 books 中出版年份大于 2015 的书籍。(上方代码输出：[ { title: 'JavaScript权威指南', author: 'David Flanagan', year: 2019 }, { title: 'ES6标准入门', author: '阮一峰', year: 2015 } ])。

结束语

到这里，关于"JS中filter()数组过滤器的使用"的攻略就介绍完了。filter()方法是一个非常有用的数组过滤器，可以帮助我们快速过滤出想要的数据。如果你想自己练习一下，可以尝试使用其他条件来过滤数组元素。