JavaScript - Array flatMap() 方法

在 JavaScript 中，Array.flatMap（） 方法用于通过对原始数组的每个元素应用回调函数来创建平面数组。它不会修改原始数组，而是返回一个新数组，其中包含将提供的回调函数应用于每个元素的结果。此方法不对空数组元素执行函数。

注 -flatMap（）方法等同于 “array.map（）.flat（）”。

语法

以下是 JavaScript Array.flatMap（） 方法的语法 -


 array.flatMap(callbackFn (element, index, array), thisArg);

参数

此方法接受两个参数。下面描述相同 -

callbackFn −这是一个回调函数，将为数组中的每个元素调用一次。它进一步需要三个参数 -
- element − 数组中正在处理的当前元素。
- index − 当前正在处理的元素的索引。
- array − 当前元素的数组。
thisArg（可选）-它指定传递给函数的值，用作其 this 值。

返回值

此方法返回一个新数组，其中每个元素都是在原始数组的每个元素上调用提供的函数并展平结果的结果。

示例 1

在下面的示例中，我们为 flatMap（）方法提供了一个回调函数，它将指定数组中的每个元素乘以数字 “2” 并展平数组。


<html>
<body>
	 	<p id="demo"></p>
	 	<script>
	 	 	 const numbers = [5, 10, 20, 30, 40];
	 	 	 let result = numbers.flatMap( num => [num * 2]);
	 	 	 document.getElementById("demo").innerHTML = result;
	 	</script>
</body>
</html>

输出

正如我们所看到的，所有数组元素都乘以 2，并产生一个新的平面数组。

10,20,40,60,80

示例 2

在这里，我们遍历指定嵌套数组的每个元素，将它们与数字 “2” 相乘，然后返回扁平化的数组。


<html>
<body>
	 	<p id="demo"></p>
	 	<script>
	 	 	 const nestedArray = [[1, 2], [3, 4], [5, 6]];
	 	 	 let result = nestedArray.flatMap(innerArray => innerArray.map(num => num * 2));
	 	 	 document.getElementById("demo").innerHTML = result;
	 	</script>
</body>
</html>

输出

执行后，结果将是一个包含双倍值的扁平化数组。

2,4,6,8,10,12

示例 3

flatMap（）方法会自动从结果数组中删除空元素。


<html>
<body>
	 	<p id="demo"></p>
	 	<script>
	 	 	 const numbers = [5, , , 11, 15];
	 	 	 let result = numbers.flatMap(num => num ? [num * 2] : []);
	 	 	 document.getElementById("demo").innerHTML = result;
	 	</script>
</body>
</html>

输出

正如我们所看到的，空元素已被消除。

10,22,30

打印本页