JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの配列flatMap()メソッドとは？構文と使い方をサンプルコードで解説

JavaScriptのflatMap()メソッドは、配列の各要素に対してコールバック関数を実行し、その戻り値を1段階だけ平坦化（フラット化）して新しい配列として返します。map()で要素を変換してからflat()で浅く平坦化する処理と同等の動作を、1つのメソッドで簡潔に記述できるのが特徴です。

flatMap()メソッドの基本構文

array.flatMap(function callback(current_value, index, Array))

パラメータの説明

  • callback：新しい配列の要素を生成するために、各要素に対して呼び出される関数です。
  • current_value：現在処理している配列の要素です。
  • index：現在処理している要素のインデックス番号です（省略可能）。
  • Array：flatMap()の呼び出し元となった元の配列です（省略可能）。

このメソッドは元の配列を変更せず、常に新しい配列を返します。また、flatMap()による平坦化は深さ1のみ行われるという点にも注意してください。

例1：数値配列でflatMap()を使う

<!DOCTYPE html>
<html>
<body>
   <h2>ランキングポイント</h2>
   <p>キーと値のペアの中に550と等しいポイントはあるか…</p>
   <button onclick="display()">結果</button>
   <p id="test"></p>
   <script>
      var pointsArr = [10, 20, 30, 40, 50, 60, 70, 80, 90, 1000];
      var res = pointsArr.flatMap(val => [val + 10]).entries();
      for (val of res) {
         document.getElementById("test").innerHTML += val + "<br>";
      }
      function pointsFunc(points) {
         return points == 550;
      }
      function display() {
         document.getElementById("test").innerHTML = pointsArr.some(pointsFunc);
      }
   </script>
</body>
</html>

出力結果

JavaScriptの配列flatMap()メソッドとは？構文と使い方をサンプルコードで解説

ページを開くと、flatMap()で各要素に10を加えた新しい配列が生成され、続くentries()メソッドによってインデックスと値のペアが順に表示されます。

上の「結果」ボタンをクリックすると、some()メソッドによる「550と等しいポイントが存在するか」の判定結果が表示されます。

JavaScriptの配列flatMap()メソッドとは？構文と使い方をサンプルコードで解説

配列内に550は存在しないため、判定結果はfalseとなります。

例2：文字列配列でflatMap()を使う

<!DOCTYPE html>
<html>
<body>
   <h2>車のバリエーション</h2>
   <button onclick="display()">結果</button>
   <p id="test"></p>
   <script>
      var carid = ["110", "230", "299", "399"];
      var res = carid.flatMap(val => [val + 10]).entries();
      for (val of res) {
         document.getElementById("test").innerHTML += val + "<br>";
      }
      function display() {
         document.getElementById("test").innerHTML = "一部の要素を切り取った後の配列 =    "+carid.slice(1,4);
      }
   </script>
</body>
</html>

出力結果

JavaScriptの配列flatMap()メソッドとは？構文と使い方をサンプルコードで解説

「結果」ボタンをクリックすると、次のようにslice()による抽出結果が表示されます。

JavaScriptの配列flatMap()メソッドとは？構文と使い方をサンプルコードで解説

こちらの例では、文字列と数値の連結（"110" + 10 → "11010"）によって新しい要素が生成される様子をflatMap()で確認でき、さらにslice(1, 4)によってインデックス1〜3の要素が取り出されています。

flatMap()を使う際のポイント

  • flatMap()はES2019（ES10）で追加されたメソッドで、主要なモダンブラウザで広く利用できます。
  • ネストが1段階の場合に限り、map().flat()の代わりとして使えます。より深い入れ子を平坦化したい場合はflat(深度)を使用しましょう。
  • コールバック関数で配列を返すことで、要素の変換だけでなく、要素の追加・削除（フィルタリング）も同時に行えます。
  1. JavaScriptのArray.prototype.flatMap()メソッドとは？ネストした配列をフラット化する方法

    JavaScriptのArray.prototype.flatMap()メソッドは、ネストされた（入れ子構造の）配列を、新しいフラットな（平坦な）配列へと変換するメソッドです。 flatMap()は、各要素に対してmap()のコールバック関数を実行した後、その結果を深さ1でフラット化します。つまり、「map()してからflat()を呼ぶ」処理を、1つのメソッドで簡潔に記述できるのが大きな特徴です。 flatMap()の基本的な動作 flatMap()の構文は以下の通りです。 arr.flatMap(callbackFn) コールバック関数が配列を返す場合、その返り値の配列が自動的に展開され、結

  2. JavaScriptのArray.flatMap()メソッドでネストした配列をフラット化する方法

    JavaScriptのArray.flatMap()メソッドは、ネスト（入れ子）された配列に対して各要素に関数を適用した結果を、新しいフラット（平坦化）な配列として返します。map()による変換と、深さ1の配列の平滑化を一度に行える便利なメソッドです。 以下は、Array.flatMap()メソッドの動作を確認できるサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name