JavaScript 数组(Array) 方法

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

语法

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

参数

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

  1. currentValue：当前正在处理的数组元素。
  2. index：当前正在处理的数组元素的索引值。这是一个可选参数。
  3. array：它是一个可选参数，其中调用数组映射。
  4. thisArg：它也是一个可选参数，当我们执行回调函数时，它的值被用作'this'。

返回

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

JavaScript Array 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>

输出：

1,2,3,4

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

输出：

After applying the method
a,1,b,2,c,3,d,4

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

输出：

The resultant will display the fruits liked by each person
James,Apple,John,Pineapple,Mary,Guava,Renzo,Grapes

示例4

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

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

输出：

This will split the sentences into individual words: This,is,yxjc123.com

从输出中可以清楚地看出，每个句子都是相互分离的，形成了单独的单词。