es6數(shù)組的flat(),flatMap()函數(shù)用法實(shí)例分析
本文實(shí)例講述了es6數(shù)組的flat(),flatMap()函數(shù)用法。分享給大家供大家參考,具體如下:
數(shù)組的成員有時(shí)還是數(shù)組,Array.prototype.flat()用于將嵌套的數(shù)組“拉平”,變成一維數(shù)組。該方法返回一個(gè)新數(shù)組,對(duì)原數(shù)據(jù)沒(méi)有影響。
[1, 2, [3, 4]].flat() // [1, 2, 3, 4]
上面代碼中,原數(shù)組的成員里面有一個(gè)數(shù)組,flat()方法將子數(shù)組的成員取出來(lái),添加在原來(lái)的位置。
flat()默認(rèn)只會(huì)“拉平”一層,如果想要“拉平”多層的嵌套數(shù)組,可以將flat()方法的參數(shù)寫(xiě)成一個(gè)整數(shù),表示想要拉平的層數(shù),默認(rèn)為1。
[1, 2, [3, [4, 5]]].flat() // [1, 2, 3, [4, 5]] [1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5]
上面代碼中,flat()的參數(shù)為2,表示要拉平兩層的嵌套數(shù)組。
如果不管有多少層嵌套,都要轉(zhuǎn)成一維數(shù)組,可以用Infinity關(guān)鍵字作為參數(shù)。
[1, [2, [3]]].flat(Infinity) // [1, 2, 3]
如果原數(shù)組有空位,flat()方法會(huì)跳過(guò)空位。
[1, 2, , 4, 5].flat() // [1, 2, 4, 5]
flatMap()方法對(duì)原數(shù)組的每個(gè)成員執(zhí)行一個(gè)函數(shù),相當(dāng)于執(zhí)行Array.prototype.map(),然后對(duì)返回值組成的數(shù)組執(zhí)行flat()方法。該方法返回一個(gè)新數(shù)組,不改變?cè)瓟?shù)組。
// 相當(dāng)于 [[2, 4], [3, 6], [4, 8]].flat() [2, 3, 4].flatMap((x) => [x, x * 2]) // [2, 4, 3, 6, 4, 8]
flatMap()只能展開(kāi)一層數(shù)組。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專(zhuān)題:《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
從javascript語(yǔ)言本身談項(xiàng)目實(shí)戰(zhàn)
從javascript語(yǔ)言本身談項(xiàng)目實(shí)戰(zhàn)...2006-12-12深入理解javascript嚴(yán)格模式(Strict Mode)
Strict mode是JavaScript1.8.5引進(jìn)的技術(shù),但還沒(méi)有瀏覽器確實(shí)可靠的實(shí)現(xiàn)了嚴(yán)格模式,所以使用時(shí)要小心并且多測(cè)試。Strict mode可以應(yīng)用于整個(gè)腳本,也可以適合于單個(gè)函數(shù)。2014-11-11詳解Bootstrap創(chuàng)建表單的三種格式(一)
在本章中,我們將學(xué)習(xí)如何使用 Bootstrap 創(chuàng)建表單。Bootstrap 通過(guò)一些簡(jiǎn)單的 HTML 標(biāo)簽和擴(kuò)展的類(lèi)即可創(chuàng)建出不同樣式的表單,對(duì)bootstrap 表單相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01webpack自動(dòng)打包和熱更新的實(shí)現(xiàn)方法
這篇文章主要介紹了webpack自動(dòng)打包和熱更新的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06Echarts?3D散點(diǎn)圖實(shí)戰(zhàn)案例
這篇文章主要給大家介紹了關(guān)于Echarts?3D散點(diǎn)圖的相關(guān)資料, Echarts散點(diǎn)圖是一種常用的數(shù)據(jù)可視化圖表類(lèi)型,用于展示兩個(gè)或多個(gè)維度的數(shù)據(jù)分布情況,需要的朋友可以參考下2023-11-11javascript 獲取radio的value的函數(shù) [已測(cè)]
javascript 獲取radio的value的函數(shù) 如果與asp,php等后臺(tái)語(yǔ)言結(jié)合時(shí),一般用不到,但在純js環(huán)境下是必須的。2009-06-06Javascript面試經(jīng)典套路reduce函數(shù)查重
reduce函數(shù),是ECMAScript5規(guī)范中出現(xiàn)的數(shù)組方法.下面通過(guò)本文給大家分享Javascript面試經(jīng)典套路reduce函數(shù)查重,需要的朋友參考下吧2017-03-03為Javascript中的String對(duì)象添加去除左右空格的方法(示例代碼)
這篇文章主要介紹了為Javascript中的String對(duì)象添加去除左右空格的方法(示例代碼)。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11javascript中json基礎(chǔ)知識(shí)詳解
本文主要介紹了json的基礎(chǔ)知識(shí)。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01