服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - JavaScript 中 find() 和 filter() 方法的区别

JavaScript 中 find() 和 filter() 方法的区别

2021-12-28 23:19锋享前端 js教程

JavaScript 在 ES6 上有很多数组方法,每种方法都有独特的用途和好处。

在开发应用程序时,大多使用数组方法来获取特定的值列表并获取单个或多个匹配项。

JavaScript 中 find() 和 filter() 方法的区别

在列出这两种方法的区别之前,我们先来一一了解这些方法。

JavaScript find() 方法

ES6 find() 方法返回通过测试函数的第一个元素的值。如果没有值满足测试函数,则返回 undefined。

语法

以下语法中使用的箭头函数。

  1. find((element) => { /* ... */ } ) 
  2. find((element, index) => { /* ... */ } ) 
  3. find((element, index, array) => { /* ... */ } ) 

我们有一个包含名称 age 和 id 属性的用户对象列表,如下所示:

  1. let users = [{ 
  2.     id:1, 
  3.     name'John'
  4.     age: 22 
  5. }, { 
  6.     id:2, 
  7.     name'Tom'
  8.     age: 22 
  9. }, { 
  10.     id:3, 
  11.     name'Balaji'
  12.     age: 24 
  13. }]; 

以下代码使用 find() 方法查找年龄大于 23 的第一个用户。

  1. console.log(users.find(user => user.age > 23)); 
  2. //console 
  3. //{ id: 3, name'Balaji', age:24} 

现在我们要找到第一个年龄为 22 的用户

  1. console.log(users.find(user => user.age === 22)); 
  2. //console 
  3. //{ id: 1, name'John', age:22} 

假设没有找到匹配意味着它返回 undefined

  1. console.log(users.find(user => user.age === 25)); 
  2. //console 
  3. //undefined 

JavaScript filter() 方法

filter() 方法创建一个包含所有通过测试函数的元素的新数组。如果没有元素满足测试函数,则返回一个空数组。

语法

  1. filter((element) => { /* ... */ } ) 
  2. filter((element, index) => { /* ... */ } ) 
  3. filter((element, index, array) => { /* ... */ } ) 

我们将使用相同的用户数组和测试函数作为过滤器示例。

以下代码使用 filter() 方法查找年龄大于 23 的第一个用户。

  1. console.log(users.filter(user => user.age > 23)); 
  2. //console 
  3. 现在我们要过滤年龄为 22 岁的用户//[{ id: 3, name'Balaji', age:24}] 

现在我们要过滤年龄为 22 岁的用户

  1. console.log(users.filter(user => user.age === 22)); 
  2. //console 
  3. //[{ id: 1, name'John', age:22},{ id: 2, name'Tom', age:22}] 

假设没有找到匹配意味着它返回一个空数组

  1. console.log(users.filter(user => user.age === 25)); 
  2. //console 
  3. //[] 

find() 和 filter() 的区别与共点

共点

高阶函数:这两个函数都是高阶函数。

区别

1、通过一个测试功能

find() 返回第一个元素。

filter() 返回一个包含所有通过测试函数的元素的新数组。

2、如果没有值满足测试函数

find() 返回未定义;

filter() 返回一个空数组;

原文链接:https://www.toutiao.com/a7046592218571850243/

延伸 · 阅读

精彩推荐
  • js教程微信小程序自定义胶囊样式

    微信小程序自定义胶囊样式

    这篇文章主要为大家详细介绍了微信小程序自定义胶囊样式,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    四曦11332021-12-21
  • js教程JavaScript实现瀑布流布局的3种方式

    JavaScript实现瀑布流布局的3种方式

    这篇文章主要为大家详细介绍了JavaScript实现瀑布流布局的3种方式,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    杏子_10247272021-12-20
  • js教程微信小程序实现购物车小功能

    微信小程序实现购物车小功能

    这篇文章主要为大家详细介绍了微信小程序实现购物车小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    小王同学Max5412021-12-22
  • js教程JavaScript 中的六种循环方法

    JavaScript 中的六种循环方法

    这篇文章主要介绍了JavaScript 中的六种循环方法,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下...

    Saku8442021-12-27
  • js教程ES5和ES6中类的区别总结

    ES5和ES6中类的区别总结

    这篇文章主要给大家介绍了ES5和ES6中类的区别的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋...

    Totora612122021-12-16
  • js教程基于javascript实现移动端轮播图效果

    基于javascript实现移动端轮播图效果

    这篇文章主要为大家详细介绍了基于javascript实现移动端轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    A.香辣鸡腿堡8982021-12-15
  • js教程微信小程序自定义modal弹窗组件的方法详解

    微信小程序自定义modal弹窗组件的方法详解

    这篇文章主要给大家介绍了关于微信小程序自定义modal弹窗组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学...

    遇见小美好12042021-12-15
  • js教程微信小程序弹窗禁止页面滚动的实现代码

    微信小程序弹窗禁止页面滚动的实现代码

    这篇文章主要介绍了微信小程序弹窗禁止页面滚动的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需...

    任我行RQ5442021-12-23