JavaScript - 数组 flatMap() 方法

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

注意 - flatMap() 方法等同于 "array.map().flat()"。

语法

以下是 JavaScript 数组 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