JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで配列をディープフラット化する2つの方法をわかりやすく解説

配列のフラット化とは

配列のフラット化（平坦化）とは、元の配列の中に存在するネスト（入れ子）構造のサブ配列をすべて取り除き、1つの平らな配列へと統合する処理のことです。

配列をフラット化する方法は主に2つあります

1) concat.apply() を使う方法

次の例では、要素3、4、5、6を含むネストされた配列が存在します。concat()メソッドとapply()を組み合わせてフラット化すると、出力は「1,2,3,4,5,6,9」になります。

サンプルコード

<html>
<body>
<script>
   var arrays = [1,2,[3,4,[5,6]],9];
   var merged = [].concat.apply([], arrays);
   document.write(merged);
</script>
</body>
</html>

実行結果

1,2,3,4,5,6,9

2) array.flat() を使う方法

次の例では、2、3、4、5、6、9といったネストされた要素が含まれています。array.flat()メソッドに展開する深さとして2を指定してフラット化すると、出力は「1,2,2,3,4,5,6,9」となります。

サンプルコード

<html>
<body>
<script>
   const arrays = [1,2,[2,3,[4,5,[6,9]]]];
   const merged = arrays.flat(2);
   document.write(merged);
</script>
</body>
</html>

実行結果

1,2,2,3,4,5,6,9

完全なディープフラット化には flat(Infinity)

flat()メソッドは、引数で展開する階層の深さを指定できます。ネストの深さが事前に分からない場合や、すべての階層を確実にフラット化したい場合は、「flat(Infinity)」を使用しましょう。どれだけ深くネストされた配列でも、1つの平らな配列にまとめることができます。

サンプルコード

const deep = [1, [2, [3, [4, [5]]]]];
console.log(deep.flat(Infinity)); // [1, 2, 3, 4, 5]
  1. JavaScriptで配列をセット（Set）に変換する方法｜new Set()の使い方を解説

    JavaScriptでは、new Set() コンストラクタを使うことで、配列を簡単にセット（Setオブジェクト）へ変換できます。セットは同じ値を自動的に1つだけ保持する性質を持つため、配列から重複した要素を取り除きたい場合にも非常に便利です。 配列をセットに変換するサンプルコード 以下は、ボタンをクリックすると配列がセットに変換されて表示される、完全なHTMLサンプルです。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport co

  2. JavaScriptでIDごとにオブジェクトの配列をグループ化する方法

    JavaScriptでオブジェクトの配列をidなどの特定のキーごとにグループ化したい場合、reduce()メソッドを使うと簡潔に実装できます。この記事では、どのプロパティにも対応できる汎用的なgroupBy関数を作成し、実際のサンプルコードとともにその仕組みを詳しく解説します。 reduce()によるグループ化の考え方 reduce()は、配列の各要素を順番に処理しながら、1つの累積値（ここではオブジェクト）を組み立てていくメソッドです。各要素からキーの値を取り出し、その値がまだ結果オブジェクトに存在しなければ新しい配列を作成して、そこへ要素を追加していくことでグループ化を実現します。 サ