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

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

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

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

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

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

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

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

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

let arr = [
  {
    name: 'Rick',
    age: 60
  },

  {
    name: 'Rick',
    age: 70
  },

  {
    name: 'Morty',
    age: 14
  }

]

let findResult = arr.find(i => i.name === 'Rick')
let filterResult = arr.filter(i => i.name === 'Rick')

console.log(arr); 
/*  输出结果
  [
    {
      name: "Rick",
      age: 60
    },

    {
      name: "Rick",
      age: 70
    },

    {
      name: "Morty",
      age: 14
    }
  ]

*/

console.log(findResult);   // {name: "Rick", age: 60}
console.log(filterResult);  // [{name: "Rick", age: 60}, {name: "Rick", age: 70}]