扁平化数组的几种方法

一、扁平化的概念

扁平化管理是企业为解决层级结构的组织形式在现代环境下面临的难题而实施的一种管理模式。当企业规模扩大时，原来的有效办法是增加管理层次，而现在的有效办法是增加管理幅度。当管理层次减少而管理幅度增加时，金字塔状的组织形式就被“压缩”成扁平状的组织形式。

二、数组扁平化

用于将嵌套多层的数组“拉平”，变成一维的数组

1、[1, [2]] => [1,2]
2、[[1, 2], [3, 4]] => [1, 2, 3, 4]
3、[1, 2, [3, 4, [5, 6]]] => [1, 2, 3, 4, 5, 6]

三、数组扁平化的几种方法

【1】Array​.prototype​.flat()

flat()方法会按照一个可指定的深度depth递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。该方法不会改变原数组

语法： let newArray = arr.flat(depth)
描述： depth为指定要提取嵌套数组的结构深度，默认值为 1
flat() 方法会移除数组中的空项

例子：

    let arr1 = [1, 2, [3, 4]];
    arr1.flat(); // [1, 2, 3, 4]

    // 指定要提取嵌套数组的结构深度为1层
    let arr2 = [1, 2, [3, 4, [5, 6]]];
    arr2.flat(1); // [1, 2, 3, 4, [5, 6]]

    // 指定要提取嵌套数组的结构深度为2层
    let arr3 = [1, 2, [3, 4, [5, 6]]];
    arr3.flat(2); // [1, 2, 3, 4, 5, 6]

    // 使用 Infinity 作为深度，展开任意深度的嵌套数组
    let arr4 = [1, 2, [3, 4, [5, 6]]]
    arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6]

    // 移除数组中的空项
    let arr5 = [1, 2, , 4, 5];
    arr5.flat(); // [1, 2, 4, 5]

【2】归并方法 reduce()

我们用reduce函数进行遍历，把prev的初值赋值为[]，如果当前的值是数组的话，那么我们就递归遍历它的孩子，如果当前的值不是数组，那么我们就把它拼接进数组里。

    let arr = [[1, 2, [3, 4], 5], [6, 7, 8], [[9, 10], 11]];
    function flat(arr) {
      return arr.reduce(function (prev, cur) {
        return prev.concat(Array.isArray(cur) ? flat(cur) : cur);
      }, [])
    }
    console.log(flat(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

【3】toString()

toString()方法有很大局限性，只适用于数组元素全部为数字的情况下

    // toString && Json.parase
    let arr = [[1, 2, [3, 4], 5], [6, 7, 8], [[9, 10], 11]];
    function flat(arr) {
      var str = arr.toString();
      return JSON.parse('[' + str + ']');
    }
    console.log(flat(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

    // toString && split
    let arr = [[1, 2, [3, 4], 5], [6, 7, 8], [[9, 10], 11]];
    function flat(arr) {
      return arr.toString().split(',').map(item => {
        return Number(item)
      })
    }
    console.log(flat(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

    // join && split
    let arr = [[1, 2, [3, 4], 5], [6, 7, 8], [[9, 10], 11]];
    function flat(arr) {
      return arr.join(',').split(',').map(item => {
        return Number(item);
      })
    }
    console.log(flat(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

【4】循环+递归

递归的遍历每一项，若为数组则继续遍历，否则concat

    let arr = [[1, 2, [3, 4], 5], [6, 7, 8], [[9, 10], 11]];
    function flat(arr) {
      let result = [];
      arr.map(item => {
        if (Array.isArray(item)) {
          result = result.concat(flat(item));
        } else {
          result.push(item);
        }
      });
      return result;
    }
    console.log(flat(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

【5】扩展运算符. . .

...用于取出参数对象的所有可遍历属性，拷贝到当前对象中

    let arr = [[1, 2, [3, 4], 5], [6, 7, 8], [[9, 10], 11]]
    function flat(arr) {
      while (arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr);
      }
      return arr;
    }
    console.log(flat(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料