一文搞定數組扁平化（超全面數組拉平方案及實現）

前言

面試手寫代碼在大廠面試中很是常見，秋招中面試小米就手寫了一道flat實現的代碼題，當時經過簡單遍歷+遞歸方式實現了數組扁平化邏輯，但沒有考慮多種實現方案及其邊界條件(主要是對所涉及到高階函數的知識點不夠熟練，也沒有考慮空位處理)，如今從頭梳理一下，並儘量全面地總結數組扁平化的實現方案。前端

數組扁平化

數組扁平化即將一個嵌套多層的數組array(嵌套能夠是任意層數)轉換爲只有一層的數組，如將數組[1,[2,[3,[4,5]]]]轉換爲[1,2,3,4,5]。面試

最直接的數組扁平化方案是使用Array.prototype.flat()方法(兼容性差)，其次是經過遍歷數組元素遞歸實現每一層的數組拉平。編程

00x1 Array.prototype.flat()

按照一個可指定的深度遞歸遍歷數組，並將全部元素與遍歷到的子數組中的元素合併爲一個新數組返回，對原數據沒有影響。數組

語法：var newArray = arr.flat([depth])

說明：

depth爲指定要提取嵌套數組的結構深度，默認值爲1。
參數depth值 <=0 時返回原數組；
參數depth爲Infinity 關鍵字時，不管多少層嵌套，都會轉爲一維數組，
flat()方法會移除數組中的空項，即原數組有空位，會跳過這個空位。

代碼示例：

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

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//使用 Infinity，可展開任意深度的嵌套數組
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

var arr5 = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["string", { type: "對象" }]];
arr5.flat(Infinity);
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { type: "對象" }];

// 移除數組中的空項
var arr6 = [1, 2, , 4, 5];
arr6.flat();
// [1, 2, 4, 5]

複製代碼

數組扁平化flat函數封裝實現方案

實現思路

首先遍歷獲取數組的每個元素，其次判斷該元素類型是否爲數組，最後將數組類型的元素展開一層。同時遞歸遍歷獲取該數組的每一個元素進行拉平處理。markdown

遍歷數組方案

for循環
for...of
for...in
entries()
keys()
values()
forEach()
map()
reduce()

const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["string", { type: "對象" }]];
// 本文只枚舉經常使用的幾種數組遍歷方法
// for 循環
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
// for...of
for (let value of arr) {
  console.log(value);
}
// for...in
for (let i in arr) {
  console.log(arr[i]);
}
// forEach 循環
arr.forEach(value => {
  console.log(value);
});
// entries（）
for (let [index, value] of arr.entries()) {
  console.log(value);
}
// keys()
for (let index of arr.keys()) {
  console.log(arr[index]);
}
// values()
for (let value of arr.values()) {
  console.log(value);
}
// reduce()
arr.reduce((pre, cur) => {
  console.log(cur);
}, []);
// map()
arr.map(value => console.log(value));
複製代碼

判斷數組元素是否爲數組

instanceof
constructor
Object.prototype.toString
isArray

const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["string", { type: "對象" }]];
arr instanceof Array
// true
arr.constructor === Array
// true
Object.prototype.toString.call(arr) === '[object Array]'
// true
Array.isArray(arr)
// true
複製代碼

注：

instanceof 操做符是假定只有一種全局環境，若是網頁中包含多個框架，多個全局環境，若是你從一個框架向另外一個框架傳入一個數組，那麼傳入的數組與在第二個框架中原生建立的數組分別具備各自不一樣的構造函數。(因此在這種狀況下會不許確)
typeof 操做符對數組取類型將返回 object
constructor能夠被重寫，不能確保必定是數組

const str = 'abc';
str.constructor = Array;
str.constructor === Array 
// true
複製代碼

數組元素展開一層方案

擴展運算符 + concat
concat +apply
toString + split

不推薦使用toString+split方法，操做字符串是很危險的，數組中元素都是數字時可行。app

const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["string", { type: "對象" }]];
// 擴展運算符 + concat
[].concat(...arr)
// [1, 2, 3, 4, 1, 2, 3, [1, 2, 3, [1, 2, 3]], 5, "string", { type: "對象" }];

// concat + apply
[].concat.apply([], arr);
// [1, 2, 3, 4, 1, 2, 3, [1, 2, 3, [1, 2, 3]], 5, "string", { name: "對象" }];

// toString  + split
const arr2 =[1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]]]
arr2.toString().split(',').map(v=>parseInt(v))
// arr2.toString().split(',').map(v => +v)
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3]
複製代碼

00x1 手寫一個最簡單的flat函數實現

這裏使用ES6語法中的箭頭函數定義函數，注意箭頭函數沒有arguments，caller，callee，同時要區分於ES5使用function的兩種函數聲明定義方式。框架

const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["string", { type: "對象" }]];
const flat = (arr) => {
  let arrResult = []
  for(let i=0, len=arr.length; i<len; i++){
    if(Array.isArray(arr[i])){
      arrResult.push(...flat(arr[i]))
      // arrResult = arrResult.concat(flat(arr[i]))
    }else{
      arrResult.push(arr[i])
    }
  }
  return arrResult;
}
flat(arr)
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { type: "對象" }]
複製代碼

循環部分同理可用for...of / for...in 來實現。 OK，如今你已經具有了基本的手撕代碼能力，但面試官經常但願你能掌握各類高階函數方法的應用。接下來繼續列舉實現flat的幾種方案。函數

