映射JS对象并将参数合并到子对象中

Question

我在映射JS对象和将数据从一个参数合并到另一个参数的子对象时遇到了困难。

假设我有以下JSON：

const data = [
  {
    "difficulty": "Easy",
    "levels": [
      {
        "id": 0,
        "title": "Training",
        "description": "First training level."
      },
      {
        "id": 1,
        "title": "Story",
        "description": "First story level."
      }
    ]
  },
  {
    "difficulty": "Medium",
    "levels": [
      {
        "id": 2,
        "title": "Training",
        "description": "First training level at medium difficulty."
      }
    ]
  }
];

我想要操作这个来返回：

[
  {
    "id": 0,
    "title": "Training",
    "description": "First training level.",
    "difficulty": "Easy"
  },
  {
    "id": 1,
    "title": "Story",
    "description": "First story level.",
    "difficulty": "Easy"
  },
  {
    "id": 2,
    "title": "Training",
    "description": "First training level at medium difficulty.",
    "difficulty": "Medium"
  }
];

我试过了：

const result = data.map(item => {
  const { difficulty, levels } = item;
  return levels.map(level => ({ ...level, difficulty }));
});

但我的结论是：

[
   [
      {
         "id": 0,
         "title": "Training",
         "description": "First training level.",
         "difficulty": "Easy"
      },
      {
         "id": 1,
         "title": "Story",
         "description": "First story level.",
         "difficulty": "Easy"
      }
   ],
   [
      {
         "id": 2,
         "title": "Training",
         "description": "First training level at medium difficulty.",
         "difficulty": "Medium"
      }
   ]
]

我只想返回所有添加了difficulty的levels。

Answer 1

这是因为您使用了嵌套的.map函数。每个.map函数返回一个数组。要避免这种情况，您可以使用.flat()方法来减少嵌套，您的解决方案可以转换为以下形式

const result = data.map(item => {
      const { difficulty, levels } = item;
      return levels.map(level => ({ ...level, difficulty }));
      }).flat();

默认情况下，它压缩为1个嵌套数组。更多信息可以在这里找到：Array.prototype.flat()

但在处理大型数据集合时要小心，因为它会遍历数组，因此会降低性能。

不含.map方法的UPD型解

function mapDifficultyToLevels(data) {
  const result = []
  data.forEach(item => {
    item.levels.forEach(level => {
      result.push({
        difficulty: item.difficulty,
        ...level
      })
    })
  })
  return result
}

Answer 2

使用map迭代级别数组并添加难度属性，使用flat()删除嵌套数组并将其展平为一个数组。

​

const data = [{"difficulty": "Easy", "levels": [{"id": 0,"title": "Training","description": "First training level."},{"id": 1,"title": "Story","description": "First story level."}] },{"difficulty": "Medium","levels": [ {"id": 2, "title": "Training","description": "First training level at medium difficulty."}]}];
let result=data.map( obj =>obj.levels.map(level=>{
level["difficulty"]=obj.difficulty;return level}
)).flat();
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

​