你不知道的JavaScript數組扁平化五種方法

JavaScript數組扁平化

對於下邊這個深層嵌套數組，我們在某些環境可能需要將它進行扁平化（轉換爲一維數組），比如評論系統種，評論數據可能就會深層嵌套。所以我給大家帶來了下邊幾種方法。

let arr = [1, [2, 3, 4], [3, 5, [1, [4]]]];

1. ES6中Array.prototype.flat()函數

對兼容性要求較高，不兼容ie，且要求node版本11以上。

執行時間：0.190ms （nodejs版本12.16.1）

arr.flat(Infinity); 
// [1, 2, 3, 4, 3, 5, 1, 4]

2. 轉換爲字符串方法

• toString()方法直接轉換爲不帶"[]"的字符串，通過split()方法分割爲數組，最後循環將每一個字符串元素轉換爲數字類型

  執行時間：0.156ms

  arr.toString().split(',').map(item=>parseFloat(item));  
  // [ 1, 2, 3, 4, 3, 5, 1, 4 ]
  

• 使用JSON.stringify()方法轉換爲帶"[]“的字符串，然後通過replace+正則去掉”[]"

  執行時間：0.391ms

  JSON.stringify(arr).replace(/[\[\]]/g, '').split(',').map(item=>parseFloat(item)); 
  // [ 1, 2, 3, 4, 3, 5, 1, 4 ]
  

3. 循環驗證數組元素是否爲數組

[].concat(...arr)可以展開一層數組

執行時間：0.246ms

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

4. eval()+模板字符串函數

執行時間：0.124ms

eval(`[${arr}]`);  
// [ 1, 2, 3, 4, 3, 5, 1, 4 ]

5. 遞歸

執行時間：0.209ms

function myflat(arr){   
  let newArr = [];
  let flat = (arr)=>{
    for(let i=0; i<arr.length; i++){
      if(Array.isArray(arr[i])){
        newArr.concat(flat(arr[i]));
        continue;
      }
      newArr.push(arr[i]);
    }
    return newArr;
  }
  return flat(arr);
}
myflat(arr);
// [ 1, 2, 3, 4, 3, 5, 1, 4 ]