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

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

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

JavaScript find() 方法

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

语法

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

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

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

let users = [{
id:1,
name: 'John',
age: 22
}, {
id:2,
name: 'Tom',
age: 22
}, {
id:3,
name: 'Balaji',
age: 24
}];

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

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

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

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

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

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

JavaScript filter() 方法

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

语法

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

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

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

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

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

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

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

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

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

共点

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

区别

1、通过一个测试功能

find() 返回第一个元素。

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

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

find() 返回未定义;

filter() 返回一个空数组;

find和filter有什么区别的更多相关文章

  1. ASP.NET Core 中间件 中间件(Middleware)和过滤器(Filter)的区别

    https://www.cnblogs.com/savorboard/p/5586229.html 前言 在上篇文章主要介绍了DotNetCore项目状况,本篇文章是我们在开发自己的项目中实际使用的, ...

  2. filter和find区别,元素遍历

    转 filter和find区别 find()会在当前指定元素中查找符合条件的子元素,是对它的子集操作,而filter()则是在当前指定的元素集合中查找符合条件的元素,是对自身集合元素进行筛选. HTM ...

  3. servlet/filter/listener/interceptor区别与联系

    转自:http://www.cnblogs.com/doit8791/p/4209442.html servlet.filter.listener是配置到web.xml中(web.xml 的加载顺序是 ...

  4. js数组遍历(for in ,for of ,map,foreach,filter)的区别

    一.for in 和for of 的区别 1.for in 遍历数组时,索引实际上是字符串类型的数字,不能进行运算,我们来输出一下: let arr = [1,3,5,4] for (let inde ...

  5. SpringMVC的拦截器(Interceptor)和过滤器(Filter)的区别与联系

    摘自: http://blog.csdn.net/xiaoyaotan_111/article/details/53817918 一 简介 (1)过滤器: 依赖于servlet容器.在实现上基于函数回 ...

  6. 【转】servlet/filter/listener/interceptor区别与联系

    原文:https://www.cnblogs.com/doit8791/p/4209442.html 一.概念: 1.servlet:servlet是一种运行服务器端的java应用程序,具有独立于平台 ...

  7. django中的objects.get和objects.filter方法的区别

    为了说明它们两者的区别定义2个models class Student(models.Model): name = models.CharField('姓名', max_length=20, defa ...

  8. js some和filter用法和区别

    some方法 array1.some(callbackfn[, thisArg]) 对数组array1中的每个元素调用回调函数callbackfn,当回调函数返回true或者遍历完所有数组后,some ...

  9. 拦截器(Interceptor)与过滤器(Filter)的区别

    转自:https://www.jianshu.com/p/cf088baa9b04 过滤器,是在java web中将你传入的request.response提前过滤掉一些信息,或者提前设置一些参数.然 ...

  10. Django objects.all()、objects.get()与objects.filter()之间的区别介绍

    前言 本文主要介绍的是关于Django objects.all().objects.get()与objects.filter()直接区别的相关内容,文中介绍的非常详细,需要的朋友们下面来一起看看详细的 ...

随机推荐

  1. 「DIARY」PKUSC 2021 游记

    冬令营没了但是还有夏令营 (完蛋,前两天忘写游记了,完全没想起来--最后一天补一补) 试题分析在另外一篇博客上 # Day 0 早上去机场的时候把手机落在出租车上了 (还好之后找回来了),导致我前两天 ...

  2. 从零搭建php环境-php8-扩展-redis

    一.下载1.https://pecl.php.net/get/redis-5.3.2.tgz下载到本地,文件传输上传到 /usr/local/src/2.wget -P /usr/local/src/ ...

  3. python菜鸟学习: 2.列表操作

    # -*- coding: utf-8 -*-# 列表操作names = ["LiSi", "ZhangSan", "WangWu"]pri ...

  4. 实验 四 [bx]和loop的使用

    1. 综合使用 loop,[bx],编写完整汇编程序,实现向内存 b800:07b8 开始的连续 16 个 字单元重复填充字数据0403H. 代码  assume cs:code code segme ...

  5. CF546E

    这题并不是太难 首先题目我们将每个城市拆点,由源点向一端连容量为初始人数的边,由另一端向汇点连容量为最后人数的边,然后按照题目要求从一端向另一端连容量无穷大的边 这样跑出最大流之后我们只需比较这个流量 ...

  6. vue-cli4初探、问题解决和心得

    创建.调试.打包 vue create event-vue npm run serve //这个好,官方推荐`vue serve`没用 npm run build 项目结构 package.json ...

  7. nuxt中处理跨域

    一.安装 npm install @nuxtjs/axios    @nuxtjs/proxy  -S 二.nuxt.config.js进行配置 modules:[ '@nuxtjs/axios' ' ...

  8. JAVA 作业

    1.让用户分2次输入2个整数,输出2个数的最大值,最小值 import java.util.Scanner;class Demo01 { public static void main(String[ ...

  9. CSS面试题及答案

    介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? 标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin 低版本IE盒子模型:宽度= ...

  10. idea中ueditor的入门

    首先在https://github.com/fex-team/ueditor下载ueditor1_4_3_3-utf8-jsp.zip:解压去掉里边jsp中的bin目录放到项目中的webapp中: 添 ...