JavaScript嵌套数组重构：如何将每个元素拆为独立子数组按行排布

核心问题梳理 #

原始代码的结构错位点在于：boss 是嵌套了1层的数组，最外层仅包含1个元素——也就是存放所有名字的一维数组 ['Mark', 'Tom', 'Dave']。原代码直接对最外层数组做 map 遍历，把拿到的这个名字数组原封不动返回，相当于完全没有拆解内层内容，所以最终结果和原数组没有任何区别。
要达成目标结构，核心逻辑是：把内层数组里的每一个名字，单独包装成一个只包含该名字的单元素小数组，再把这些小数组组成新的外层数组。

具体代码调整 #

可以使用 flatMap 一步完成拆解+映射的逻辑，不需要手动嵌套循环：

let boss = [['Mark', 'Tom', 'Dave']]
let newBoss = boss.flatMap(function(innerArr) {
    // 遍历内层存放名字的数组，把每个名字包装为单元素数组
    return innerArr.map(name => [name])
})

运行后得到的结果和目标结构完全一致：

[
  ['Mark'],
  ['Tom'],
  ['Dave'],
]

如果需要兼容不支持 flatMap 的老旧运行环境，可以替换为两层遍历的写法：

let boss = [['Mark', 'Tom', 'Dave']]
let newBoss = []
boss.forEach(innerArr => {
    innerArr.forEach(name => {
        newBoss.push([name])
    })
})

踩坑提示：如果直接用普通的外层 map 做拆解：

// 错误写法：会多套一层嵌套
let newBoss = boss.map(innerArr => innerArr.map(name => [name]))

最终返回结果是 [ [ ['Mark'], ['Tom'], ['Dave'] ] ]，属于三维嵌套结构，和目标结构不符。flatMap 会自动把回调返回的数组展开一层，刚好消除这层多余的嵌套。

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