多维数组 “ 拉平 “ 实现一维数组

背景：前两天项目中遇到个问题，通过双层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这本书。

好了，以上就是多维数组扁平化实现一维数组的方法，希望对你有所帮助。

如有问题，请指出，接受批评。