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

打印页面