JavaScriptオブジェクトの比較方法：厳密等価演算子 (===) vs 浅い比較 (==)

2024-04-07

JavaScriptオブジェクトの比較方法

厳密等価演算子 (===)

最も単純な方法は、厳密等価演算子 === を使用する方法です。これは、2つのオブジェクトが同じメモリ位置を参照しているかどうかを厳密にチェックします。つまり、オブジェクトの内容が同じであっても、異なるメモリ位置を参照している場合はfalseを返します。

const obj1 = { name: 'Taro', age: 30 };
const obj2 = { name: 'Taro', age: 30 };

console.log(obj1 === obj2); // false

浅い比較

2つ目の方法は、浅い比較です。これは、オブジェクトのプロパティ名が同じかどうかだけを比較します。プロパティの値は比較されません。

const obj1 = { name: 'Taro', age: 30 };
const obj2 = { name: 'Taro', age: 30 };

console.log(obj1 == obj2); // true

3つ目の方法は、深い比較です。これは、オブジェクトのプロパティ名と値の両方を比較します。再帰的にプロパティを辿り、すべてのプロパティが同じかどうかを確認します。

オブジェクトの深い比較には、いくつかの方法があります。

lodash.isEqual 関数を使用する: lodashライブラリに含まれる isEqual 関数は、オブジェクトの深い比較を行うために使用できます。

const obj1 = { name: 'Taro', age: 30 };
const obj2 = { name: 'Taro', age: 30 };

console.log(_.isEqual(obj1, obj2)); // true

自作の再帰関数を使用する: 再帰関数を使用して、オブジェクトのプロパティを再帰的に比較することもできます。

function deepEqual(obj1, obj2) {
  if (obj1 === obj2) {
    return true;
  }

  if (typeof obj1 !== 'object' || typeof obj2 !== 'object') {
    return false;
  }

  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);

  if (keys1.length !== keys2.length) {
    return false;
  }

  for (const key of keys1) {
    if (!keys2.includes(key)) {
      return false;
    }

    if (!deepEqual(obj1[key], obj2[key])) {
      return false;
    }
  }

  return true;
}

const obj1 = { name: 'Taro', age: 30 };
const obj2 = { name: 'Taro', age: 30 };

console.log(deepEqual(obj1, obj2)); // true

オブジェクトが同じメモリ位置を参照しているかどうかだけを確認したい場合は、厳密等価演算子 === を使用します。
オブジェクトのプロパティ名が同じかどうかだけを確認したい場合は、浅い比較を使用します。

lodashライブラリを使用している場合は、lodash.isEqual 関数が便利な場合があります。再帰関数を使用する場合は、コードが複雑になる可能性があることに注意してください。

厳密等価演算子 (===)

const obj1 = { name: 'Taro', age: 30 };
const obj2 = { name: 'Taro', age: 30 };

console.log(obj1 === obj2); // false

このコードでは、obj1 と obj2 は同じプロパティ名と値を持つ2つのオブジェクトです。しかし、=== 演算子はオブジェクトが同じメモリ位置を参照しているかどうかを厳密にチェックするため、falseを返します。

浅い比較

const obj1 = { name: 'Taro', age: 30 };
const obj2 = { name: 'Taro', age: 30 };

console.log(obj1 == obj2); // true

このコードでは、== 演算子はオブジェクトのプロパティ名が同じかどうかだけを比較するため、trueを返します。

深い比較

lodash.isEqual 関数を使用する

const obj1 = { name: 'Taro', age: 30 };
const obj2 = { name: 'Taro', age: 30 };

console.log(_.isEqual(obj1, obj2)); // true

このコードでは、lodash.isEqual 関数を使用してオブジェクトを深く比較します。lodash ライブラリがインストールされていない場合は、最初にインストールする必要があります。

再帰関数を使用する

function deepEqual(obj1, obj2) {
  if (obj1 === obj2) {
    return true;
  }

  if (typeof obj1 !== 'object' || typeof obj2 !== 'object') {
    return false;
  }

  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);

  if (keys1.length !== keys2.length) {
    return false;
  }

  for (const key of keys1) {
    if (!keys2.includes(key)) {
      return false;
    }

    if (!deepEqual(obj1[key], obj2[key])) {
      return false;
    }
  }

  return true;
}

const obj1 = { name: 'Taro', age: 30 };
const obj2 = { name: 'Taro', age: 30 };

console.log(deepEqual(obj1, obj2)); // true

このコードでは、再帰関数を使用してオブジェクトを深く比較します。この関数は、2つのオブジェクトが同じプロパティ名と値を持つかどうかを再帰的にチェックします。

JavaScriptオブジェクトを比較するその他の方法

Object.is() メソッド

Object.is() メソッドは、ES2015で導入された新しい比較方法です。これは、厳密等価演算子 (===) と似ていますが、NaN (Not a Number) の値も正しく処理します。

const obj1 = NaN;
const obj2 = NaN;

console.log(obj1 === obj2); // false
console.log(Object.is(obj1, obj2)); // true

JSON.stringify を使用する

2つのオブジェクトをJSON文字列に変換し、比較することができます。2つのJSON文字列が等しい場合、2つのオブジェクトも等しいとみなされます。

const obj1 = { name: 'Taro', age: 30 };
const obj2 = { name: 'Taro', age: 30 };

const json1 = JSON.stringify(obj1);
const json2 = JSON.stringify(obj2);

console.log(json1 === json2); // true

この方法は、オブジェクトの構造が単純な場合にのみ有効です。複雑なオブジェクトの場合、この方法はパフォーマンスが低下する可能性があります。

カスタムの比較関数を使用する

独自の比較ロジックが必要な場合は、カスタムの比較関数を作成することができます。この関数は、2つのオブジェクトを引数として受け取り、true または false を返す必要があります。

function compareObjects(obj1, obj2) {
  // 独自の比較ロジックを実装する
  // ...

  return true; // 2つのオブジェクトが等しい場合
  return false; // 2つのオブジェクトが等しくない場合
}

const obj1 = { name: 'Taro', age: 30 };
const obj2 = { name: 'Taro', age: 30 };

console.log(compareObjects(obj1, obj2)); // true