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

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

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

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

你可能感兴趣的:(多维数组 “ 拉平 “ 实现一维数组)