JavaScript使用concat与循环合并数组实现二维数组扁平化

需要将二维数组 [[1,2,3],[4,5,6],[7,8,9]] 扁平化处理，得到一维结果 [1,2,3,4,5,6,7,8,9]，当前编写的代码如下：

let main= [[1,2,3],[4,5,6],[7,8,9]]

let result= [].concat(
  main.map((e)=>{
    return e
  })
)

console.log(result)

你当前的代码无法得到预期的扁平化结果：main.map(e => e) 只是原封不动返回原二维数组的每个子数组，最终传给concat的是一个长度为3、元素为3个子数组的一维数组，concat不会递归展开子数组，运行后result和原数组main完全一致。

可以选择以下几种正确实现方式：

• 原生flat方法（ES2019+支持，最简洁）
  flat是JS原生提供的数组扁平化方法，不传参数时默认扁平化1层，刚好适配当前二维数组的场景：

const main = [[1,2,3],[4,5,6],[7,8,9]]
const result = main.flat()
console.log(result) // [1,2,3,4,5,6,7,8,9]

• 修正concat写法
  利用展开运算符将map返回的数组拆解为单个参数传入concat，concat会将每个子数组的元素拼接到新数组中：

const main = [[1,2,3],[4,5,6],[7,8,9]]
const result = [].concat(...main.map(e => e))
console.log(result) // [1,2,3,4,5,6,7,8,9]

• reduce实现（兼容更低版本JS环境）
  通过reduce遍历数组，每次将当前子数组合并到累加的结果数组中：

const main = [[1,2,3],[4,5,6],[7,8,9]]
const result = main.reduce((res, currentItem) => res.concat(currentItem), [])
console.log(result) // [1,2,3,4,5,6,7,8,9]

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