JavaScript: 配列の配列をフラット化する徹底解説
2024-04-02
JavaScriptで配列の配列を結合（Flatten）する方法
問題
- 複数のAPIから取得したデータを一つの配列にまとめたい
- 表形式のデータを処理したい
- 配列の配列を再帰的に処理したい
解決策
配列の配列を結合するには、いくつかの方法があります。以下に、代表的な方法を紹介します。
Array.prototype.reduce() メソッドは、配列の要素を順次処理し、単一の値に集約することができます。このメソッドを使って、配列の配列を結合することができます。
const arrayOfArrays = [[1, 2], [3, 4], [5, 6]];
const flattenedArray = arrayOfArrays.reduce((acc, cur) => {
return acc.concat(cur);
}, []);
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]
このコードでは、reduce() メソッドを使って、arrayOfArrays の各要素を acc に追加しています。acc は、最終的に結合された配列になります。
Array.prototype.flat()
JavaScript ES2019では、Array.prototype.flat() メソッドが追加されました。このメソッドは、配列の配列を再帰的にフラット化することができます。
const arrayOfArrays = [[1, 2], [3, 4], [5, 6]];
const flattenedArray = arrayOfArrays.flat();
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]
このコードでは、flat() メソッドを使って、arrayOfArrays をフラット化しています。
上記以外にも、以下のような方法で配列の配列を結合することができます。
forループを使って、各要素を結合するArray.prototype.concat()メソッドを使って、各要素を結合する- Lodashなどのライブラリを使う
JavaScriptで配列の配列を結合するには、いくつかの方法があります。状況に合わせて、最適な方法を選択してください。
補足
flat()メソッドは、ES2019で追加された新しいメソッドです。古いブラウザでは使用できない場合があります。flat()メソッドは、配列の配列を再帰的にフラット化します。ネストされた配列の深さに制限はありません。flat()メソッドには、オプション引数として深さを指定することができます。
Array.prototype.reduce()
const arrayOfArrays = [[1, 2], [3, 4], [5, 6]];
const flattenedArray = arrayOfArrays.reduce((acc, cur) => {
return acc.concat(cur);
}, []);
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]
Array.prototype.flat()
const arrayOfArrays = [[1, 2], [3, 4], [5, 6]];
const flattenedArray = arrayOfArrays.flat();
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]
for ループ
const arrayOfArrays = [[1, 2], [3, 4], [5, 6]];
const flattenedArray = [];
for (const array of arrayOfArrays) {
for (const value of array) {
flattenedArray.push(value);
}
}
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]
Array.prototype.concat()
const arrayOfArrays = [[1, 2], [3, 4], [5, 6]];
const flattenedArray = [].concat(...arrayOfArrays);
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]
Lodash
const _ = require('lodash');
const arrayOfArrays = [[1, 2], [3, 4], [5, 6]];
const flattenedArray = _.flatten(arrayOfArrays);
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]
配列の配列を結合するその他の方法
Array.prototype.spread() メソッドは、ES2018で追加された新しいメソッドです。このメソッドは、スプレッド構文を使って、配列の要素を個別に展開することができます。
const arrayOfArrays = [[1, 2], [3, 4], [5, 6]];
const flattenedArray = [...arrayOfArrays];
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]
const arrayOfArrays = [[1, 2], [3, 4], [5, 6]];
const flattenedArray = arrayOfArrays.flatMap(array => array);
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]
ジェネレータを使って、配列の配列を結合することができます。
function* flatten(arrays) {
for (const array of arrays) {
yield* array;
}
}
const arrayOfArrays = [[1, 2], [3, 4], [5, 6]];
const flattenedArray = [...flatten(arrayOfArrays)];
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]
リカージョン
function flatten(arrays) {
if (!arrays.length) {
return [];
}
const head = arrays[0];
const tail = arrays.slice(1);
return [...head, ...flatten(tail)];
}
const arrayOfArrays = [[1, 2], [3, 4], [5, 6]];
const flattenedArray = flatten(arrayOfArrays);
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]
javascript arrays multidimensional-array