00x2 用map/forEach實現flat函數

仍然是遍歷+循環的原理，這裏循環用map/forEach實現。優化

const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["string", { type: "對象" }]];
const flat = (arr) => {
  let arrResult = []
  arr.map(item => {
    if(Array.isArray(item)){
      arrResult.push(...flat(item))
      // arrResult = arrResult.concat(flat(item))
    }else{
      arrResult.push(item)
    }
  })
  return arrResult;
}
flat(arr)
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { type: "對象" }]
複製代碼

00x3 歸併方法：用reduce實現flat函數

咱們用reduce函數進行遍歷，把prev的初值賦值爲[]，若是當前的值是數組的話，那麼咱們就遞歸遍歷它的孩子，若是當前的值不是數組，那麼咱們就把它拼接進數組裏。this

const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["string", { type: "對象" }]];
function flat(arr) {
  return arr.reduce((prev, cur)=>{
    return prev.concat(Array.isArray(cur)?flat(cur):cur);
  }, [])
}
flat(arr)
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { type: "對象" }]
複製代碼

00x4 用Generator實現flat函數

function* flat(arr, num) {
  if (num === undefined) num = 1;
  for (const item of arr) {
    if (Array.isArray(item) && num > 0) {   // num > 0
      yield* flat(item, num - 1);
    } else {
      yield item;
    }
  }
}
const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["string", { type: "對象" }]]
// 調用 Generator 函數後，該函數並不執行，返回的也不是函數運行結果，而是一個指向內部狀態的指針對象。
// 也就是遍歷器對象（Iterator Object）。因此咱們要用一次擴展運算符獲得結果
[...flat(arr, Infinity)]    
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { type: "對象" }]
複製代碼

00x5 在原型鏈上重寫 flat 函數

Array.prototype.fakeFlat = function(num = 1) {
  if (!Number(num) || Number(num) < 0) {
    return this;
  }
  let arr = this.concat();    // 得到調用 fakeFlat 函數的數組
  while (num > 0) {           
    if (arr.some(x => Array.isArray(x))) {
      arr = [].concat.apply([], arr);	// 數組中還有數組元素的話而且 num > 0，繼續展開一層數組 
    } else {
      break; // 數組中沒有數組元素而且無論 num 是否依舊大於 0，中止循環。
    }
    num--;
  }
  return arr;
};
const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["type", { name: "對象" }]]
arr.fakeFlat(Infinity)
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { type: "對象" }]
複製代碼

00x6 使用棧的思想實現 flat 函數

// 棧思想
function flat(arr) {
  const result = []; 
  const stack = [].concat(arr);  // 將數組元素拷貝至棧，直接賦值會改變原數組
  //若是棧不爲空，則循環遍歷
  while (stack.length !== 0) {
    const val = stack.pop(); 
    if (Array.isArray(val)) {
      stack.push(...val); //若是是數組再次入棧，而且展開了一層
    } else {
      result.unshift(val); //若是不是數組就將其取出來放入結果數組中
    }
  }
  return result;
}
const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["string", { type: "對象" }]]
flat(arr)
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { type: "對象" }]
複製代碼

00x7 經過傳入整數參數控制「拉平」層數

// reduce + 遞歸
function flat(arr, num = 1) {
  return num > 0
    ? arr.reduce(
        (pre, cur) =>
          pre.concat(Array.isArray(cur) ? flat(cur, num - 1) : cur),
        []
      )
    : arr.slice();
}
const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["string", { type: "對象" }]]
flat(arr, Infinity);
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { type: "對象" }]
複製代碼

00x8 數組空位的處理

flat 函數執行是會跳過空位的。

ES5 對空位的處理，大多數狀況下會忽略空位。

forEach(), filter(), reduce(), every() 和 some() 都會跳過空位。
map() 會跳過空位，但會保留這個值。
join() 和 toString() 會將空位視爲 undefined，而 undefined 和 null 會被處理成空字符串。

ES6 明確將空位轉爲 undefined。

entries()、keys()、values()、find()和 findIndex() 會將空位處理成 undefined。
for...of 循環會遍歷空位。
fill() 會將空位視爲正常的數組位置。
copyWithin() 會連空位一塊兒拷貝。
擴展運算符（...）也會將空位轉爲 undefined。
Array.from 方法會將數組的空位，轉爲 undefined。

00x1 for...of 循環遍歷實現flat函數

const arr1 = [1, 2, 3, , , 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["string", { type: "對象" }]];
const flat = (arr) => {
  let arrResult = []
  for(let item of arr){
    if(Array.isArray(item)){
      arrResult.push(...flat(item))
      // arrResult = arrResult.concat(flat(arr[i]))
    }else{
      arrResult.push(item)
    }
  } return arrResult;
}
flat(arr1)
// [1, 2, 3, undefined, undefined, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { type: "對象" }]
複製代碼

總結

如今的前端面試中，大廠面試官基本都會考察手撕代碼的能力，不只要能答得上來實現數組扁平化的幾種方案，也不只是要能手寫實現，還要能理解，能講清楚其中包涵的詳細知識點及代碼的邊界狀況，能在基礎版本上再寫出一個更完美的版本。

而咱們在寫代碼的過程當中，也要養成這樣的習慣，多問問本身還有沒有別的替代實現方案，還能不能進一步優化，才能寫出優美漂亮的代碼，編程能力天然而然也就提升啦！