JavaScript：过滤后合并两个对象数组的实现需求

需求说明 #

1. 从old_data数组中过滤掉text字段等于'do_not_import'的元素，得到filter_data
2. 将filter_data与newData中**value字段未在filter_data中出现过**的元素合并，得到最终目标数组

完整实现代码 #

// 原始旧数组
let old_data = [
    {
        value: 'item',
        text: "do_not_import",
        custom: null,
        updates : true, 
        removes : true,        
    },
    {
        value: 'additional_image',
        text: "additional_image_mapped",
        custom: null,
        updates : true, 
        removes : true,        
    },
    {
        value: 'brand',
        text: "brand_mapped",
        custom: null,
        updates : true, 
        removes : true,        
    },
];

// 原始新数组
let newData = [
    {
        value: 'item',
        text: "do_not_import",
        custom: null,
        updates : true, 
        removes : true,        
    },
    {
        value: 'additional_image',
        text: "do_not_import",
        custom: null,
        updates : true, 
        removes : true,        
    },
    {
        value: 'brand',
        text: "do_not_import",
        custom: null,
        updates : true, 
        removes : true,        
    },
    {
        value: 'new',
        text: "do_not_import",
        custom: null,
        updates : true, 
        removes : true,        
    },
];

// 第一步：过滤得到filter_data
let filter_data = old_data.filter(item => item.text !== 'do_not_import');

// 提取filter_data的value集合，提升后续查询效率
const filterValueSet = new Set(filter_data.map(item => item.value));

// 第二步：筛选newData中需要合并的元素
const newItemsToMerge = newData.filter(item => !filterValueSet.has(item.value));

// 合并得到目标数组
const targetArray = [...filter_data, ...newItemsToMerge];

console.log(targetArray);

执行结果 #

执行上述代码后，targetArray的结果与预期一致：

[ 
    { 
        value: 'additional_image',
        text: 'additional_image_mapped',
        custom: null,
        updates: true,
        removes: true
    },
    { 
        value: 'brand',
        text: 'brand_mapped',
        custom: null,
        updates: true,
        removes: true 
    },
    {
        value: 'item',
        text: "do_not_import",
        custom: null,
        updates : true, 
        removes : true,        
    },
    {
        value: 'new',
        text: "do_not_import",
        custom: null,
        updates : true, 
        removes : true,        
    }
]

优化说明 #

使用Set存储filter_data的value值，是因为Set.has()方法的查询时间复杂度为O(1)，相比直接用数组includes()的O(n)，在数据量较大时能显著提升效率。

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