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

JavaScriptで値に基づいてオブジェクトをグループ化する方法

JavaScriptでは、reduce()メソッドを活用することで、配列内のオブジェクトを特定の値（プロパティ）に基づいて効率的にグループ化できます。たとえば、複数人のデータを「年齢」ごとにまとめたい場合などに役立ちます。ここでは、実際に動作するサンプルコードをもとに、実装手順と仕組みをわかりやすく解説します。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>Group objects based on a value in JavaScript</h1>
<div class="result">
{ name: 'Rohan', age: 18 }, { name: 'Mohan', age: 20 }, { name: 'Shawn',
age: 18 }, { name: 'Michael', age: 18 }, { name: 'David', age: 20 }
</div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to group the above object based on people's age</h3>
<script>
    let resEle = document.querySelector(".result");
    let sampleEle = document.querySelector(".sample");
    let BtnEle = document.querySelector(".Btn");
    const people = [
        { name: "Rohan", age: 18 },
        { name: "Mohan", age: 20 },
        { name: "Shawn", age: 18 },
        { name: "Michael", age: 18 },
        { name: "David", age: 20 },
    ];
    let groupBy = (array, key) => {
        return array.reduce((result, obj) => {
            (result[obj[key]] = result[obj[key]] || []).push(obj);
            return result;
        }, {});
    };
    let a = groupBy(people, "age");
    BtnEle.addEventListener("click", () => {
        console.log(a);
    });
</script>
</body>
</html>

コードのポイント：groupBy関数の仕組み

このサンプルの核となるのは、以下のgroupBy関数です。

let groupBy = (array, key) => {
    return array.reduce((result, obj) => {
        (result[obj[key]] = result[obj[key]] || []).push(obj);
        return result;
    }, {});
};

処理の流れは次のとおりです。

  • reduce()が配列内の各オブジェクトを順番に処理していきます。
  • obj[key]（ここではageの値）を取得し、結果オブジェクトのキーとして利用します。
  • 該当するキーがまだ存在しない場合は、|| []によって新しい空の配列が自動的に作成されます。
  • push()でその配列に現在のオブジェクトを追加することで、同じ値を持つオブジェクトがひとつのグループにまとまります。

その結果、{ 18: [...], 20: [...] }のように、年齢をキーとしたグループ化済みのオブジェクトが生成されます。この手法は汎用性が高く、キーの引数を変更するだけで「名前」や「部署」など、任意のプロパティによるグループ化にもそのまま応用できます。

出力結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptで値に基づいてオブジェクトをグループ化する方法

「CLICK HERE」ボタンをクリックした後、ブラウザの開発者ツールでコンソールを確認すると、年齢ごとにグループ化されたオブジェクトが出力されていることがわかります。

JavaScriptで値に基づいてオブジェクトをグループ化する方法

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

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

  2. JavaScriptで2つのオブジェクトをマージする方法を解説

    JavaScriptでは、スプレッド構文（...）を使うことで、2つのオブジェクトを簡単に1つにマージ（結合）できます。各オブジェクトの前に「...」を付けて新しいオブジェクトリテラル内に展開するだけで、すべてのプロパティが統合されたオブジェクトが生成されます。以下に、2つのJavaScriptオブジェクトをマージするコードの例を示します。コード例<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=dev