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

列印頁面