JavaScript Array flatMap()用法及代码示例

flatMap() 方法是 flat() 和 map() 方法的组合。此方法最初通过映射函数映射每个数组元素，然后将深度值为 1 的数组展平。

用法

var newArr=arr.flatMap(function callback(currentValue[ , index[ , array]])
{
return element
} [ , thisArg])

参数

callback- 它是一个为新创建的数组生成元素的函数，并带有以下三个参数：

currentValue:它是正在处理的当前数组元素。
index:它是正在处理的当前数组元素的索引值。它是一个可选参数。
array:它是调用数组映射的可选参数。
thisArg:它也是一个可选参数，它的值在我们执行回调函数时用作 'this'。

它返回一个新数组，其中每个元素都是回调函数的结果。

JavaScript 数组 flatMap() 方法示例

让我们看下面的例子来更好地理解：

示例 1

通过一个简单的例子来了解 flatMap() 方法的使用。

<html>
<head> <h5> Javascript Array Methods </h5> </head>
<body>
<script>
var arr=[2,4,6,8];
document.write(arr.flatMap(x=>[[x/2]]));
</script>
</body>
</html>

输出：

例2

对两个不同的数组元素使用 flatMap() 方法。

<html>
<head> <h5> Javascript Array Methods </h5> </head>
<body>
<script>
var arr1=['a','b','c','d'];
var arr2=[1,2,3,4];
var newArr=arr1.flatMap((arr1,index)=>[arr1,arr2[index]]); //It will map and flatten arr1 and arr2.
document.write("After applying the method <br>" +newArr);
</script>   
</body>
</html>

输出：

例3

这个例子显示了每个成员喜欢的水果的名称。

<html>
<head> <h5> Javascript Array Methods </h5> </head>
<body>
<script>
var arr=['James','John','Mary','Renzo'];
var arr1=['Apple','Pineapple','Guava','Grapes'];
document.write("The resultant will display the fruits liked by each person <br>");
var newArr=arr.flatMap((arr,index)=>[arr,arr1[index]]);
document.write("<br>"+newArr);
</script>   
</body>
</html>

输出：

例4

将句子拆分为单个单词的示例。

<html>
<head> <h5> Javascript Array Methods </h5> </head>
<body>
<script>
var arr = ["This is", , "JavaTpoint.com"];
var newArr=arr.flatMap(x => x.split(" "));
document.write("This will split the sentences into individual words:"+newArr);
</script>   
</body>
</html>

输出：

在输出中可以清楚地看出，每个句子彼此分离并形成单个单词。

相关用法

注：本文由纯净天空筛选整理自 JavaScript Array flatMap() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。