两长度不同的对象数组，如何根据键值过滤移除指定元素？

核心思路是先从comp2中提取出需要保留的optionKey集合，再用这个集合过滤comp1，同时处理comp1中存在但comp2中没有对应项的元素（这类元素默认保留）。

步骤拆解 #

1. 收集需要保留的optionKey：遍历comp2，找出所有对应数组长度大于0的键，去掉Options后缀后存入集合（用Set提升查找效率）。
2. 过滤comp1数组：对comp1的每个元素，判断comp2中是否存在对应的xxxOptions键：
   • 如果不存在，直接保留该元素；
   • 如果存在，检查是否在保留集合中，是则保留，否则移除。

代码实现 #

let comp1 = [
    { optionKey: 'option1', displayName: '' },
    { optionKey: 'option2', displayName: '' },
    { optionKey: 'option3', displayName: '' },
    { optionKey: 'option4', displayName: '' },
    { optionKey: 'option5', displayName: '' },
    { optionKey: 'option6', displayName: '' },
    { optionKey: 'option7', displayName: '' },
];
let comp2 = [
    { option1Options: [] },
    { option2Options: [] },
    { option3Options: ['On', 'Off'] },
    { option4Options: ['Auto ', 'Off'] },
    { option5Options: [] },
    { option6Options: [] },
];

// 1. 收集comp2中需要保留的optionKey
const keepOptionKeys = new Set();
comp2.forEach(obj => {
    const [key] = Object.keys(obj); // 获取当前对象的唯一键
    const optionsArr = obj[key];
    if (optionsArr.length > 0) {
        const optionKey = key.replace('Options', '');
        keepOptionKeys.add(optionKey);
    }
});

// 2. 过滤comp1数组
const filteredComp1 = comp1.filter(item => {
    // 检查comp2中是否存在对应的xxxOptions键
    const hasMatchInComp2 = comp2.some(obj => Object.keys(obj)[0] === `${item.optionKey}Options`);
    // 逻辑：comp2中无对应项则保留；有对应项则必须在保留集合中才保留
    return !hasMatchInComp2 || keepOptionKeys.has(item.optionKey);
});

console.log(filteredComp1);
// 输出结果：
// [
//   { optionKey: 'option3', displayName: '' },
//   { optionKey: 'option4', displayName: '' },
//   { optionKey: 'option7', displayName: '' }
// ]

说明 #

• 不管comp1和comp2的长度是否一致，这个逻辑都能正常工作；
• 对于comp1中存在但comp2中没有对应xxxOptions键的元素（比如option7），因为没有触发“comp2中对应数组为空”的移除条件，所以会被保留；
• 使用Set存储需要保留的键，是因为Set.has()的查找时间复杂度是O(1)，比数组的includes()更高效。

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