JavaScript Array flatMap

概要: このチュートリアルでは、JavaScript Array の flatMap() メソッドについて学びます。このメソッドは、配列の各要素をマッピング関数を使用してマップし、結果を新しい配列にフラット化します。

JavaScript Array flatMap() メソッド入門

flat() メソッドは、サブ配列の要素を連結した新しい 配列 を作成します。

map() メソッドは、マッピング関数の結果を要素とする新しい配列を作成します。

flatMap() メソッドは、map() メソッドを実行した後に深さ 1 の flat() メソッドを実行するのと同じです。

flatMap() メソッドは、まずマッピング関数を使用して配列の各要素をマップし、次に結果を新しい配列にフラット化します。

flatMap() メソッドの構文は以下のとおりです。

let newArray = arrayObject.flatMap(callback,thisArg);Code language: JavaScript (javascript)

flatMap() メソッドは2つのパラメータを取ります。

1) コールバックマッピング関数

callback はマッピング関数であり、map() メソッドのものと同じ構文を持ちます。

function callback(currentValue [[,index], array]);Code language: JavaScript (javascript)

2) thisArg 引数

オプションの thisArg 引数は、callback を実行するときに this として使用する値です。

flatMap() メソッドは元の配列を変更しないことに注意してください。

JavaScript Array flatMap() の例

flatMap() メソッドの使用例をいくつか見てみましょう。

1) 文から単語を作成する例

次のような配列があるとします。

let sentences = ["JavaScript Array flatMap()", " ", "is", " ", "Awesome"];Code language: JavaScript (javascript)

次の map() 関数は、文の単語を分割します。

let words = sentences.map(s => s.split(' '));
console.log(words);Code language: JavaScript (javascript)

出力

[
    [ 'JavaScript', 'Array', 'flatMap()' ],
    [ ' ' ],
    [ 'is' ],
    [ ' ' ],
    [ 'Awesome' ]
]Code language: JavaScript (javascript)

結果は、単語で埋められたネストされた配列の配列です。結果をフラット化するには、map() メソッドの結果に対して flat() メソッドを使用できます。ただし、flatMap() メソッドを使用する方がより簡潔です。

flatMap() は、配列内の各文をマッピング関数で実行し、マップされた結果をフラット化することで、フラット化された配列を作成します。

let sentences = [
    "JavaScript Array flatMap()", 
    " ", 
    "is", 
    " ", 
    "Awesome"
];

let words = sentences.flatMap(s => s.split(' '));
console.log(words);Code language: JavaScript (javascript)

出力

[ 'JavaScript', 'Array', 'flatMap()', '', '', 'is', '', '', 'Awesome' ]Code language: JSON / JSON with Comments (json)

2) マッピング中に要素を追加および削除する例

flatMap() メソッドを使用すると、マッピング中に要素を追加または削除できます。次の例を考えてみましょう。

次のようなショッピングカートがあるとします。

let cart = [{
        name: 'Smartphone',
        qty: 2,
        price: 500,
        freeOfCharge: false
    },
    {
        name: 'Tablet',
        qty: 1,
        price: 800,
        freeOfCharge: false
    }
];
Code language: JavaScript (javascript)

顧客がスマートフォンを購入した場合、無料のスクリーンプロテクターをプレゼントしたいとします。

顧客がカートにスマートフォンを追加すると、次のように flatMap() メソッドを使用してカートにスクリーンプロテクターを追加できます。

let newCart = cart.flatMap(
    (item) => {
        if (item.name === 'Smartphone') {
            return [item, {
                name: 'Screen Protector',
                qty: item.qty,
                price: 5,
                freeOfCharge: true
            }]
        } else {
            return [item];
        }
    }
);

console.log(newCart);Code language: JavaScript (javascript)

カートは次のようになります。

[
    { name: 'Smartphone', qty: 2, price: 500, freeOfCharge: false },
    { name: 'Screen Protector', qty: 2, price: 5, freeOfCharge: true },
    { name: 'Tablet', qty: 1, price: 800, freeOfCharge: false }
]Code language: JavaScript (javascript)

以下は、reduce() メソッドを使用して、カート内のアイテムから合計金額を計算する例です。スクリーンプロテクターのような無料アイテムは無視されます。

const total = newCart.reduce((sum, item) => {
    if (!item.freeOfCharge)
        sum += item.price * item.qty;
    return sum;
}, 0);

console.log({total});Code language: JavaScript (javascript)

出力

{ total: 1800 }Code language: JavaScript (javascript)

まとめ

• flatMap() メソッドを使用して、コレクション内の各要素をマッピング関数で実行し、マップされた結果をフラット化することで、要素のフラット化された配列を作成します。