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

迈不过友情╰ 2021-09-04 08:49 582阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70]  
如上，通过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这本书。

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70]: /images/20210813/99a1f2fdd5c746229bbe19722b55dc52.png