如何在JavaScript中按多键过滤嵌套JSON？解决object is not iterable报错

报错原因 #

object is not iterable错误的核心是：filter是数组专属方法，不能直接遍历对象。要处理对象的键值对，得先用Object.entries()把对象转成[键, 值]格式的数组，处理完再转回对象。

递归过滤实现（适配嵌套结构） #

因为你的数据是嵌套的，得写个递归函数来逐层处理对象和数组：

// 定义要保留的键
const allowedKeys = new Set(['id', 'label', 'options']);

function filterNestedData(data) {
  // 处理数组：遍历每个元素递归过滤
  if (Array.isArray(data)) {
    return data.map(item => filterNestedData(item));
  }
  // 处理非null对象：过滤键值对
  if (typeof data === 'object' && data !== null) {
    return Object.entries(data).reduce((result, [key, value]) => {
      // 保留允许的键，同时递归处理值（比如options里的嵌套内容）
      if (allowedKeys.has(key)) {
        result[key] = filterNestedData(value);
      }
      // 如果是嵌套的数组/对象（比如children这类层级字段），也递归处理保留结构
      // 不需要的话直接删掉这个else if块
      else if (Array.isArray(value) || (typeof value === 'object' && value !== null)) {
        result[key] = filterNestedData(value);
      }
      return result;
    }, {});
  }
  // 基础类型（字符串、数字等）直接返回
  return data;
}

使用示例 #

// 你的原始嵌套数据示例
const rawData = {
  id: 'menu-1',
  label: '主菜单',
  options: { visible: true },
  extraField: '没用的内容',
  subMenus: [
    {
      id: 'submenu-1',
      label: '子菜单1',
      options: { disabled: false },
      description: '多余描述',
      items: [
        { id: 'item-1', label: '选项1', options: {}, trash: '垃圾数据' }
      ]
    }
  ]
};

// 执行过滤
const filteredData = filterNestedData(rawData);
console.log(filteredData);

期望输出 #

{
  id: 'menu-1',
  label: '主菜单',
  options: { visible: true },
  subMenus: [
    {
      id: 'submenu-1',
      label: '子菜单1',
      options: { disabled: false },
      items: [
        { id: 'item-1', label: '选项1', options: {} }
      ]
    }
  ]
}

自定义说明 #

• 如果不需要保留subMenus/children这类嵌套层级字段，直接删掉函数里的else if判断，只会保留id/label/options三个键。
• 要调整保留的键，修改allowedKeys集合里的元素即可。

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