背景：前两天项目中遇到个问题，通过双层map循环+await请求数据最终得到了一个二维数组，但是实际我想要的是二维数组里的那些对象，需要构建成一个一维数组（因为我要通过v-for去循环显示）
数据：
[
[
{
bg_pic: "http://business0.qianqian.com/5c3d586d234b4_292.png",
color: "0x21BFA6",
count: 4,
type: 1,
},
{
bg_pic: "http://business0.qianqian.com/5bfe4eacbcea8_225.png",
color: "0x21BFA6",
count: 4,
type: 25,
},
],
[
{
bg_pic: "http://business0.qianqian.com/5bfe4eacbcea8_225.png",
color: "0x21BFA6",
count: 4,
type: 25,
},
{
bg_pic: "http://business0.qianqian.com/5bfe4ed160c12_921.png",
color: "0x967456",
count: 4,
type: 24,
},
],
];
当然了，二维数组转一维数组的方法其实有很多，但是当多维（三维、四维等）呢？难不成循环+递归吗？
所以我就在想：有没有一个更优雅、更方便的api可以实现这个需求呢？
答案当然是：有的。
先来看实现，后讲解：
const data = [
[
{
bg_pic: "http://business0.qianqian.com/5c3d586d234b4_292.png",
color: "0x21BFA6",
count: 4,
type: 1,
},
{
bg_pic: "http://business0.qianqian.com/5bfe4eacbcea8_225.png",
color: "0x21BFA6",
count: 4,
type: 25,
},
],
[
{
bg_pic: "http://business0.qianqian.com/5bfe4eacbcea8_225.png",
color: "0x21BFA6",
count: 4,
type: 25,
},
{
bg_pic: "http://business0.qianqian.com/5bfe4ed160c12_921.png",
color: "0x967456",
count: 4,
type: 24,
},
],
];
const result = data.flat();
console.log(result)
如上，通过flat的方法去“拉平”了数组，实现了二维转一维的方法。
那么多维转一维怎么实现呢？别着急，该方法还提供一个参数：
数组实例的 flat()：数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响
[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]
上面代码中，原数组的成员里面有一个数组，flat()方法将子数组的成员取出来，添加在原来的位置。
flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。
[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
上面代码中，flat()的参数为2，表示要“拉平”两层的嵌套数组。
如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。
[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]
如果原数组有空位，flat()方法会跳过空位。
[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]
flatMap() 方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。（相当于先把数组进行map处理，然后对map的返回值数组进行flat处理）
// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]
flatMap()只能展开一层数组。
// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]
上面代码中，遍历函数返回的是一个双层的数组，但是默认只能展开一层，因此flatMap()返回的还是一个嵌套数组。
flatMap() 方法的参数是一个遍历函数，该函数可以接受三个参数，分别是当前数组成员、当前数组成员的位置（从零开始）、原数组。
arr.flatMap(function callback(currentValue[, index[, array]]) {
// ...
}[, thisArg])
flatMap()方法还可以有第二个参数，用来绑定遍历函数里面的this。
以上两个新方法是es6中数组新增的扩展，强烈推荐大家阅读阮一峰大神的es6这本书。
好了，以上就是多维数组扁平化实现一维数组的方法，希望对你有所帮助。
如有问题，请指出，接受批评。
