如何用Object.keys()和map()访问对象数组并构建树形结构？

看起来你想从项目数组里提取每个项目的languages及其嵌套的details，用Object.keys()和map()来构建树形结构。先说说你现有代码的问题：你只处理了jsonData的第一个元素，并且把该元素的所有键值对都返回了，这并没有聚焦在languages上，也没处理嵌套结构。

下面是具体的解决方案：

步骤1：遍历所有项目并提取语言信息 #

首先，jsonData是一个项目数组，我们需要遍历每个项目，然后处理每个项目里的languages数组。结合map()和Object.keys()，我们可以灵活提取需要的属性：

完整代码示例 #

// 定义一个工具函数，用来从对象中提取指定的键
const extractProps = (obj, keys) => {
  return Object.keys(obj)
    .filter(key => keys.includes(key))
    .reduce((result, key) => {
      result[key] = obj[key];
      return result;
    }, {});
};

// 构建树形结构
const treeStructure = jsonData.map(project => {
  // 提取项目的基础信息（比如项目名称、ID）
  const projectInfo = extractProps(project, ['project_name', 'id']);
  
  // 处理每个项目的languages数组
  projectInfo.languages = project.languages.map(language => {
    // 提取语言的核心属性
    const langInfo = extractProps(language, ['id', 'language', 'created_by']);
    
    // 如果语言有details嵌套数组，同样处理
    if (language.details) {
      langInfo.details = language.details.map(detail => {
        // 提取detail的关键属性
        return extractProps(detail, ['id', 'phase_name', 'locale', 'external_url']);
      });
    }
    
    return langInfo;
  });
  
  return projectInfo;
});

// 打印结果查看
console.log(treeStructure);

代码解释 #

1. extractProps工具函数：用Object.keys()获取对象的所有键，筛选出我们需要的键，再用reduce()构建新对象。这样比手动写每个属性更灵活，修改提取的属性只需要调整keys数组即可。
2. 遍历项目数组：用jsonData.map()处理每个项目，先提取项目的基础信息（比如项目名、ID）。
3. 处理语言数组：对每个项目的languages用map()遍历，提取语言的核心属性，同时检查是否有details嵌套数组，如果有就同样用map()和extractProps处理。
4. 构建树形结构：最终得到的treeStructure就是以项目为根节点，包含语言和详情的树形结构。

输出示例（简化版） #

[
  {
    "project_name": "Project101-updated TODAY",
    "id": 1,
    "languages": [
      {
        "id": 1,
        "language": "English",
        "created_by": "John Doe",
        "details": [
          {
            "id": 1,
            "phase_name": "Phase1",
            "locale": "English",
            "external_url": "https://wwww.nba.com"
          },
          {
            "id": 2,
            "phase_name": "Phase2",
            "locale": "English",
            "external_url": "https://wwww.nba.com"
          }
        ]
      },
      {
        "id": 4,
        "language": "Japanese",
        "created_by": "John Doe"
      }
    ]
  },
  // ...其他项目的结构类似
]

如果不需要工具函数，直接写的话 #

如果你不想单独写工具函数，也可以直接在map()里用Object.keys()处理，比如：

const treeStructure = jsonData.map(project => ({
  projectName: project.project_name,
  languages: project.languages.map(language => {
    const langObj = {};
    // 手动筛选需要的语言属性
    ['id', 'language', 'created_by'].forEach(key => {
      if (language.hasOwnProperty(key)) {
        langObj[key] = language[key];
      }
    });
    if (language.details) {
      langObj.details = language.details.map(detail => {
        const detailObj = {};
        ['phase_name', 'locale'].forEach(k => {
          if (detail.hasOwnProperty(k)) {
            detailObj[k] = detail[k];
          }
        });
        return detailObj;
      });
    }
    return langObj;
  })
}));

这种写法更直白，但灵活性不如工具函数，适合提取属性较少的场景。

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