扁平化數組的幾種方法

1、扁平化的概念

扁平化管理是企業爲解決層級結構的組織形式在現代環境下面臨的難題而實施的一種管理模式。當企業規模擴大時，原來的有效辦法是增長管理層次，而如今的有效辦法是增長管理幅度。當管理層次減小而管理幅度增長時，金字塔狀的組織形式就被「壓縮」成扁平狀的組織形式。

2、數組扁平化

用於將嵌套多層的數組「拉平」，變成一維的數組

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]複製代碼

3、數組扁平化的幾種方法

【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]複製代碼