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