关于javascript:JavaScript-中-find-和-filter-方法的区别

JavaScript 在 ES6 上有很多数组办法，每种办法都有独特的用处和益处。

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

在列出这两种办法的区别之前，咱们先来一一理解这些办法。

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

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//[]

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

1、通过一个测试性能

find() 返回第一个元素。

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

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

find() 返回未定义；

filter() 返回一个空数组；