JavaScript 数组 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>

输出：

JavaScript 数组 flatMap() 方法

示例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>

输出：

JavaScript 数组 flatMap() 方法

示例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>

输出:

JavaScript 数组 flatMap() 方法

示例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 数组 flatMap() 方法