如何根据指定键值组合从JavaScript嵌套对象中过滤删除目标对象

原代码问题分析 #

• 循环中拿到的key是属性名字符串，直接访问key['elementName']实际是读取字符串的属性，返回undefined，判断逻辑完全不生效
• header2对应的属性值是数组，需要遍历数组内的元素才能读取到elementName属性

实现方案 #

方案1：针对性处理（适合明确过滤位置的场景） #

如果你确定只需要处理header2下的数组，直接用filter过滤数组即可，代码最简单高效：

defaultSettings.header2 = defaultSettings.header2.filter(
  item => item.elementName !== 'unwanted-element1'
);
console.log(defaultSettings);

执行后就可以得到你要的header2为空数组的结果。

方案2：通用递归过滤（适合大型复杂结构对象） #

如果你的defaultSettings结构不固定，要删除的符合条件的对象可能出现在任意层级、任意属性下，可以用递归遍历的通用方案：

function filterByElementName(obj, unwantedName) {
  // 处理数组类型，过滤掉符合条件的元素
  if (Array.isArray(obj)) {
    return obj.filter(item => {
      if (typeof item === 'object' && item !== null) {
        if (item.elementName === unwantedName) return false;
        // 递归处理子元素
        filterByElementName(item, unwantedName);
      }
      return true;
    })
  }
  // 处理对象类型，删除符合条件的属性
  if (typeof obj === 'object' && obj !== null) {
    for (const key of Object.keys(obj)) {
      const value = obj[key];
      if (typeof value === 'object' && value !== null) {
        if (value.elementName === unwantedName) {
          delete obj[key];
          continue;
        }
        // 递归处理子属性
        obj[key] = filterByElementName(value, unwantedName);
      }
    }
  }
  return obj;
}

// 调用方法
filterByElementName(defaultSettings, 'unwanted-element1');
console.log(defaultSettings);

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