JavaScript中數(shù)組flat方法的使用與實(shí)現(xiàn)方法
前言
flat() 方法會按照一個可指定的深度遞歸遍歷數(shù)組，并將所有元素與遍歷到的子數(shù)組中的元素合并為一個新數(shù)組返回。
語法
var newArray = arr.flat([depth])
參數(shù)
depth 可選
指定要提取嵌套數(shù)組的深度，默認(rèn)值為 1。
返回值
一個包含將數(shù)組與子數(shù)組中所有元素的新數(shù)組。（就是扁平化后的每一項重新組成的數(shù)組，所以不會改變原數(shù)組。）
使用示例
扁平化數(shù)組，不傳遞參數(shù)的時候默認(rèn)為一層
let arr = [1,2,[3,[4,[5]]]] const reasut = arr.flat() console.log(reasut) // [1, 2, 3, [4,[5]]]
設(shè)置扁平化的深度
let arr = [1,2,[3,[4,[5]]]] const reasut2 = arr.flat(3) console.log(reasut2) // [1, 2, 3, 4, 5]
當(dāng)傳入Infinity時，相當(dāng)于扁平化最深層次的數(shù)組
let arr = [1,2,[3,[4,[5]]]] const reasut3 = arr.flat(Infinity) console.log(reasut3) // [1, 2, 3, 4, 5]
當(dāng)數(shù)組里面有空項的時候，會過濾掉空值
const arr2 = [1, , 2, [3]] const reasut4 = arr2.flat() console.log(reasut4) // [1, 2, 3]
方法實(shí)現(xiàn)
1、當(dāng)只扁平化一層的時候
const arr5 = [1,2,[3,[4,5]], [6,[7]], 8]
function getFlatArr (list) {
return list.reduce((pre, item) => {
return pre.concat(item)
}, [])
}
console.log(getFlatArr(arr5))
// [1,2,3,[4,5],6,[7],8]
上述代碼使用reduce方法和concat方法組合，實(shí)現(xiàn)只展平一層數(shù)組的方法。還可以使用foreach和push方法如：
const arr5 = [1,2,[3,[4,5]], [6,[7]], 8]
function getFlatArr (list) {
let result = []
list.forEach(element => {
if (Array.isArray(element)) {
result.push(...element)
} else {
result.push(element)
}
})
return result
}
console.log(getFlatArr(arr5))
// [1,2,3,[4,5],6,[7],8]
上述代碼采用foreach方法對數(shù)組的每一項循環(huán)，并使用isArray方法判斷是不是數(shù)組將當(dāng)前項push進(jìn)result中，最后返回result。
2、當(dāng)數(shù)組展平的層數(shù)為最大層時
const arr5 = [1,2,[3,[4,5]], [6,[7]], 8]
function getFlatArr (list) {
return list.reduce((pre, item) => pre.concat(Array.isArray(item)? getFlatArr(item): item), [])
}
console.log(getFlatArr(arr5))
// [1, 2, 3, 4, 5, 6, 7, 8]
上述代碼使用數(shù)組的reduce方法和遞歸的形式實(shí)現(xiàn)，當(dāng)reduce方法循環(huán)到數(shù)組的每一項時都去判斷當(dāng)前項是不是新的數(shù)組，是的話就使用遞歸去吧里面的每一項逐層剝離出來，最后進(jìn)行合并，不是數(shù)組的話，就直接將當(dāng)前項合并到數(shù)組中。還可以使用foreach方法+遞歸的方式進(jìn)行實(shí)現(xiàn)，如：
const arr5 = [1,2,[3,[4,5]], [6,[7]], 8]
function getFlatArr (list) {
const result = []
;(function flat(list) {
// forEach 自動去除數(shù)組空位
list.forEach(item => {
// 判斷是不是數(shù)組
if (Array.isArray(item)) {
// 進(jìn)行數(shù)組遞歸
flat(item)
} else {
result.push(item)
}
})
})(list)
return result
}
console.log(getFlatArr(arr5))
// [1, 2, 3, 4, 5, 6, 7, 8]
上述代碼創(chuàng)建一個新的數(shù)組，使用foreach方法循環(huán)原始數(shù)組的每一項，然后判斷當(dāng)前項是否是一個數(shù)組是的話就遞歸，不是的話就將當(dāng)前項push進(jìn)新創(chuàng)建的數(shù)組，最后返回創(chuàng)建的數(shù)組。還可以使用堆棧的概念來實(shí)現(xiàn)，如：
const arr5 = [1,2,[3,[4,5]], [6,[7]], 8]
function getFlatArr (list) {
const arrList = JSON.parse(JSON.stringify(list))
const result = []
while (arrList.length) {
// 彈出堆棧中的數(shù)據(jù)
let arr = arrList.shift()
if (Array.isArray(arr)) arrList.unshift(...arr)
else result.push(arr)
}
return result
}
console.log(getFlatArr(arr5))
// [1, 2, 3, 4, 5, 6, 7, 8]
上述代碼使用堆棧概念存儲數(shù)據(jù)，使用while語句進(jìn)行循環(huán)彈出堆棧中的數(shù)據(jù)，彈出的數(shù)據(jù)如果不是數(shù)組類型的話就push進(jìn)創(chuàng)建的新數(shù)組中，否則的話就將當(dāng)前項解構(gòu)后在一次存儲進(jìn)堆棧中，重復(fù)上述操作直到堆棧中的數(shù)據(jù)被清空，最后返回創(chuàng)建的數(shù)組。
3、數(shù)組扁平化使用參數(shù)控制扁平的深度
可以使用reduce方法和遞歸來實(shí)現(xiàn)如：
const arr5 = [1,2,[3,[4,5]], [6,[7]], 8]
function getFlatArr (list, deepNum = 1) {
return deepNum > 0? list.reduce((pre, item) => {
return pre.concat(Array.isArray(item)? getFlatArr(item, deepNum - 1): item)
}, []): list.slice()
}
console.log(getFlatArr(arr5))
// [1,2,3,[4,5], 6,[7], 8]
console.log(getFlatArr(arr5, 3))
// [1, 2, 3, 4, 5, 6, 7, 8]
上述代碼使用reduce方法，將循環(huán)的當(dāng)前項展開成一個數(shù)組，然后通過傳入的deepNum參數(shù)來控制展開的深度，當(dāng)deepNum小于1的時候就返回原數(shù)組的一個淺拷貝，否則就根據(jù)deepNum的大小來展開對應(yīng)深度的數(shù)組。還可以使用foreach方法+遞歸的形式來實(shí)現(xiàn)，如：
const arr5 = [1,2,[3,[4,5]], [6,[7]], 8]
function getFlatArr (list, deepNum = 1) {
const result = []
;(function flat(list, deepNum) {
list.forEach(element => {
// 判斷當(dāng)前元素是否為數(shù)組并控制遞歸的深度
if (Array.isArray(element) && deepNum > 0) flat(element, deepNum - 1)
else result.push(element)
})
})(list, deepNum)
return result
}
console.log(getFlatArr(arr5))
// [1,2,3,[4,5], 6,[7], 8]
console.log(getFlatArr(arr5, 3))
// [1, 2, 3, 4, 5, 6, 7, 8]
上述代碼，首先創(chuàng)建一個新的數(shù)組result，然后使用自調(diào)用函數(shù)，傳入原數(shù)組和深度大小，使用foreach進(jìn)行循環(huán)，然后判斷循環(huán)的當(dāng)前項是否為數(shù)組，并且遞歸的深度的大小大于0，是的話就繼續(xù)遞歸當(dāng)前數(shù)組，深度減去1。否則的話就將當(dāng)前元素push進(jìn)新創(chuàng)建的數(shù)組result中，就是通過這樣循環(huán)的方法，最后將原來數(shù)組中的每一項根據(jù)傳入的深度大小都push進(jìn)了一開始創(chuàng)建的新數(shù)組result中，最后返回數(shù)組result即可。
總結(jié)
到此這篇關(guān)于JavaScript中數(shù)組flat方法的使用與實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)js數(shù)組flat方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript中判斷數(shù)據(jù)類型的實(shí)用方法總結(jié)
最近項目中有不少地方需要判斷數(shù)據(jù)類型,但是判斷數(shù)據(jù)類型也有好幾種方法,并且每種方法判斷的數(shù)據(jù)類型也有局限性,所以本文就來為大家總結(jié)一下js中判斷數(shù)據(jù)類型的幾種實(shí)用方法吧2025-01-01
原生js實(shí)現(xiàn)查詢天氣小應(yīng)用
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)查詢天氣的小應(yīng)用,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
本篇文章主要介紹了webpack中的熱刷新與熱加載的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
javascript實(shí)現(xiàn)時間日期的格式化的方法匯總
這篇文章主要介紹了javascript實(shí)現(xiàn)時間日期的格式化的方法匯總，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
JavaScript原型和原型鏈與構(gòu)造函數(shù)和實(shí)例之間的關(guān)系詳解
這篇文章主要介紹了JavaScript原型和原型鏈與構(gòu)造函數(shù)和實(shí)例之間的關(guān)系，每個對象都連接到一個原型對象，并且它可以從中繼承屬性。所有通過對象字面量創(chuàng)建的對象都連接到object.prototype，它是JavaScript中的標(biāo)配對象2022-07-07
JS將滑動門改為選項卡（需鼠標(biāo)點(diǎn)擊）的實(shí)現(xiàn)方法
這篇文章主要介紹了JS將滑動門改為選項卡（需鼠標(biāo)點(diǎn)擊）的實(shí)現(xiàn)方法,涉及JavaScript頁面元素遍歷及樣式替換的相關(guān)技巧,再通過onmouseover與onclick即可分別實(shí)現(xiàn)滑動門與選項卡兩種效果,需要的朋友可以參考下2015-09-09
JS利用ES6和ES5分別實(shí)現(xiàn)長整數(shù)和字節(jié)數(shù)組互轉(zhuǎn)
這篇文章主要為大家詳細(xì)介紹了長整數(shù)與字節(jié)數(shù)組互轉(zhuǎn)的技術(shù)原理,文中提供了ES6（現(xiàn)代瀏覽器/Node.js）與ES5（兼容舊環(huán)境）兩套實(shí)現(xiàn)方案,需要的可以參考下2025-04-04
這篇文章講述可以幫助 改善優(yōu)化前端的技術(shù)，非常有用。主要內(nèi)容有清理代碼、壓縮圖片、壓縮外部資源、使用CDN，以及一些其它方法。這些方法會為你的網(wǎng)站帶顯著的速度提升和整體性能提升。下面跟著小編一起來看下吧2017-02-02
js自己實(shí)現(xiàn)一個大文件切片上傳+斷點(diǎn)續(xù)傳的示例代碼
本文主要介紹了js自己實(shí)現(xiàn)一個大文件切片上傳+斷點(diǎn)續(xù)傳的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
javascript模擬的Ping效果代碼 （Web Ping）
JS雖然發(fā)送不了真正Ping的ICMP數(shù)據(jù)包,但Ping的本質(zhì)仍然是請求/回復(fù)的時間差,HTTP自然可以實(shí)現(xiàn)此功能.2011-03-03