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

JavaScriptで片方のオブジェクトに余分なキーがある場合のJSONオブジェクト比較方法

JavaScriptでは、片方のオブジェクトがもう片方より多くのキーを持っている場合でも、共通するキーの値だけを比較したい場面があります。本記事では、どちらかのデータを削除することなく、2つのJSONオブジェクトを比較してブール値(true / false)を返す関数の実装方法を解説します。

問題の確認

まず、次のような2つのJSONオブジェクトを例に考えてみましょう。

const obj1 = {a: "apple", b: "banana", c: "carrot"};
const obj2 = {a: "apple", e: "egg", b: "banana", c: "carrot", d: "dog"};

ここで求められるのは、このような2つのオブジェクトを受け取り、互いにデータを削除することなく比較できるブール値の判定を行うJavaScript関数です。

たとえば上記のデータの場合、両方のオブジェクトに存在するキーの値がすべて一致しているため、判定結果は true を返すべきです。

ところが、obj1はそのままにして、obj2を次のように変更するとどうなるでしょうか。

const obj1 = {a: "apple", b: "banana", c: "carrot"};
const obj2 = {a: "ant", e: "egg", b: "banana", c: "carrot", d: "dog"};

このケースでは、他のフィールドが一致しており、一部のフィールドが片方にしか存在しないとしても、キー「a」の値が一致していないため、判定結果は false を返す必要があります。

サンプルコード

これを実現するコードは以下のとおりです。

const obj1 = {
    a: "apple",
    b: "banana",
    c: "carrot"
};

const obj2 = {
    a: "apple",
    b: "banana",
    c: "carrot",
    d: "dog",
    e: "egg"
};

const obj3 = {a: "apple", b: "banana", c: "carrot"};
const obj4 = {a: "ant", e: "egg", b: "banana", c: "carrot", d: "dog"};

function checkEquality(a, b) {
    const entries1 = Object.entries(a);
    const entries2 = Object.entries(b);
    // エントリ数が少ない方を short、多い方を long とする
    const short = entries1.length > entries2.length ? entries2 : entries1;
    const long = short === entries1 ? b : a;
    // 少ない方のすべてのキーと値が、もう片方と一致するかを検証
    const isEqual = short.every(([k, v]) => long[k] === v);
    return isEqual;
}

console.log(checkEquality(obj1, obj2)); // true
console.log(checkEquality(obj3, obj4)); // false

出力結果

コンソールには次のように表示されます。

true
false

コードの仕組み

この関数の動作を順を追って説明します。

  • Object.entries():オブジェクトを [キー, 値] のペアからなる配列に変換します。これにより、配列メソッドを使った柔軟な操作が可能になります。
  • エントリ数の比較:2つのエントリ配列の長さを比べ、短い方を short、対応するオブジェクトを long として設定します。これにより、片方に余分なキーがあっても比較に影響しません。
  • Array.prototype.every()short 側のすべてのキーと値が、long 側の同じキーの値と厳密等価演算子(===)で一致するかを確認します。1つでも不一致があれば false を返します。

つまり、この関数は「共通するキーの値がすべて一致していれば true、1つでも異なれば false」という条件で、キーの数や構成の違いを許容する柔軟な等価チェックを実現しています。ネストされたオブジェクトではなくフラットな構造を対象とする場合、シンプルかつ効率的な手法なので、APIレスポンスの差分確認などにも応用できます。

  1. JavaScriptでオブジェクトの値をキーにマッピングする方法(逆マッピングの実装)

    JavaScriptでは、オブジェクトの「キー」と「値」を入れ替えて新しいオブジェクトを作成したい場面があります。これを逆マッピング(リバースマップ)と呼びます。本記事では、その具体的な実装方法を解説します。問題の概要まず、次のようなオブジェクトがあるとします。const obj = { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 };このようなオブジェクトを引数として受け取り、値をキーへ、キーを値へと反転させた新しいオブジェクトを返す関数を作成する必要があります。つまり、上記のオブジェクトの場合、期待される出力は次のよ

  2. 【JavaScript】ネストしたJSONオブジェクトをドット記法でフラット化する方法

    JavaScriptでは、APIレスポンスなどで受け取るJSONオブジェクトが、任意の深さまで入れ子(ネスト)になっていることがよくあります。このようなネスト構造を持つオブジェクトを、キーをドット記法で連結したフラットな1階層のオブジェクトへ変換したい場面は少なくありません。 例として、次のようなJSONオブジェクトを考えてみましょう。このオブジェクトは、いくらでも深くネストしうる構造を持っています。 const obj = { one: 1, two: { three: 3 }, four: { five: 5,