基礎(chǔ)學(xué)習(xí):JavaScript(ES6)扁平化嵌套方法flatMap()和flat()
Array.prototype.flatMap()
flatMap() 方法首先使用映射函數(shù)映射每個(gè)元素,然后將結(jié)果壓縮成一個(gè)新數(shù)組。它與 map 連著深度值為1的 flat 幾乎相同,但 flatMap 通常在合并成一種方法的效率稍微高一些。
//只有一層
const arr1 = [1, 2, 3, 4,[5],6,[7]];
const res=arr1.flatMap(x =>x)
console.log(res);
//打?。?7) [1, 2, 3, 4, 5, 6, 7]
//兩層時(shí)
const arr2 = [1, 2, 3, 4,[[5]],6,[[[7]]]];
const res=arr2.flatMap(x =>x)
console.log(res);
打?。篬1, 2, 3, 4, [5], 6, [[7]]]
Array.prototype.flat()
flat() 方法會(huì)按照一個(gè)可指定的深度遞歸遍歷數(shù)組,并將所有元素與遍歷到的子數(shù)組中的元素合并為一個(gè)新數(shù)組返回。
參數(shù):depth 可選–(指定要提取嵌套數(shù)組的結(jié)構(gòu)深度,默認(rèn)值為 1)
返回值:一個(gè)包含將數(shù)組與子數(shù)組中所有元素的新數(shù)組。
//depth可選,默認(rèn)1
const arr1 = [1, 2, 3, 4,[5],6,[7]];
console.log(arr1.flat());
//打?。?7) [1, 2, 3, 4, 5, 6, 7]
//depth---2
const arr1 = [1, 2, 3, 4,[[5]],[6],[[7]],[[8]]];
console.log(arr1.flat(2));
//打?。?7) [1, 2, 3, 4, 5, 6, 7]
//depth---Infinity 不管有多少層嵌套,都要轉(zhuǎn)成一維數(shù)組
const arr1 = [1, 2, 3, 4,[[5]],[6],[[7]],[[8]],[[[[[[9]]]]]] ];
console.log(arr1.flat(Infinity));
//打?。?9)?[1, 2, 3, 4, 5, 6, 7, 8, 9]
注意:如果原數(shù)組有空位,flat()方法會(huì)跳過(guò)空位。
[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]
那回歸本題,如何實(shí)現(xiàn)一個(gè) flatMap 函數(shù) ?
第一種:沒(méi)說(shuō)不讓用flat;所以有個(gè)取巧的辦法 const flatMap = arr => arr.flat().map(x =>x);
第二種:flat()和flatMap()本質(zhì)上就是是歸納(reduce) 與 合并(concat)的操作。
letarr=[[0,1],[2,3],[4,5]];
letnewArr=arr.reduce((pre,cur)=>{returnpre.concat(cur)}, [])
console.log(newArr);// [0, 1, 2, 3, 4, 5]