JavaScript で配列を平坦化する

  2. プログラミングのヒント
  3. JavaScript ハウツー
  4. JavaScript で配列を平坦化する
Moataz Farid 2023年10月12日
JavaScript JavScript Array
  1. JavaScript で concat() を使用して配列を平坦化する
  2. JavaScript で Array.reduce() を使用して多次元配列を平坦化する
  3. JavaScript で flat() を使用して配列を特定の深さレベルに平坦化する
JavaScript で配列を平坦化する

このチュートリアルでは、JavaScript で配列を平坦化する方法を紹介します。JavaScript の配列を平坦化する方法として、concat()、reduce, ECMAScript 6 の Arrays.flat() メソッドを用います。ECMAScript 6 が使えない人のために、同様のメソッドを純粋な for ループで実装します。

JavaScript で concat() を使用して配列を平坦化する

以下のような配列があるとしましょう。

var array1 = [['element 1'], ['element 2']];

上記の JavaScript の配列 array1 を平坦化するには、子配列のすべての要素が親配列の要素である必要があります。つまり、["element 1", "element 2"] のようになります。

配列を平坦化するには Arrays.concat() メソッドを使用することができます。

var array1 = [['element 1'], ['element 2']];

var flattenArray = [].concat.apply([], array1);
console.log(flattenArray);

出力：

["element 1", "element 2"]

JavaScript で Array.reduce() を使用して多次元配列を平坦化する

関数 Array.reduce() は高次の関数の一つです。これは引数として実行するための reducer 関数を受け取ります。関数 reduce() を理解するために、以下の例を見てみましょう。

var arr = [10, 20, 30, 40];

function myreducerFunction(acc, currentVal) {
  console.log(`The acc. value is ${acc}`);
  console.log(`The current value is ${currentVal}`);
  acc = currentVal + acc;
  return acc;
}

var sum = arr.reduce(myreducerFunction, 0);
console.log(sum);

出力：

The acc. value is 0
The current value is 10
The acc. value is 10
The current value is 20
The acc. value is 30
The current value is 30
The acc. value is 60
The current value is 40
100

配列を平坦にするには、reduce 関数を使って reducer 関数を実行し、入力が配列でない場合は連結します。

var array1 = [['element 1'], ['element 2']];

function myFlatFunction(input) {
  return input.reduce(function(inputArray, inputToFlat) {
    return inputArray.concat(
        Array.isArray(inputToFlat) ? myFlatFunction(inputToFlat) : inputToFlat);
  }, []);
}

var OneLevelFlattenArray = myFlatFunction(array1)
console.log(OneLevelFlattenArray);

出力：

["element 1", "element 2"]

上記の例は、複数のレベル深度からなる配列を平坦化するためにも利用できます。

var array2 = [[['element 1'], ['element 2']], ['element 3']];

var TwoLevelFlattenArray = [].concat.apply([], array2);
console.log(TwoLevelFlattenArray);

出力：

["element 1", "element 2", "element 3"]

JavaScript で flat() を使用して配列を特定の深さレベルに平坦化する

Array.prototype.flat() メソッドは、引数に深さレベルを渡すことで複数の深さレベルを持つ配列を平坦化するために用います。正確な深さレベルがわからない場合は、Infinity を引数に渡すこともできます。

var array3 = ['element 0', [['element 1'], ['element 2']], ['element 3']];

console.log('Level One > ', array3.flat());
console.log('Level One > ', array3.flat(1));
console.log('Level Two > ', array3.flat(2));
console.log('Full depth flatting > ', array3.flat(Infinity));

出力：

Level One >  (4) ["element 0", Array(1), Array(1), "element 3"]
Level One >  (4) ["element 0", Array(1), Array(1), "element 3"]
Level Two >  (4) ["element 0", "element 1", "element 2", "element 3"]
Full depth flatting >  (4) ["element 0", "element 1", "element 2", "element 3"]