【轉載】原文地址：https://juejin.im/post/5dff18a4e51d455804256d31

前言

前段時間秋招面嗶哩嗶哩的時候，面試官問：如何實現 flat 方法？當時手寫的并不完美，后來回盤復習，發現面試要求手寫數組拍平（扁平化） flat 方法的面試官不在少數。其中包括：拼多多、小米、美團、滴滴、shopee、有贊等。手寫 flat 方法是一道非常基礎的面試題，通常出現在筆試或者第一輪面試當中，主要考察基本的手寫代碼的能力。今天就從了解 flat 特性到實現 flat 再到接住面試官的連環追問重新學習一遍數組拍平（扁平化） flat 方法吧。

一段代碼總結 Array.prototype.flat() 特性

注：數組拍平方法Array.prototype.flat() 也叫數組扁平化、數組拉平、數組降維。 本文統一叫：數組拍平

const animals = ["??", ["??", "??"], ["??", ["??", ["??"]], "??"]];

// 不傳參數時，默認“拉平”一層
animals.flat();
// ["??", "??", "??", "??", ["??", ["??"]], "??"]

// 傳入一個整數參數，整數即“拉平”的層數
animals.flat(2);
// ["??", "??", "??", "??", "??", ["??"], "??"]

// Infinity 關鍵字作為參數時，無論多少層嵌套，都會轉為一維數組
animals.flat(Infinity);
// ["??", "??", "??", "??", "??", "??", "??"]

// 傳入 <=0 的整數將返回原數組，不“拉平”
animals.flat(0);
animals.flat(-10);
// ["??", ["??", "??"], ["??", ["??", ["??"]], "??"]];

// 如果原數組有空位，flat()方法會跳過空位。
["??", "??", "??", "??",,].flat();
// ["??", "??", "??", "??"]

Array.prototype.flat() 特性總結

Array.prototype.flat() 用于將嵌套的數組“拉平”，變成一維的數組。該方法返回一個新數組，對原數據沒有影響。

不傳參數時，默認“拉平”一層，可以傳入一個整數，表示想要“拉平”的層數。

傳入<=0的整數將返回原數組，不“拉平”

Infinity 關鍵字作為參數時，無論多少層嵌套，都會轉為一維數組

如果原數組有空位，Array.prototype.flat()會跳過空位。

面試官 N 連問

第一問：實現一個簡單的數組拍平 flat 函數

首先，我們將花一點篇幅來探討如何實現一個簡單的數組拍平 flat 函數，詳細介紹多種實現的方案，然后再嘗試接住面試官的連環追問。

實現思路

如何實現呢，思路非常簡單：實現一個有數組拍平功能的 flat函數，我們要做的就是在數組中找到是數組類型的元素，然后將他們展開。這就是實現數組拍平 flat 方法的關鍵思路。

有了思路，我們就需要解決實現這個思路需要克服的困難：

第一個要解決的就是遍歷數組的每一個元素；

第二個要解決的就是判斷元素是否是數組；

第三個要解決的就是將數組的元素展開一層；

遍歷數組的方案

遍歷數組并取得數組元素的方法非常之多，包括且不限于下面幾種：

for 循環

for...of

for...in

forEach()

entries()

keys()

values()

reduce()

[map()]()

const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, "string", { name: "彈鐵蛋同學" }];
// 遍歷數組的方法有太多，本文只枚舉常用的幾種
// 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", { name: "彈鐵蛋同學" }];
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() 方法用于合并兩個或多個數組，在拼接的過程中加上擴展運算符會展開一層數組。詳細見下面的代碼。

concat +apply

主要是利用apply 在綁定作用域時，傳入的第二個參數是一個數組或者類數組對象，其中的數組元素將作為單獨的參數傳給func 函數。也就是在調用apply 函數的過程中，會將傳入的數組一個一個的傳入到要執行的函數中，也就是相當對數組進行了一層的展開。

toString + split

不推薦使用 toString + split 方法，因為操作字符串是和危險的事情，在上一文章中我做了一個操作字符串的案例還被許多小伙伴們批評了。如果數組中的元素所有都是數字的話，toString +split 是可行的，并且是一步搞定。

const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, "string", { name: "彈鐵蛋同學" }];
// 擴展運算符 + concat
[].concat(...arr)
// [1, 2, 3, 4, 1, 2, 3, [1, 2, 3, [1, 2, 3]], 5, "string", { name: "彈鐵蛋同學" }];

// 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))
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3]

總結完要解決的三大困難，那我們就可以非常輕松的實現一版數組拍平 flat 函數了。

