如何在JavaScript中筛选出具有相同职业的对象数组

问题描述 #

现有如下JavaScript对象数组：

let users = [
  {
    "id": 1,
    "name": "Ricardo",
    "serail_no": 463494,
    "occupation": "IT Specialist"
  },
  {
    "id": 2,
    "name": "Saptak",
    "serail_no": 749694,
    "occupation": "Teacher"
  },
  {
    "id": 3,
    "name": "Antonio",
    "serail_no": 406406,
    "occupation": "IT Specialist"
  },
  {
    "id": 4,
    "name": "Dimitri",
    "serail_no": 2503853,
    "occupation": "Doctor"
  }
]

需要筛选出职业为IT Specialist的对象，预期结果如下：

[{
    "id": 1,
    "name": "Ricardo",
    "serail_no": 463494,
    "occupation": "IT Specialist"
  },{
    "id": 3,
    "name": "Antonio",
    "serail_no": 406406,
    "occupation": "IT Specialist"
  }]

尝试使用filter方法但未成功，求实现方案及详细解释。

实现方案 #

直接使用数组原生的filter()方法即可完成筛选，代码如下：

// 筛选职业为"IT Specialist"的用户
const itSpecialists = users.filter(user => user.occupation === "IT Specialist");

// 输出结果
console.log(itSpecialists);

方法解释 #

• filter()会遍历数组的每一个元素，对每个元素执行传入的回调函数。
• 回调函数返回true时，当前元素会被加入返回的新数组；返回false则被排除。
• 这里我们通过判断user.occupation是否严格等于目标字符串"IT Specialist"，来筛选出符合条件的用户对象。

你可能踩的坑 #

如果之前用filter失败，大概率是这几个原因：

1. 字符串匹配错误：比如大小写不一致（写成"it specialist"）、多/少打了空格，或者属性名拼写错误（比如把occupation写成occpation）。
2. 运算符用错：把判断相等的===写成了赋值的=，导致逻辑完全错误。
3. 回调函数逻辑问题：比如返回了错误的判断条件，或者没有正确返回布尔值。

内容的提问来源于stack exchange，提问作者akash