數組扁平化 && 對象扁平化

目錄

• ​​1. 數組扁平化​​

• ​​1.1 toString + split​​
• ​​1.2 reduce​​
• ​​1.3 join + split​​
• ​​1.4 遞歸 + 循環​​
• ​​1.5 擴充運算符​​
• ​​1.6 flat()​​

• ​​2. 對象扁平化​​

1. 數組扁平化

數組扁平化就是将多元數組轉化為一維數組：

[1, [2, 3, [4, 5]]]  ——>  [1, 2, 3, 4, 5]      

1.1 toString + split

先将數組轉化為字元串，在使用split将字元串轉化為數組：

let arr = [1, [2, 3, [4, 5]]]
function flatten(arr) {
    return arr.toString().split(',').map( item => Number(item))
}
console.log(flatten(arr)) // [1, 2, 3, 4, 5]      

用split形成的數組的每個元素仍然是字元串，需要将其轉化為數字

注意： 僅适用于數組元素都是數字的情況

1.2 reduce

reduce方法會對根據回調函數對數組的每個元素進行操作：

let arr = [1, [2, 3, [4, 5]]] 
const newArr = function(arr){
  return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5]      

更多​

​reduce()​

​​方法的使用：《數組reduce()方法的妙用》

1.3 join + split

​

​join()​

​方法和上面的toString方法類似，都能将數組轉化為字元串

function flatten(arr) {
    return arr.join(',').split(',').map( item => parseInt(item) )
}      

1.4 遞歸 + 循環

function flatten(arr) {
    var res = [];
    arr.map(item => {
        if(Array.isArray(item)) {
            res = res.concat(flatten(item));
        } else {
            res.push(item);
        }
    });
    return res;
}      

1.5 擴充運算符

​

​...​

​擴充運算符可以取出參數的所有的可以周遊的對象，并拷貝到目前的對象中

let arr = [1, [2, 3, [4, 5]]] 
   function flatten(arr) {
     while (arr.some(item => Array.isArray(item))) {
       arr = [].concat(...arr);
     }
     return arr;
   }
   console.log(flatten(arr)); // [1, 2, 3, 4, 5]      

1.6 flat()

​

​flat()​

​是ES6中的一個數組方法，該方法會按照一個可指定的深度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. 對象扁平化

let obj = { a: { d: 1 }, 
            d:  2, 
            e: [1, 2] 
          }
function flatten(data) {
    var result = {};
    function recurse(cur, prop) {
        // 如果輸入進來的是不是對象，就将其放在數組中，傳回
        if (Object(cur) !== cur) {
            result[prop] = cur;
        // 如果輸入進來的是數組，長度不為0就遞歸數組，得出結果
        } else if (Array.isArray(cur)) {
            for (var i = 0, len = cur.length; i < len; i++)
                recurse(cur[i], prop + "[" + i + "]");
            if (len == 0)  result[prop] = [];
        } else {
            var isEmpty = true;
            for (var p in cur) {
                isEmpty = false;
                recurse(cur[p], prop ? prop + "." + p : p);
            }
            if (isEmpty && prop)
                result[prop] = {};
        }
    }
    recurse(data, "");
    return result;
};
console.log(flatten(obj))  // {a.d: 1, d: 2, e[0]: 1, e[1]: 2}