【轉(zhuǎn)載】原文地址：https://juejin.im/post/5dff18a4e51d455804256d31
前言
前段時間秋招面嗶哩嗶哩的時候，面試官問：如何實現(xiàn) flat 方法？當(dāng)時手寫的并不完美，后來回盤復(fù)習(xí)，發(fā)現(xiàn)面試要求手寫數(shù)組拍平（扁平化） flat 方法的面試官不在少數(shù)。其中包括：拼多多、小米、美團、滴滴、shopee、有贊等。手寫 flat 方法是一道非常基礎(chǔ)的面試題，通常出現(xiàn)在筆試或者第一輪面試當(dāng)中，主要考察基本的手寫代碼的能力。今天就從了解 flat 特性到實現(xiàn) flat 再到接住面試官的連環(huán)追問重新學(xué)習(xí)一遍數(shù)組拍平（扁平化） flat 方法吧。
一段代碼總結(jié) Array.prototype.flat() 特性
注：數(shù)組拍平方法Array.prototype.flat() 也叫數(shù)組扁平化、數(shù)組拉平、數(shù)組降維。 本文統(tǒng)一叫：數(shù)組拍平
const animals = ["??", ["??", "??"], ["??", ["??", ["??"]], "??"]];
// 不傳參數(shù)時，默認“拉平”一層
animals.flat();
// ["??", "??", "??", "??", ["??", ["??"]], "??"]
// 傳入一個整數(shù)參數(shù)，整數(shù)即“拉平”的層數(shù)
animals.flat(2);
// ["??", "??", "??", "??", "??", ["??"], "??"]
// Infinity 關(guān)鍵字作為參數(shù)時，無論多少層嵌套，都會轉(zhuǎn)為一維數(shù)組
animals.flat(Infinity);
// ["??", "??", "??", "??", "??", "??", "??"]
// 傳入 <=0 的整數(shù)將返回原數(shù)組，不“拉平”
animals.flat(0);
animals.flat(-10);
// ["??", ["??", "??"], ["??", ["??", ["??"]], "??"]];
// 如果原數(shù)組有空位，flat()方法會跳過空位。
["??", "??", "??", "??",,].flat();
// ["??", "??", "??", "??"]
Array.prototype.flat() 特性總結(jié)
Array.prototype.flat() 用于將嵌套的數(shù)組“拉平”，變成一維的數(shù)組。該方法返回一個新數(shù)組，對原數(shù)據(jù)沒有影響。
不傳參數(shù)時，默認“拉平”一層，可以傳入一個整數(shù)，表示想要“拉平”的層數(shù)。
傳入<=0的整數(shù)將返回原數(shù)組，不“拉平”
Infinity 關(guān)鍵字作為參數(shù)時，無論多少層嵌套，都會轉(zhuǎn)為一維數(shù)組
如果原數(shù)組有空位，Array.prototype.flat()會跳過空位。
面試官 N 連問
第一問：實現(xiàn)一個簡單的數(shù)組拍平 flat 函數(shù)
首先，我們將花一點篇幅來探討如何實現(xiàn)一個簡單的數(shù)組拍平 flat 函數(shù)，詳細介紹多種實現(xiàn)的方案，然后再嘗試接住面試官的連環(huán)追問。
實現(xiàn)思路
如何實現(xiàn)呢，思路非常簡單：實現(xiàn)一個有數(shù)組拍平功能的 flat函數(shù)，我們要做的就是在數(shù)組中找到是數(shù)組類型的元素，然后將他們展開。這就是實現(xiàn)數(shù)組拍平 flat 方法的關(guān)鍵思路。
有了思路，我們就需要解決實現(xiàn)這個思路需要克服的困難：
第一個要解決的就是遍歷數(shù)組的每一個元素；
第二個要解決的就是判斷元素是否是數(shù)組；
第三個要解決的就是將數(shù)組的元素展開一層；
遍歷數(shù)組的方案
遍歷數(shù)組并取得數(shù)組元素的方法非常之多，包括且不限于下面幾種：
for 循環(huán)
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: "彈鐵蛋同學(xué)" }];
// 遍歷數(shù)組的方法有太多，本文只枚舉常用的幾種
// for 循環(huán)
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 循環(huán)
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));
只要是能夠遍歷數(shù)組取到數(shù)組中每一個元素的方法，都是一種可行的解決方案。
判斷元素是數(shù)組的方案
instanceof
constructor
Object.prototype.toString
isArray
const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, "string", { name: "彈鐵蛋同學(xué)" }];
arr instanceof Array
// true
arr.constructor === Array
// true
Object.prototype.toString.call(arr) === '[object Array]'
// true
Array.isArray(arr)
// true
說明：
instanceof 操作符是假定只有一種全局環(huán)境，如果網(wǎng)頁中包含多個框架，多個全局環(huán)境，如果你從一個框架向另一個框架傳入一個數(shù)組，那么傳入的數(shù)組與在第二個框架中原生創(chuàng)建的數(shù)組分別具有各自不同的構(gòu)造函數(shù)。（所以在這種情況下會不準確）
typeof操作符對數(shù)組取類型將返回 object
因為constructor 可以被重寫，所以不能確保一定是數(shù)組。
const str = 'abc';
str.constructor = Array;
str.constructor === Array
// true
將數(shù)組的元素展開一層的方案
擴展運算符 + concat
concat() 方法用于合并兩個或多個數(shù)組，在拼接的過程中加上擴展運算符會展開一層數(shù)組。詳細見下面的代碼。
concat +apply
主要是利用apply 在綁定作用域時，傳入的第二個參數(shù)是一個數(shù)組或者類數(shù)組對象，其中的數(shù)組元素將作為單獨的參數(shù)傳給func 函數(shù)。也就是在調(diào)用apply 函數(shù)的過程中，會將傳入的數(shù)組一個一個的傳入到要執(zhí)行的函數(shù)中，也就是相當(dāng)對數(shù)組進行了一層的展開。
toString + split
不推薦使用 toString + split 方法，因為操作字符串是和危險的事情，在上一文章中我做了一個操作字符串的案例還被許多小伙伴們批評了。如果數(shù)組中的元素所有都是數(shù)字的話，toString +split 是可行的，并且是一步搞定。
const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, "string", { name: "彈鐵蛋同學(xué)" }];
// 擴展運算符 + concat
[].concat(...arr)
// [1, 2, 3, 4, 1, 2, 3, [1, 2, 3, [1, 2, 3]], 5, "string", { name: "彈鐵蛋同學(xué)" }];
// concat + apply
[].concat.apply([], arr);
// [1, 2, 3, 4, 1, 2, 3, [1, 2, 3, [1, 2, 3]], 5, "string", { name: "彈鐵蛋同學(xué)" }];
// 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]
總結(jié)完要解決的三大困難，那我們就可以非常輕松的實現(xiàn)一版數(shù)組拍平 flat 函數(shù)了。
const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, "string", { name: "彈鐵蛋同學(xué)" }];
// 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: "彈鐵蛋同學(xué)" }];
到這里，恭喜你成功得到了面試官對你手撕代碼能力的基本認可??。但是面試官往往會不止于此，將繼續(xù)考察面試者的各種能力。
第二問：用 reduce 實現(xiàn)flat 函數(shù)
我見過很多的面試官都很喜歡點名道姓的要面試者直接用 reduce 去實現(xiàn) flat 函數(shù)。想知道為什么？文章后半篇我們考慮數(shù)組空位的情況的時候就知道為啥了。其實思路也是一樣的。
const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, "string", { name: "彈鐵蛋同學(xué)" }]
// 首先使用 reduce 展開一層
arr.reduce((pre, cur) => pre.concat(cur), []);
// [1, 2, 3, 4, 1, 2, 3, [1, 2, 3, [1, 2, 3]], 5, "string", { name: "彈鐵蛋同學(xué)" }];
// 用 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: "彈鐵蛋同學(xué)" }];
第三問：使用棧的思想實現(xiàn) flat 函數(shù)
// 棧思想
function flat(arr) {
const result = [];
const stack = [].concat(arr); // 將數(shù)組元素拷貝至棧，直接賦值會改變原數(shù)組
//如果棧不為空，則循環(huán)遍歷
while (stack.length !== 0) {
const val = stack.pop();
if (Array.isArray(val)) {
stack.push(...val); //如果是數(shù)組再次入棧，并且展開了一層
} else {
result.unshift(val); //如果不是數(shù)組就將其取出來放入結(jié)果數(shù)組中
}
}
return result;
}
const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, "string", { name: "彈鐵蛋同學(xué)" }]
flat(arr)
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { name: "彈鐵蛋同學(xué)" }];
第四問：通過傳入整數(shù)參數(shù)控制“拉平”層數(shù)
// 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: "彈鐵蛋同學(xué)" }]
flat(arr, Infinity);
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { name: "彈鐵蛋同學(xué)" }];
第五問：使用 Generator 實現(xiàn) flat 函數(shù)
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: "彈鐵蛋同學(xué)" }]
// 調(diào)用 Generator 函數(shù)后，該函數(shù)并不執(zhí)行，返回的也不是函數(shù)運行結(jié)果，而是一個指向內(nèi)部狀態(tài)的指針對象。
// 也就是遍歷器對象（Iterator Object）。所以我們要用一次擴展運算符得到結(jié)果
[...flat(arr, Infinity)]
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { name: "彈鐵蛋同學(xué)" }];
第六問：實現(xiàn)在原型鏈上重寫 flat 函數(shù)
Array.prototype.fakeFlat = function(num = 1) {
if (!Number(num) || Number(num) < 0) {
return this;
}
let arr = this.concat(); // 獲得調(diào)用 fakeFlat 函數(shù)的數(shù)組
while (num > 0) {
if (arr.some(x => Array.isArray(x))) {
arr = [].concat.apply([], arr); // 數(shù)組中還有數(shù)組元素的話并且 num > 0，繼續(xù)展開一層數(shù)組
} else {
break; // 數(shù)組中沒有數(shù)組元素并且不管 num 是否依舊大于 0，停止循環(huán)。
}
num--;
}
return arr;
};
const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, "string", { name: "彈鐵蛋同學(xué)" }]
arr.fakeFlat(Infinity)
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { name: "彈鐵蛋同學(xué)" }];
第七問：考慮數(shù)組空位的情況
由最開始我們總結(jié)的flat 特性知道，flat 函數(shù)執(zhí)行是會跳過空位的。ES5 大多數(shù)數(shù)組方法對空位的處理都會選擇跳過空位包括：forEach(),filter(), reduce(), every()和some() 都會跳過空位。
所以我們可以利用上面幾種方法來實現(xiàn) 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]
擴展閱讀：由于空位的處理規(guī)則非常不統(tǒng)一，所以建議避免出現(xiàn)空位。
ES5 對空位的處理，就非常不一致，大多數(shù)情況下會忽略空位。
forEach(), filter(), reduce(), every() 和 some()都會跳過空位。
map()會跳過空位，但會保留這個值。
join() 和 toString() 會將空位視為 undefined，而 undefined 和 null 會被處理成空字符串。
ES6 明確將空位轉(zhuǎn)為 undefined。
entries()、keys()、values()、find()和 findIndex() 會將空位處理成 undefined。
for...of 循環(huán)會遍歷空位。
fill()會將空位視為正常的數(shù)組位置。
copyWithin()會連空位一起拷貝。
擴展運算符（...）也會將空位轉(zhuǎn)為 undefined。
Array.from方法會將數(shù)組的空位，轉(zhuǎn)為undefined。
總結(jié)
面試官現(xiàn)場考察一道寫代碼的題目，其實不僅僅是寫代碼，在寫代碼的過程中會遇到各種各樣的知識點和代碼的邊界情況。雖然大多數(shù)情況下，面試官不會那么變態(tài)，就 flat 實現(xiàn)去連續(xù)追問面試者，并且手撕好幾個版本，但面試官會要求在你寫的那版代碼的基礎(chǔ)上再寫出一個更完美的版本是常有的事情。只有我們沉下心來把基礎(chǔ)打扎實，不管面試官如何追問，我們都能自如的應(yīng)對。flat 的實現(xiàn)絕對不會只有文中列出的這幾個版本，敲出自己的代碼是最好的進步
原文地址：https://juejin.im/post/5dff18a4e51d455804256d31
