MENU
  1. ホーム
  2. JavaScript
  3. Javascript応用
  4. 【JavaScript】ArrayクラスのflatMap()メソッドについて

【JavaScript】ArrayクラスのflatMap()メソッドについて

Javascript応用

JavaScriptのflatMap()メソッドは、map()メソッドとflat()メソッドを組み合わせた強力なメソッドです。このメソッドを使用することで、配列の各要素に対して指定された関数を適用し、その結果をフラット化した新しい配列を作成することができます。本記事では、flatMap()メソッドの基本的な使い方から応用例まで詳しく解説します。

目次

ArrayクラスのflatMap()メソッドの基本構文

flatMap()メソッドの基本的な構文は以下の通りです：

array.flatMap(callback(element, index, array), thisArg);
  • callback: 各要素に対して実行される関数。以下の引数を受け取ります：
    • element: 現在処理されている要素。
    • index (オプション): 現在処理されている要素のインデックス。
    • array (オプション): flatMap()メソッドが呼び出された配列。
  • thisArg (オプション): callbackが参照するthisの値。

flatMap()メソッドは、map()メソッドと同様に、各要素に対して関数を適用し、その結果をフラット化した新しい配列を返します。デフォルトでは1レベルのフラット化が行われます。

ArrayクラスのflatMap()メソッドの基本的な使い方

各要素に関数を適用しフラット化

const array = [1, 2, 3, 4];

const result = array.flatMap(x => [x, x * 2]);

console.log(result); // 出力: [1, 2, 2, 4, 3, 6, 4, 8]

この例では、各要素に対してその値とその2倍の値を含む配列を生成し、それをフラット化しています。

条件に基づくフラット化

const array = [1, 2, 3, 4, 5];

const result = array.flatMap(x => (x % 2 === 0 ? [x, x * 2] : []));

console.log(result); // 出力: [2, 4, 4, 8]

この例では、偶数の要素に対してのみ配列を生成し、フラット化しています。

要素のインデックスを使用する

flatMap()メソッドのコールバック関数には、第2引数として要素のインデックスを取ることができます。

const array = ['a', 'b', 'c'];

const result = array.flatMap((value, index) => [index, value]);

console.log(result); // 出力: [0, 'a', 1, 'b', 2, 'c']

この例では、各要素とそのインデックスをペアにしてフラット化しています。

コールバック関数内でthisを使用する

flatMap()メソッドの第2引数にthisArgを指定することで、コールバック関数内でthisを使用することができます。

const context = {
  multiplier: 3
};

const array = [1, 2, 3];

const result = array.flatMap(function(element) {
  return [element, element * this.multiplier];
}, context);

console.log(result); // 出力: [1, 3, 2, 6, 3, 9]

この例では、contextオブジェクト内のmultiplierプロパティを使って、各要素の3倍の値を生成し、それをフラット化しています。

ArrayクラスのflatMap()メソッドの注意点

  • flatMap()メソッドは、1レベルのフラット化を行います。より深いフラット化が必要な場合は、map()とflat()を組み合わせて使用する必要があります。
  • flatMap()メソッドは、元の配列を変更せず、新しい配列を返します。

まとめ

flatMap()メソッドは、map()メソッドとflat()メソッドを組み合わせた強力なツールで、各要素に対して関数を適用し、その結果をフラット化した新しい配列を作成するために使用されます。この記事を参考にして、flatMap()メソッドを効果的に活用してください。

Javascript応用
目次