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

qfxietian

于 2021-12-29 16:42:56 发布

阅读量813

点赞数

分类专栏：前端文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qfxietian/article/details/122219437

版权

本文探讨了JavaScript中的find()和filter()方法，它们都是ES6引入的数组方法。find()用于查找并返回数组中第一个满足条件的元素，如果找不到则返回undefined。而filter()则创建一个新的数组，包含所有通过测试函数的元素，即使没有匹配项也会返回一个空数组。这两种方法都是高阶函数，在前端开发中常用于数据处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

最低0.47元/天解锁文章