如何基于依赖对象数组筛选optionData的font-color字段项

需求说明 #

需要从optionData对象的fields数组里筛选出符合dependency条件的font-color字段——具体来说，要保留value为#222的项，因为dependency里只包含#fff和#222这两个font-color有效值。

数据结构 #

optionData结构 #

{
    "fields": [
        {
            "type": "color",
            "id": "font-color",
            "value": "#222",
            "target": "font",
            "dependency": []
        },
        {
            "type": "color",
            "id": "font-color",
            "value": "#f00",
            "target": "font",
            "dependency": []
        }
    ],
    "textposition": {
        "left": "12",
        "top": "10"
    },
    "textsubtitle": "Kleur",
    "additionalcosts": "4,99"
}

dependency数组结构 #

[
  {
    "field": "font-color",
    "value": "#fff"
  },
  {
    "field": "font-color",
    "value": "#222"
  }
]

错误代码 #

const optionData = {"fields":[{"type":"color","id":"font-color","value":"#222","target":"font","dependency":[]},{"type":"color","id":"font-color","value":"#f00","target":"font","dependency":[]}],"textposition":{"left":"12","top":"10"},"textsubtitle":"Kleur","additionalcosts":"4,99"};

console.log(optionData, 'optionData');

const dependency = [{"field":"font-color","value":"#fff"},{"field":"font-color","value":"#222"}];

console.log(dependency, 'dependency');

let filtered = optionData['fields'].filter(field => {
  console.log(field, 'field');
  return dependency.filter(dependency => {
    console.log(dependency, 'dependency')
    return dependency['field'] !== field['id'] && dependency['value'] !== field['value'];
  })
})

console.log(filtered, 'filtered');

问题分析 #

原代码存在两个核心问题：

1. filter回调要求返回布尔值，但内部嵌套的dependency.filter()返回的是数组——只要数组不为空就会被判定为true，导致筛选逻辑完全偏离预期。
2. 匹配条件写反：需要判断当前field是否在dependency中有匹配项（field.id等于dependency.field且field.value等于dependency.value），但原代码用了!==和&&，逻辑完全相反。

修正后的代码 #

方案一：用some判断匹配项（适合数据量小的场景） #

const optionData = {"fields":[{"type":"color","id":"font-color","value":"#222","target":"font","dependency":[]},{"type":"color","id":"font-color","value":"#f00","target":"font","dependency":[]}],"textposition":{"left":"12","top":"10"},"textsubtitle":"Kleur","additionalcosts":"4,99"};
const dependency = [{"field":"font-color","value":"#fff"},{"field":"font-color","value":"#222"}];

// 筛选逻辑：field的id和value在dependency中有匹配项
const filtered = optionData.fields.filter(field => {
  return dependency.some(dep => dep.field === field.id && dep.value === field.value);
});

console.log(filtered);
// 输出：[{"type":"color","id":"font-color","value":"#222","target":"font","dependency":[]}]

方案二：转成Map提升查询效率（适合数据量大的场景） #

const optionData = {"fields":[{"type":"color","id":"font-color","value":"#222","target":"font","dependency":[]},{"type":"color","id":"font-color","value":"#f00","target":"font","dependency":[]}],"textposition":{"left":"12","top":"10"},"textsubtitle":"Kleur","additionalcosts":"4,99"};
const dependency = [{"field":"font-color","value":"#fff"},{"field":"font-color","value":"#222"}];

// 把dependency转成以`field:value`为键的Map，减少重复遍历
const depMap = new Map(dependency.map(dep => [`${dep.field}:${dep.value}`, true]));

const filtered = optionData.fields.filter(field => {
  const key = `${field.id}:${field.value}`;
  return depMap.has(key);
});

console.log(filtered);
// 输出：[{"type":"color","id":"font-color","value":"#222","target":"font","dependency":[]}]

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