Vue3中匹配两个JSON的ID并筛选详情对象的更优实现方法

我是Vue3新手，现有header JSON和details JSON两个文件，需求是对比details JSON的CARD_ID与header JSON的CARD_ID，将匹配的details JSON对象存入数组。目前已通过嵌套forEach实现，想了解更合适的实现方式。

Header JSON #

[
    {
        "CARD_ID": "00001",
        "IS_ACTIVE": 1,
        "COURSE_TYPE": "course"
    },
    {
        "CARD_ID": "00002",
        "IS_ACTIVE": 1,
        "COURSE_TYPE": "course"
    },
    {
        "CARD_ID": "00003",
        "IS_ACTIVE": 0,
        "COURSE_TYPE": "course"
    },
    {
        "CARD_ID": "00004",
        "IS_ACTIVE": 1,
        "COURSE_TYPE": "course"
    },
    {
        "CARD_ID": "00005",
        "IS_ACTIVE": 1,
        "COURSE_TYPE": "course"
    },
    {
        "CARD_ID": "00006",
        "IS_ACTIVE": 1,
        "COURSE_TYPE": "pack"
    },
    {
        "CARD_ID": "00007",
        "IS_ACTIVE": 0,
        "COURSE_TYPE": "pack"
    },
    {
        "CARD_ID": "00008",
        "IS_ACTIVE": 1,
        "COURSE_TYPE": "pack"
    }
]

Details JSON #

[
    {
        "CARD_ID": "00001",
        "CULTURE_ID": "en",
        "IMAGE_PATH": "",
        "CARD_DESCRIPTION": "Test description",
        "CARD_DATE": "2023-06-10",
        "CARD_LINK": ""
    },
    {
        "CARD_ID": "00001",
        "CULTURE_ID": "sl",
        "IMAGE_PATH": "",
        "CARD_DESCRIPTION": "පරීක්ෂණ විස්තර අංක එක",
        "CARD_DATE": "2023-06-10",
        "CARD_LINK": ""
    },
    {
        "CARD_ID": "00002",
        "CULTURE_ID": "en",
        "IMAGE_PATH": "",
        "CARD_DESCRIPTION": "Test description",
        "CARD_DATE": "2023-06-10",
        "CARD_LINK": ""
    },
    {
        "CARD_ID": "00003",
        "CULTURE_ID": "en",
        "IMAGE_PATH": "",
        "CARD_DESCRIPTION": "Test description",
        "CARD_DATE": "2023-06-10",
        "CARD_LINK": ""
    },
    {
        "CARD_ID": "00003",
        "CULTURE_ID": "sl",
        "IMAGE_PATH": "",
        "CARD_DESCRIPTION": "පරීක්ෂණ විස්තර අංක දෙක",
        "CARD_DATE": "2023-06-10",
        "CARD_LINK": ""
    },
    {
        "CARD_ID": "00003",
        "CULTURE_ID": "ta",
        "IMAGE_PATH": "",
        "CARD_DESCRIPTION": "சோதனை விளக்கம்",
        "CARD_DATE": "2023-06-10",
        "CARD_LINK": ""
    },
    {
        "CARD_ID": "00004",
        "CULTURE_ID": "en",
        "IMAGE_PATH": "",
        "CARD_DESCRIPTION": "Test description",
        "CARD_DATE": "2023-06-10",
        "CARD_LINK": ""
    },
    {
        "CARD_ID": "00005",
        "CULTURE_ID": "en",
        "IMAGE_PATH": "",
        "CARD_DESCRIPTION": "Test description",
        "CARD_DATE": "2023-06-10",
        "CARD_LINK": ""
    }
]

我的实现代码 #

import AcademyHeaderData from '../data/academy.json';
import AcademyDetailsData from '../data/academy_details.json';

data() {
    return {
        AcademyHeader: AcademyHeaderData,
        AcademyDetails: AcademyDetailsData,
        filteredAcademyData: []
    }
},

mounted(){
    this.AcademyHeader.forEach(pal => {
        this.AcademyDetails.forEach(p2 => {
            if (pal.CARD_ID.includes(p2.CARD_ID)) {
                this.filteredAcademyData.push(p2);
            }
        })
    })
}

优化方案 #

1. 利用Set+filter实现高效匹配 #

嵌套forEach的时间复杂度是O(n*m)（n是header数组长度，m是details数组长度），数据量大时性能会明显下降。用Set存储header的CARD_ID后，再过滤details数组，时间复杂度能降到O(n+m)，代码也更简洁易读：

import AcademyHeaderData from '../data/academy.json';
import AcademyDetailsData from '../data/academy_details.json';

data() {
    return {
        AcademyHeader: AcademyHeaderData,
        AcademyDetails: AcademyDetailsData,
        filteredAcademyData: []
    }
},

mounted(){
    // 提取header中所有CARD_ID存入Set，Set的has方法查询时间为O(1)
    const headerCardIds = new Set(this.AcademyHeader.map(item => item.CARD_ID));
    // 过滤details数组，只保留CARD_ID存在于Set中的项
    this.filteredAcademyData = this.AcademyDetails.filter(item => headerCardIds.has(item.CARD_ID));
}

2. 增加额外过滤条件（可选） #

如果需要只匹配header中IS_ACTIVE=1的有效项，只需先过滤header数组再生成Set：

mounted(){
    const activeCardIds = new Set(
        this.AcademyHeader
            .filter(item => item.IS_ACTIVE === 1)
            .map(item => item.CARD_ID)
    );
    this.filteredAcademyData = this.AcademyDetails.filter(item => activeCardIds.has(item.CARD_ID));
}

原代码的小问题修正 #

原代码中用pal.CARD_ID.includes(p2.CARD_ID)进行匹配，这会导致类似"000012"错误匹配"00001"的情况，应该改为严格相等判断：pal.CARD_ID === p2.CARD_ID，确保CARD_ID精确匹配。

内容的提问来源于stack exchange，提问作者D.madushanka