JavaScript面試之如何實(shí)現(xiàn)數(shù)組拍平（扁平化）方法
1 什么叫數(shù)組拍平？
概念很簡(jiǎn)單，意思是將一個(gè)“多維”數(shù)組降維，比如：
// 原數(shù)組是一個(gè)“三維”數(shù)組 const array = [1, 2, [3, 4, [5, 6], 7], 8, 9] // 可以降成二維 newArray1 = [1, 2, 3, 4, [5, 6], 7, 8, 9] // 也可以降成一維 newArray2 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
數(shù)組拍平也稱數(shù)組扁平化、數(shù)組降維。
2 JS標(biāo)準(zhǔn)庫(kù)中的數(shù)組拍平方法
JavaScript標(biāo)準(zhǔn)庫(kù)中已經(jīng)實(shí)現(xiàn)了數(shù)組拍平方法Array.prototype.flat()
flat() 方法會(huì)按照一個(gè)可指定的深度遞歸遍歷數(shù)組，并將所有元素與遍歷到的子數(shù)組中的元素合并為一個(gè)新數(shù)組返回。
語(yǔ)法：var newArray = arr.flat([depth])
參數(shù)：depth為可選值，表示要遍歷多維數(shù)組的深度，默認(rèn)值為1?？梢岳斫鉃橄胍归_（或者說(shuō)降維）的層數(shù)。
返回值：遍歷到的元素和子數(shù)組的元素組合成的新數(shù)組
舉例：
const array = [1, 2, [3, 4, [5, 6], 7], 8, 9] const newArray1 = array.flat() // 等價(jià)于array.flat(1)；降1維 // newArray1: [1, 2, 3, 4, [ 5, 6 ], 7, 8, 9] const newArray2 = array.flat(2) // 降2維 // newArray2：[1, 2, 3, 4, 5, 6, 7, 8, 9]
特殊：
depth<=0時(shí)，返回的數(shù)組和原數(shù)組維數(shù)一樣（注意只是維數(shù)一樣，空位情況見(jiàn)第3點(diǎn)）
const array = [1, 2, [3, 4, [5, 6], 7], 8, 9] array.flat(-1) // [1, 2, [3, 4, [5, 6], 7], 8, 9]
depth=Infinity，返回的數(shù)組變成一維
array.flat(Infinity) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
原數(shù)組有空位，flat方法會(huì)消除空位，即使是flat(0)也會(huì)消除空位，所以第1點(diǎn)說(shuō)的是“只是維數(shù)一樣”。并且flat方法展開到哪一層，空位就會(huì)消除到哪一層，再深層的空位不會(huì)消除
const array1 = [1, , 2, [3, ,4, [5, 6], 7], 8, 9] // 注意這個(gè)數(shù)組有兩個(gè)空位 array.flat(0) // [ 1, 2, [ 3, ，4, [ 5, 6 ], 7 ], 8, 9 ] // 第一個(gè)空位沒(méi)了，第二個(gè)空位還在
3 實(shí)現(xiàn)一個(gè)flat方法
flat方法展開一層（降1維）的步驟：遍歷數(shù)組，判斷當(dāng)前元素是否為數(shù)組，如果不是數(shù)組，直接保存；如果是數(shù)組，將其展開后保存
flat方法展開多層（降多維）無(wú)非就是在展開一層的基礎(chǔ)上，使用遞歸將數(shù)組子元素進(jìn)行同樣的操作。
可以將這個(gè)方法拆分成三步：
1、如何遍歷數(shù)組
2、如何判斷元素是否為數(shù)組
3、遞歸
實(shí)現(xiàn)上述三步，將他們組合起來(lái)就可以得到不同的flat實(shí)現(xiàn)
3.1 如何遍歷一個(gè)數(shù)組
方法特別多，這里介紹3類：
1、for相關(guān)
- for 循環(huán)
- for...of
for...in是為遍歷對(duì)象屬性而構(gòu)建的，不建議與數(shù)組一起使用
const array = [1, 2, [3, 4, [5, 6], 7], 8, 9]
// for循環(huán)
for (let i = 0; i < array.length; i++) {
const element = array[i];
}
// for...of
for (const element of array) {
}
2、數(shù)組方法：能直接取到數(shù)組元素的方法
- forEach()
- reduce()
- map()
// forEach()
array.forEach(element => {
});
// reduce()
array.reduce((pre, cur) => {
const element = cur
}, [])
// map()
array.map(element => {
})
3、數(shù)組方法：返回遍歷器(Iterator)對(duì)象的方法
- keys()
- values()
- entries()
// 這三種方式僅僅是獲得遍歷器對(duì)象，還需搭配for...of來(lái)進(jìn)行遍歷
// keys()
for (let i of array.keys()) {
const element = array[i]
}
// values()
for (let element of array.values() ) {
}
// entries()
for (let [i, element] of array.entries()) {
console.log(array[i])
console.log(element)
}
3.2 如何判斷元素是否為數(shù)組
設(shè)有一變量a，判斷其是否為數(shù)組。這里提供4種方法：
- Array有一個(gè)靜態(tài)方法Array.isArray()用于判斷某個(gè)變量是否是一個(gè)數(shù)組
- instanceof運(yùn)算符用于檢測(cè)構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在某個(gè)實(shí)例對(duì)象的原型鏈上。
若a是數(shù)組，則其原型鏈上會(huì)出現(xiàn)Array.prototype - 通過(guò)對(duì)象的constructor判斷（此方法可能失效，因?yàn)閏onstructor可以手動(dòng)更改）
- 通過(guò)Object.prototype.toString()來(lái)判斷，該方法可以返回一個(gè)表示該對(duì)象的字符串
// 方法1 Array.isArray(a) // 方法2 a instanceof Array // 方法3 a.constructor === Array // 方法4 // 使用call來(lái)調(diào)用Object.prototype上的toString方法 Object.prototype.toString.call(a) === '[object Array]' // 不能這么判斷，因?yàn)檫@個(gè)toString已經(jīng)覆蓋了Object.prototype.toString // 只有Object.prototype.toString能正確判斷類型 a.toString()
3.3 遞歸
遞歸：對(duì)子元素進(jìn)行同樣的操作
function flat() {
let res = []
遍歷數(shù)組 {
if (當(dāng)前元素是數(shù)組) {
flat(當(dāng)前元素)得到一維數(shù)組
將一維數(shù)組拼接到res中
} else {
res.push(當(dāng)前元素)
}
}
return res
}
3.4 初步實(shí)現(xiàn)flat方法
挑選遍歷方式和判斷數(shù)組的方式，搭配遞歸就可以初步實(shí)現(xiàn)flat方法，如：
function myFlat(arr) {
let res = [];
for (const item of arr) {
if (Array.isArray(item)) {
res = res.concat(myFlat(item));
// 注意concat方法返回一個(gè)新數(shù)組，不會(huì)改變?cè)瓟?shù)組
} else {
res.push(item);
}
}
return res;
}
myFlat方法可以實(shí)現(xiàn)將"多維"數(shù)組拉平成一維數(shù)組，但是不能指定展開深度depth，并且也無(wú)法處理數(shù)組空位
4 優(yōu)化
4.1 指定展開深度
處理展開深度其實(shí)很簡(jiǎn)單，我們可以增設(shè)一個(gè)遞歸終止條件，即depth<=0，代碼如下：
function myFlat(arr, depth = 1) {
// 若depth<=0，則直接返回
if (depth <= 0) {
return arr
}
let res = [];
for (const item of arr) {
if (Array.isArray(item)) {
// 每次遞歸調(diào)用，將depth-1
res = res.concat(myFlat(item, depth - 1));
} else {
res.push(item);
}
}
return res;
}
4.2 數(shù)組空位處理
事實(shí)上我們應(yīng)該盡量避免出現(xiàn)數(shù)組空位的情況
前面我們提到了遍歷數(shù)組的不同方法，它們對(duì)于數(shù)組空位的處理不盡相同
其中forEach、reduce、map遍歷時(shí)遇到空位會(huì)直接忽略；而for...of則不會(huì)忽略，它遇到空位會(huì)將其當(dāng)作undefined處理
4.2.1 for...of增加空位判斷
因此我們需要改進(jìn)for...of遍歷數(shù)組的myFlat方法：
function myFlat(arr, depth = 1) {
if (depth <= 0) {
return arr;
}
let res = [];
for (const item of arr) {
if (Array.isArray(item)) {
res = res.concat(myFlat(item, depth - 1));
} else {
// 判斷數(shù)組空位
item !== undefined && res.push(item);
}
}
return res;
}
4.2.2 forEach、map方法遍歷
當(dāng)然也可以使用forEach、map方法來(lái)遍歷數(shù)組，這樣就不用手動(dòng)判斷了
但是這里有一個(gè)特殊情況需要考慮，就是當(dāng)depth <= 0時(shí)，我們用filter方法來(lái)消除數(shù)組空位
// forEach
function myFlat(arr, depth = 1) {
if (depth <= 0) {
return arr.filter(item => item !== undefined);
}
let res = [];
arr.forEach((item) => {
if (Array.isArray(item)) {
res = res.concat(myFlat(item, depth - 1));
} else {
res.push(item);
}
});
return res;
}
// map
function myFlat(arr, depth = 1) {
if (depth <= 0) {
return arr.filter(item => item !== undefined);
}
let res = [];
arr.map((item) => {
if (Array.isArray(item)) {
res = res.concat(myFlat(item, depth - 1));
} else {
res.push(item);
}
});
return res;
}
4.2.3 reduce方法
其中，使用reduce方法實(shí)現(xiàn)的最為簡(jiǎn)潔，也是面試中?？嫉姆椒ㄖ?/p>
function myFlat(arr, depth = 1) {
return depth > 0
? arr.reduce(
(pre, cur) =>
pre.concat(Array.isArray(cur) ? myFlat(cur, depth - 1) : cur),
[]
)
: arr.filter((item) => item !== undefined);
}
5 其他
5.1 棧
理論上，遞歸方法通常可以轉(zhuǎn)換成非遞歸方法，即使用棧
function myFlat(arr) {
let res = [];
const stack = [].concat(arr);
while (stack.length > 0) {
const item = stack.pop();
if (Array.isArray(item)) {
// 用擴(kuò)展運(yùn)算符展開一層
stack.push(...item);
} else {
item !== undefined && res.unshift(item);
}
}
return res;
}
但是此方法不能指定展開深度，只能徹底展開成一維數(shù)組
5.2 改進(jìn)
針對(duì)棧不能指定展開深度的缺點(diǎn)進(jìn)行改進(jìn)，代碼如下：
function myFlat(arr, depth = 1) {
if (depth <= 0) {
return arr.filter((item) => item !== undefined);
}
let res;
let queue = [].concat(arr);
while (depth > 0) {
res = [];
queue.forEach((item) => {
if (Array.isArray(item)) {
// 注意用擴(kuò)展運(yùn)算符將數(shù)組展開前先用filter方法去掉空位
res.push(...item.filter((e) => e !== undefined));
} else {
res.push(item);
}
});
depth--;
queue = res;
}
return res;
}
總結(jié)
到此這篇關(guān)于JavaScript面試之如何實(shí)現(xiàn)數(shù)組拍平（扁平化）方法的文章就介紹到這了,更多相關(guān)JS實(shí)現(xiàn)數(shù)組扁平化方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕移動(dòng)view標(biāo)簽的位置功能示例【附demo源碼下載】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕移動(dòng)view標(biāo)簽的位置功能,涉及微信小程序事件綁定與this.setData動(dòng)態(tài)修改data數(shù)值進(jìn)而改變view標(biāo)簽樣式的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
JavaScript給url網(wǎng)址進(jìn)行encode編碼的方法
這篇文章主要介紹了JavaScript給url網(wǎng)址進(jìn)行encode編碼的方法,實(shí)例分析了javascript中encodeURIComponent函數(shù)的使用技巧,需要的朋友可以參考下2015-03-03
JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表定義與使用方法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表定義與使用方法,簡(jiǎn)單介紹了雙向鏈表的原理,并結(jié)合實(shí)例形式分析了雙向鏈表的定義與使用方法,需要的朋友可以參考下2017-10-10
微信小程序?qū)崿F(xiàn)彈出層禁止頁(yè)面滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)彈出層禁止頁(yè)面滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要給大家介紹了關(guān)于uniapp表單校驗(yàn)的相關(guān)資料,Uni-app內(nèi)置了一些表單驗(yàn)證方法,可以幫助我們對(duì)表單進(jìn)行有效的驗(yàn)證,需要的朋友可以參考下2023-10-10
一個(gè)層慢慢增高展開,有種向下滑動(dòng)的效果...2006-11-11
這篇文章主要介紹了webpack4.x CommonJS模塊化淺析,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
這篇文章主要介紹了js如何給json對(duì)象添加、刪除、修改屬性問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
js判斷輸入框不能為空格或null值的實(shí)現(xiàn)方法
下面小編就為大家分享一篇js判斷輸入框不能為空格或null值的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
關(guān)于AOP在JS中的實(shí)現(xiàn)與應(yīng)用詳解
這篇文章主要給大家介紹了關(guān)于AOP在JS中的實(shí)現(xiàn)與應(yīng)用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05