JavaScript でオブジェクトを比較する

1. JavaScript の JSON.stringify() 関数を使用してオブジェクトを比較する
2. JavaScript でオブジェクトを手動で比較する

このチュートリアルでは、手動で、または JavaScript の JSON.stringify() 関数を使用してオブジェクトを比較する方法について説明します。

JavaScript の JSON.stringify() 関数を使用してオブジェクトを比較する

JavaScript で変数を比較するのは比較的簡単です。2つの変数間で比較演算子 === を使用する必要があります。変数は、文字列や整数など、任意のデータ型にすることができます。

比較演算子はブール値を返します。ブール値は、比較される変数に応じて true または false になります。たとえば、比較演算子を使用して、文字列型の 2つの変数を比較してみましょう。

以下のコードを参照してください。

var a = 'Apple';
var b = 'Apple';
console.log(a === b)

出力：

true

出力で、ブール値 true は、2つの変数が同一であることを示します。同様に、数値を比較することもできます。それでは、JavaScript でのオブジェクトの比較について説明しましょう。

オブジェクトには複数の値が含まれているため、オブジェクトの比較は簡単ではありません。また、オブジェクトを内部に含めることもできます。2つのオブジェクトを比較するための高速で簡単な方法は、JASON.stringify() 関数を使用することです。この方法の欠点は、プロパティの順序が比較して重要になることです。

この関数は、一方のオブジェクトの最初のプロパティをもう一方のオブジェクトの最初のプロパティと比較します。オブジェクトの 1つでプロパティの順序を変更すると、このメソッドは機能しません。たとえば、JSON.strigify() 関数を使用して 2つのオブジェクトを比較してみましょう。

以下のコードを参照してください。

const fruit1 = {
  name: 'Apple',
  price: '2'
};
const fruit2 = {
  name: 'Apple',
  price: '2'
};
console.log(JSON.stringify(fruit1) === JSON.stringify(fruit2))

出力：

true

このコードでは、それぞれ 2つのプロパティを含む 2つのオブジェクトを比較しています。出力から、2つのオブジェクトは等しいです。次に、1つのオブジェクトの 2つのプロパティの順序を変更してから、JSON.stringify() 関数を使用して他のオブジェクトと比較してみましょう。

以下のコードを参照してください。

const fruit1 = {
  name: 'Apple',
  price: '2'
};
const fruit2 = {
  price: '2',
  name: 'Apple'
};
console.log(JSON.stringify(fruit1) === JSON.stringify(fruit2))

出力：

false

出力では、結果は false です。2 番目のオブジェクトのプロパティの順序を変更しました。これがこの方法の欠点です。

JavaScript でオブジェクトを手動で比較する

上記の方法には欠点があるため、2つのオブジェクトを比較する独自の関数を作成して、オブジェクトのプロパティの順序を気にする必要がないようにすることができます。

たとえば、JavaScript で上記のオブジェクトを比較する関数を作成しましょう。以下のコードを参照してください。

function ObjCompare(obj1, obj2) {
  if (obj1.name === obj2.name && obj1.price === obj2.price) {
    return true;
  };
  return false;
}
const fruit1 = {
  name: 'Apple',
  price: '2'
};
const fruit2 = {
  price: '2',
  name: 'Apple'
};
console.log(ObjCompare(fruit1, fruit2))

出力：

true

上記のコードでは、ObjCompare() 関数を作成し、順序に関係なく、プロパティに従って 2つのオブジェクトを比較しました。この関数は、2つのオブジェクトの名前と価格が同じ場合にのみ true を返します。それ以外の場合は、false を返します。

独自の関数を作成して、複数のプロパティを比較したり、使用可能なすべてのプロパティから比較したい 1つのプロパティを比較したりすることもできます。一度に 3つ以上のオブジェクトを比較する別の関数を作成することもできます。

ここで、多くのプロパティを持つ 2つのオブジェクトがあり、それらすべてのプロパティを比較したいとします。このような機能を作るには時間がかかります。

代わりに、Object.keys() 関数を使用して、関数のすべてのキーまたはプロパティを取得し、ループを使用してそれらを比較できます。すべてのプロパティが同じである場合、関数は true を返します。それ以外の場合は、false を返します。

たとえば、この関数を作成して、上記の 2つのオブジェクトでテストしてみましょう。以下のコードを参照してください。

function ObjCompare(obj1, obj2) {
  const Obj1_keys = Object.keys(obj1);
  const Obj2_keys = Object.keys(obj2);
  if (Obj1_keys.length !== Obj2_keys.length) {
    return false;
  }
  for (let k of Obj1_keys) {
    if (obj1[k] !== obj2[k]) {
      return false;
    }
  }
  return true;
}
const fruit1 = {
  name: 'Apple',
  price: '2',
  color: 'red'
};
const fruit2 = {
  price: '2',
  name: 'Apple',
  color: 'red'
};
console.log(ObjCompare(fruit1, fruit2))

出力：

true

このプログラムでは、ObjCompare() 関数内の最初の if ステートメントを使用して、2つのオブジェクト内のプロパティまたはキーの長さをチェックします。

それらが等しくない場合、関数は false を返し、ループに移動しません。このメソッドは、プロパティの順序やオブジェクトのキーを変更した場合でも正常に機能します。この関数を変更して、一度に 3つ以上のオブジェクトを比較することもできます。