JavaScript中的Array.flatMap你知道吗?

在我以前眼里JavaScript扁平一个数组，还是有些复杂的，不过在ES2019中引入了一种使数组扁平的新方法。并且有一个depth参数，您可以传入任何级别的嵌套。真令人开心🤩

const nested = [ ['📦', '📦'], ['📦']];

const flattened = nested.flat();

console.log(flattened);
//输出结果为: ['📦', '📦', '📦']

设定depth参数

语法是这样的：

array.flat(<depth>);

默认情况下，flat()将只展平一层深度。换句话说，depth是1。

array.flat();

// Same as

array.flat(1);

更深层的嵌套数组

很棒的是，此方法也可以在1级以上的深度下工作。您只需设置适当的depth参数即可展平更深的嵌套数组。

const twoLevelsDeep = [[1, [2, 2], 1]];

// depth = 1
twoLevelsDeep.flat()
//输出结果 [1, [2, 2], 1]

// depth = 2
twoLevelsDeep.flat(2)
//输出结果 [1, 2, 2, 1]

无限嵌套数组

假设您想无限深入。没问题，我们也可以这样做。使用Infinity。

Infinity 属性用于存放表示正无穷大的数值。

const veryDeep = [[1, [2, 2, [3,[4,[5,[6]]]]], 1]];

veryDeep.flat(Infinity);
//输出结果 [1, 2, 2, 3, 4, 5, 6, 1]

flat()

另一个很炫酷的事情是，flat()是删除队列中的空值，像这样的

const missingNumbers = [1, ,3, ,5];

missingNumbers.flat();
//输出结果 [1, 3, 5];

是不是很炫酷,是不是学到了新知识

浏览器支持情况

flat是ES2019中引入的一项超级新功能，因此请不要使用Internet Explorer或Edge。相信大家其实都不想用😅

支持情况如下:

兼容方案

由于支持不是很好。这是一些替代解决方案。

1. ES6解决方案

这是一个ES6解决方案。这仅适用于一级嵌套数组。

const oneLevelDeep =[[1, 2],[3]];

const flattened =[].concat(...oneLevelDeep);

//输出结果 [1, 2, 3,]

2. 较旧的浏览器解决方案

这是旧版浏览器和ES6之前的版本。同样，这仅适用于一级嵌套数组。

const oneLevelDeep =[[1,2],[3]];

const flattened = [].concat.apply([],oneLevelDeep);

//输出结果 [1, 2, 3,]

3. 递归

对于具有更深层嵌套的数组，可以使用递归。

const arr1 = [1,2,3,[1,2,3,4,[2,3,4]]];

function flattenDeep(arr1) {
   return arr1.reduce((acc, val) =>{
       return Array.isArray(val) ? 
       acc.concat(flattenDeep(val)) : 
       acc.concat(val), []
   } );
}

flattenDeep(arr1);
//输出结果 [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

最后

欢迎关注我