JavaScript中根据一个数组对象过滤另一个数组对象

📝 个人简介

⭐ 个人主页：我是段段🙋‍
🍊 博客领域：编程基础、前端💻
🍅 写作风格：干货！干货！都是干货！
🍑 精选专栏：JavaScript
🛸 支持段段：点赞👍、收藏⭐、留言💬

在写项目中遇到一个问题，就是根据一个对象数组去获取另一个对象数组中的值

假设现在有以下两个对象数组

let arr1 = [
    { id: 1, name: '张三', age: 20, hobby: ['吃饭', '睡觉', '打豆豆'] },
    { id: 2, name: '李四', age: 21, hobby: ['吃饭', '睡觉', '打豆豆'] },
    { id: 3, name: '王五', age: 22, hobby: ['吃饭', '睡觉', '打豆豆'] },
    { id: 4, name: '赵六', age: 23, hobby: ['吃饭', '睡觉', '打豆豆'] }
]
let arr2 = [
    { id: 3, name: '王五' },
    { id: 4, name: '赵六' }
]

因为arr2中的信息比较简单，我们需要根据arr2中的 id 字段进行判断，获取arr1中相同 id 字段的详细信息（不仅仅包括id、name，也需要包括age、hobby）并返回

预期的输出应该是下面这样

[
    { id: 3, name: '王五', age: 22, hobby: ['吃饭', '睡觉', '打豆豆'] },
    { id: 4, name: '赵六', age: 23, hobby: ['吃饭', '睡觉', '打豆豆'] }
]

示例

一、根据arr2中的 id 获取arr1相同 id 的信息

let arr = arr1.filter( item => {
    return arr2.find( prop => {
        return prop.id == item.id
    })
})

console.log(arr)
// 输出结果
[
  { id: 3, name: '王五', age: 22, hobby: [ '吃饭', '睡觉', '打豆豆' ] },
  { id: 4, name: '赵六', age: 23, hobby: [ '吃饭', '睡觉', '打豆豆' ] }
]

可以看出输出结果和我们预期的是一样的

二、获取arr1中不包含arr2的 id 字段的信息

let arr = arr1.filter( item => {
    return !arr2.find( prop => {
        return prop.id == item.id
    })
})

console.log(arr)
// 输出结果
[
  { id: 1, name: '张三', age: 20, hobby: [ '吃饭', '睡觉', '打豆豆' ] },
  { id: 2, name: '李四', age: 21, hobby: [ '吃饭', '睡觉', '打豆豆' ] }
]

可以看出示例二与示例一的结果刚好相反

以上就是对象数组的过滤方法，简单记录下~