JavaScript中數(shù)組flat方法的使用與實現(xiàn)方法
前言
flat() 方法會按照一個可指定的深度遞歸遍歷數(shù)組，并將所有元素與遍歷到的子數(shù)組中的元素合并為一個新數(shù)組返回。
語法
var newArray = arr.flat([depth])
參數(shù)
depth 可選
指定要提取嵌套數(shù)組的深度，默認值為 1。
返回值
一個包含將數(shù)組與子數(shù)組中所有元素的新數(shù)組。（就是扁平化后的每一項重新組成的數(shù)組，所以不會改變原數(shù)組。）
使用示例
扁平化數(shù)組，不傳遞參數(shù)的時候默認為一層
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]
方法實現(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方法組合，實現(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進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方法和遞歸的形式實現(xiàn)，當(dāng)reduce方法循環(huán)到數(shù)組的每一項時都去判斷當(dāng)前項是不是新的數(shù)組，是的話就使用遞歸去吧里面的每一項逐層剝離出來，最后進行合并，不是數(shù)組的話，就直接將當(dāng)前項合并到數(shù)組中。還可以使用foreach方法+遞歸的方式進行實現(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)) {
// 進行數(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進新創(chuàng)建的數(shù)組，最后返回創(chuàng)建的數(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語句進行循環(huán)彈出堆棧中的數(shù)據(jù)，彈出的數(shù)據(jù)如果不是數(shù)組類型的話就push進創(chuàng)建的新數(shù)組中，否則的話就將當(dāng)前項解構(gòu)后在一次存儲進堆棧中，重復(fù)上述操作直到堆棧中的數(shù)據(jù)被清空，最后返回創(chuàng)建的數(shù)組。
3、數(shù)組扁平化使用參數(shù)控制扁平的深度
可以使用reduce方法和遞歸來實現(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方法+遞歸的形式來實現(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進行循環(huán)，然后判斷循環(huán)的當(dāng)前項是否為數(shù)組，并且遞歸的深度的大小大于0，是的話就繼續(xù)遞歸當(dāng)前數(shù)組，深度減去1。否則的話就將當(dāng)前元素push進新創(chuàng)建的數(shù)組result中，就是通過這樣循環(huán)的方法，最后將原來數(shù)組中的每一項根據(jù)傳入的深度大小都push進了一開始創(chuàng)建的新數(shù)組result中，最后返回數(shù)組result即可。
總結(jié)
到此這篇關(guān)于JavaScript中數(shù)組flat方法的使用與實現(xiàn)的文章就介紹到這了,更多相關(guān)js數(shù)組flat方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
創(chuàng)建與框架無關(guān)的JavaScript插件
這篇文章主要介紹了創(chuàng)建與框架無關(guān)的JavaScript插件，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12
原生JS實現(xiàn)圖片網(wǎng)格式漸顯、漸隱效果
這篇文章主要介紹了原生JS實現(xiàn)圖片網(wǎng)格式漸顯、漸隱效果,需要的朋友可以參考下2017-06-06
關(guān)于javascript中this關(guān)鍵字(翻譯+自我理解)
在傳統(tǒng)面向?qū)ο笳Z言中，this關(guān)鍵字是個很乖的小孩，從不亂跑，該是誰的就是誰的?？墒窃贘avaScript中，我們發(fā)現(xiàn)它不那么乖，有時甚至把我們搞的暈頭轉(zhuǎn)向的。所以有必要對它稍微做個總結(jié)。2010-10-10
這篇文章主要為大家詳細介紹了js原生輪播圖插件制作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
網(wǎng)頁上可以自由改變字體大小是個非常有助于用戶體驗的小功能，現(xiàn)在許多網(wǎng)站上都有此功能，今天我們來簡單實現(xiàn)下。2015-04-04
RequireJS 和 Sea.js 都是模塊加載器，倡導(dǎo)模塊化開發(fā)理念，核心價值是讓 JavaScript 的模塊化開發(fā)變得簡單自然。這篇文章給大家簡單介紹了Require.js與Sea.js的區(qū)別，感興趣的朋友一起看看吧2018-08-08
關(guān)于Javascript作用域鏈的八點總結(jié)
其實吧，關(guān)于作用域鏈相關(guān)的文章我也看了不少，但是我一直也沒能做一個詳細的總結(jié)，今天把我看到的一些東西，結(jié)合自己的想法，總結(jié)成以下8個點2013-12-12
JS控件的生命周期跟其他平臺UI的生命周期類似，但是又有自己的特點，我們只有將控件的生命周期劃分清晰，所有的控件編寫、mixins的編寫和plugin的編寫才能遵循控件的生命周期做統(tǒng)一的管理2012-10-10
取得一定長度的內(nèi)容，處理中文...2006-12-12
DHTML form validation...2007-03-03