JS: 數組扁平化

數組扁平化

1. 什么是數組扁平化？

   數組扁平化就是將一個多層嵌套的數組 (Arrary) 轉化為只有一層。

   // 多層嵌套
   [1, 2, [3, 4]]
   
   // 一層
   [1, 2, 3, 4]
   

2. 遞歸實現

   思路是先循環數組，遇到嵌套就遞歸。

   function flatten(arr) {
       let res = [];
       for (let i=0; i<arr.length;  i++) {
           if (Array.isArray(arr[i])) {
               res = res.concat(flatten(arr[i]));
           } else {
               res.push(arr[i]);
           }
       }
       return res;
   }
   
   flatten([1, 2, [3, 4]]); // [1, 2, 3, 4]
   

3. reduce實現

   reduce方法接受一個函數作為參數，這個函數作為一個累加器，從左到右遍歷 (升序) 整個類型數組，最后將結果匯總為單個值返回。

   reduce方法還接受一個可選的參數initialValue，作為第一次調用 callback函數時的第一個參數的值。 如果沒有提供初始值，則將使用數組中的第一個元素。 在沒有初始值的空數組上調用 reduce 將報錯。

   reducer 函數接收4個參數:

   1. Accumulator (acc) (累計器)
   2. Current Value (cur) (當前值)
   3. Current Index (idx) (當前索引) 可選
   4. Source Array (src) (源數組) 可選

   reducer 函數的返回值分配給累計器，該返回值在數組的每個迭代中被記住，並最后成為最終的單個結果值。

   function flatten(arr) {
       return arr.reduce((acc, cur)=> {
           // 遇到嵌套就遞歸
           return acc.concat(Array.isArray(cur) ? flatten(cur) : cur);
       }, []);
   }
   
   flatten([1, 2, [3, 4]]); // [1, 2, 3, 4]
   

4. 使用擴展運算符...

   some() 方法測試數組中的某些元素是否通過由提供的函數實現的測試，返回boolean值。

   注意：對於放在空數組上的任何條件，此方法返回false。

   function flatten(arr) {
       // 循環展開嵌套的數組，直到沒有嵌套
       while(arr.some(item => Array.isArray(item))) {
           arr = [].concat(...arr);
       }
       return arr;
   }
   
   flatten([1, 2, [3, [5, 6], 4]]); // [1, 2, 3, 5, 6, 4]
   

5. 去重

   數組去重要考慮的太多了，這里只簡單的用Set返回一個不重復的值

   function flatten(arr) {
       // 循環展開嵌套的數組，直到沒有嵌套
       while(arr.some(item => Array.isArray(item))) {
           arr = [].concat(...arr);
       }
       return Array.from(new Set(arr));;
   }
   
   flatten([1, 1, 2, [3, [3, 5, 6], 4]]); // [1, 2, 3, 5, 6, 4]
   

6. 排序

   扁平化的同時實現排序也是很常見的，前面提到的去重就可以在排序的同時進行，但排序要看具體需求來進行封裝方法，這里就不進行探討了。