JS中两个数组对象筛选方法

下面是JS中两个数组对象筛选方法的完整攻略。

一、筛选方法介绍

在JS中，我们经常需要对数组对象进行筛选。常见的筛选方法有filter和find。

1. filter

filter方法可以对数组对象进行筛选，并返回一个新的数组，新数组中包含符合条件的元素。

const arr = [1, 2, 3, 4, 5];
const newArr = arr.filter(num => num % 2 === 0);
console.log(newArr); // [2, 4]

上面的代码中，我们筛选出了原数组中所有偶数，并将它们放入一个新的数组中返回。其中filter方法的参数为一个回调函数，参数为当前元素的值，可以在回调函数中进行条件判断。

2. find

find方法也是对数组对象进行筛选，但与filter不同的是，它只返回符合条件的第一个元素。

const arr = [1, 2, 3, 4, 5];
const found = arr.find(num => num % 2 === 0);
console.log(found); // 2

上面的代码中，我们找到了原数组中的第一个偶数，并将其返回。与filter不同的是，find只返回符合条件的第一个元素。

二、数组对象的筛选示例

下面，我们将通过两个示例来说明如何使用filter和find方法进行数组对象的筛选。

1. 筛选年龄大于20岁的人

假设我们有如下的一个人员信息数组对象：

const persons = [
  {
    name: '小明',
    age: 18,
    gender: 'male'
  },
  {
    name: '小红',
    age: 22,
    gender: 'female'
  },
  {
    name: '小刚',
    age: 25,
    gender: 'male'
  }
];

现在，我们要筛选出年龄大于20岁的人，可以使用filter方法：

const filtered = persons.filter(person => person.age > 20);
console.log(filtered); // [{name: "小红", age: 22, gender: "female"}, {name: "小刚", age: 25, gender: "male"}]

上面的代码中，我们根据age属性值，筛选出了年龄大于20岁的人，并将它们放入一个新的数组中返回。

2. 查找第一个姓张的人

假设我们有如下的一个人员姓名数组对象：

const names = [
  {
    firstName: '张三',
    lastName: '李'
  },
  {
    firstName: '李四',
    lastName: '张'
  },
  {
    firstName: '王五',
    lastName: '赵'
  }
];

现在，我们要查找第一个姓张的人，可以使用find方法：

const found = names.find(name => name.firstName.startsWith('张'));
console.log(found); // {firstName: "张三", lastName: "李"}

上面的代码中，我们根据firstName属性值，查找出了第一个姓张的人，并将其返回。

三、总结

通过本文的介绍，我们了解了JS中数组对象的两种筛选方法：filter和find。这两种方法可以根据需求进行选择使用，帮助我们在开发过程中快速、高效地对数组对象进行操作。