const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, "string", { name: "彈鐵蛋同學" }];
// concat + 遞歸
function flat(arr) {
  let arrResult = [];
  arr.forEach(item => {
    if (Array.isArray(item)) {
      arrResult = arrResult.concat(arguments.callee(item));   // 遞歸
      // 或者用擴展運算符
      // arrResult.push(...arguments.callee(item));
    } else {
      arrResult.push(item);
    }
  });
  return arrResult;
}
flat(arr)
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { name: "彈鐵蛋同學" }];

到這里，恭喜你成功得到了面試官對你手撕代碼能力的基本認可??。但是面試官往往會不止于此，將繼續考察面試者的各種能力。

第二問：用 reduce 實現flat 函數

我見過很多的面試官都很喜歡點名道姓的要面試者直接用 reduce 去實現 flat 函數。想知道為什么？文章后半篇我們考慮數組空位的情況的時候就知道為啥了。其實思路也是一樣的。

const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, "string", { name: "彈鐵蛋同學" }]

// 首先使用 reduce 展開一層
arr.reduce((pre, cur) => pre.concat(cur), []);
// [1, 2, 3, 4, 1, 2, 3, [1, 2, 3, [1, 2, 3]], 5, "string", { name: "彈鐵蛋同學" }];

// 用 reduce 展開一層 + 遞歸
const flat = arr => {
  return arr.reduce((pre, cur) => {
    return pre.concat(Array.isArray(cur) ? flat(cur) : cur);
  }, []);
};
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { name: "彈鐵蛋同學" }];

第三問：使用棧的思想實現 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", { name: "彈鐵蛋同學" }]
flat(arr)
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { name: "彈鐵蛋同學" }];

第四問：通過傳入整數參數控制“拉平”層數

// 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", { name: "彈鐵蛋同學" }]
flat(arr, Infinity);
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { name: "彈鐵蛋同學" }];

第五問：使用 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", { name: "彈鐵蛋同學" }]
// 調用 Generator 函數后，該函數并不執行，返回的也不是函數運行結果，而是一個指向內部狀態的指針對象。
// 也就是遍歷器對象（Iterator Object）。所以我們要用一次擴展運算符得到結果
[...flat(arr, Infinity)]    
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { name: "彈鐵蛋同學" }];

第六問：實現在原型鏈上重寫 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, "string", { name: "彈鐵蛋同學" }]
arr.fakeFlat(Infinity)
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { name: "彈鐵蛋同學" }];

第七問：考慮數組空位的情況

由最開始我們總結的flat 特性知道，flat 函數執行是會跳過空位的。ES5 大多數數組方法對空位的處理都會選擇跳過空位包括：forEach(),filter(), reduce(), every()和some() 都會跳過空位。

所以我們可以利用上面幾種方法來實現 flat 跳過空位的特性

// reduce + 遞歸
Array.prototype.fakeFlat = function(num = 1) {
  if (!Number(num) || Number(num) < 0) {
    return this;
  }
  let arr = [].concat(this);
  return num > 0
    ? arr.reduce(
        (pre, cur) =>
          pre.concat(Array.isArray(cur) ? cur.fakeFlat(--num) : cur),
        []
      )
    : arr.slice();
};
const arr = [1, [3, 4], , ,];
arr.fakeFlat()
// [1, 3, 4]

// foEach + 遞歸
Array.prototype.fakeFlat = function(num = 1) {
  if (!Number(num) || Number(num) < 0) {
    return this;
  }
  let arr = [];
  this.forEach(item => {
    if (Array.isArray(item)) {
      arr = arr.concat(item.fakeFlat(--num));
    } else {
      arr.push(item);
    }
  });
  return arr;
};
const arr = [1, [3, 4], , ,];
arr.fakeFlat()
// [1, 3, 4]

擴展閱讀：由于空位的處理規則非常不統一，所以建議避免出現空位。

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。

總結

面試官現場考察一道寫代碼的題目，其實不僅僅是寫代碼，在寫代碼的過程中會遇到各種各樣的知識點和代碼的邊界情況。雖然大多數情況下，面試官不會那么變態，就 flat 實現去連續追問面試者，并且手撕好幾個版本，但面試官會要求在你寫的那版代碼的基礎上再寫出一個更完美的版本是常有的事情。只有我們沉下心來把基礎打扎實，不管面試官如何追問，我們都能自如的應對。flat 的實現絕對不會只有文中列出的這幾個版本，敲出自己的代碼是最好的進步

原文地址：https://juejin.im/post/5dff18a4e51d455804256d31

學習地址

image

END

image