【JavaScript】2次元配列を1次元に戻す方法。reduce & concatメソッドの使い方

JavaScriptのreduceメソッドとconcatメソッドを使うと、配列の中で、各要素が配列になっている2次元配列を1次元に直すことができます。

例えば、[ ["a"], ["b", "c"], [1], [2, 3, 4] ]といった配列を[ "a", "b", "c", 1, 2, 3, 4 ]とすることができます。

reduceメソッドとは何か？

reduceメソッドとは、配列の要素を一つずつ取り出し、指定した処理を行っていき、最終的に一つの値を返す関数です。

以下のように使います。

array.reduce( ( 引数1, 引数2, 引数3m 引数4 ), 初期値  => 処理 )

指定した配列やreduceの途中の処理結果など、どのデータを使いたいかによって指定する引数の数が異なります。

最大で４つの引数をとります。それぞれの引数には次の値が入ります。

concatメソッドとは何か？

concatメソッドを使うと、対象となる元の配列はそのままで、指定した要素を追加した新たな配列を作成することができます。

配列と配列を結合して、一つの新しい配列を作る場合に使うことができます。

以下のように使います。

let 変数 = 配列.concat( 追加する要素 )

2次元配列を1次元配列にする方法

やり方

対象の配列に対してreducdメソッドを使い各要素を一つづつ抜き出します。抜き出した要素に対してconcatメソッドを使って、一つづつ要素を結合していきます。

array.reduce( (引数1, 引数2) => {
    return 引数1.concat( 引数2 )
})

実例

arr = [[1], ["a", 2], [3], ["a", 4], [5]]

let res = arr.reduce( ( acc, elem )=>{
    return acc.concat( elem )
})

console.log(res)

//出力
 [1, 'a', 2, 3, 'a', 4, 5]

もともとの、

 [[1], ["a", 2], [3], ["a", 4], [5]]

が処理後に以下のように1次元配列になっていることがわかります。

[1, 'a', 2, 3, 'a', 4, 5]

引数名に特に指定はありません。

ここでの、第1引数名「acc」はaccumulationの略で累積という意味の略語です。reduceメソッドの第１引数には指定した処理を実行した結果が入るのでaccとしています。

第2引数には現在選択中の要素が入るので、要素という英語elementの省略形「elem」を使ってます。

処理内容の詳細

arr = [[1], ["a", 2], [3], ["a", 4], [5]]

arr.reduce( ( acc, elem )=>{
    console.log(acc, elem)
    return acc.concat( elem )
})

上記で実行されている処理を分解すると以下のようになります。

最後の処理は「 [1, ‘a’, 2, 3, ‘a’, 4].concat( [5] )」となり、結果、[1, ‘a’, 2, 3, ‘a’, 4, 5]が返ります。