JavaScript でオブジェクトを比較するいくつかの方法

次の記事では、JavaScript オブジェクトを正しく比較する 4 つの方法を説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

#JavaScript での生の値の比較は非常に簡単です。厳密等価演算子など、使用可能な等価演算子のいずれかを使用してください。

'a' === 'c'; // => false
1   === 1;   // => true

ただし、オブジェクトには構造化データがあるため、比較は困難です。この記事では、JavaScript でオブジェクトを正しく比較する方法を学びます。

1. 参照の比較

JavaScript には、値を比較するための 3 つのメソッドが用意されています:

• 厳密等価演算子 ===
• 緩い等価演算子==
• Object.is() Function

任意のオブジェクトを使用してオブジェクトを比較する場合上記のメソッドでは、比較された値が同じオブジェクト インスタンスを参照している場合にのみ、比較は true と評価されます。これは 参照の等価性 です。

オブジェクト hero1 と hero2 を定義して、実際の参照等価性を見てみましょう:

const hero1 = {
  name: 'Batman'
};
const hero2 = {
  name: 'Batman'
};

hero1 === hero1; // => true
hero1 === hero2; // => false

hero1 == hero1; // => true
hero1 == hero2; // => false

Object.is(hero1, hero1); // => true
Object.is(hero1, hero2); // => false

hero1 === hero1 は評価します。両方のオペランドが同じオブジェクト インスタンス hero1 を指しているため、true に変更されます。

一方、hero1 === hero2 は、hero1 と hero2 が異なるオブジェクトであるため、false と評価されます。インスタンス。

興味深いことに、hero1 オブジェクトと hero2 オブジェクトの内容は同じです。両方のオブジェクトには name 属性があり、その他の値は「バットマン」です。それでも、同じ構造のオブジェクトを比較する場合でも、hero1 === hero2 の結果は false になります。

参照の等価性は、内容ではなくオブジェクト参照を比較する場合に便利です。しかし、多くの場合、オブジェクトの実際の内容 (プロパティとその値など) に基づいてオブジェクトを比較する必要があります。

次に、オブジェクトの内容が等しいかどうかを比較する方法を見てみましょう。

2. 手動比較

オブジェクトを内容別に比較する最も簡単な方法は、プロパティを読み取り、手動で比較することです。

たとえば、2 つのヒーロー オブジェクトを比較する特別な関数 isHeroEqual() を作成してみましょう。

function isHeroEqual(object1, object2) {
  return object1.name === object2.name;
}

const hero1 = {
  name: 'Batman'
};
const hero2 = {
  name: 'Batman'
};
const hero3 = {
  name: 'Joker'
};

isHeroEqual(hero1, hero2); // => true
isHeroEqual(hero1, hero3); // => false

isHeroEqual() 両方のオブジェクトのプロパティにアクセスします。 name を実行し、その値を比較します。

比較対象のオブジェクトにいくつかのプロパティがある場合は、isHeroEqual() のような比較関数を作成することを好みます。このような関数は優れたパフォーマンスを発揮します。比較には少数のプロパティ アクセサーと等価演算子のみが含まれます。

手動比較ではプロパティを手動で抽出する必要がありますが、単純なオブジェクトの場合は問題ありません。ただし、より大きなオブジェクト (または構造が不明なオブジェクト) を比較するには、多くの定型コードが必要になるため不便です。

それでは、オブジェクトの浅い比較がどのように役立つかを見てみましょう。

3. 浅い比較

浅い比較を使用してオブジェクトをチェックする場合は、(Object.keys() を使用して) 両方のオブジェクトのプロパティ リストを取得する必要があります。 )、それらの属性値が等しいかどうかを確認します。

次のコードは浅い比較の実装方法です:

function shallowEqual(object1, object2) {
  const keys1 = Object.keys(object1);
  const keys2 = Object.keys(object2);

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

  for (let index = 0; index < keys1.length; index++) {
    const val1 = object1[keys1[index]];
    const val2 = object2[keys2[index]];
    if (val1 !== val2) {
      return false;
    }
  }

  return true;
}

関数内では、keys1 と keys2 にそれぞれ ## が含まれています。 #object1 および object2 属性名。

for を使用してキーをループし、object1 と object2 の各プロパティを比較します。

浅い比較を使用すると、多くのプロパティを持つオブジェクトの等価性を簡単にチェックできます。

const hero1 = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};
const hero2 = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};
const hero3 = {
  name: 'Joker'
};

shallowEqual(hero1, hero2); // => true
shallowEqual(hero1, hero3); // => false

shallowEqual(hero1, hero2) 戻り値 true。オブジェクト hero1 と hero2 は同じプロパティ (name と realName) を持ち、値も同じです。

一方、

hero1 と hero3 は異なるプロパティを持つため、shallowEqual(hero1, hero3) は false# を返します。 ##。 ただし、JavaScript のオブジェクトはネストできます。この場合、浅い比較はうまく機能しません。

以下は、ネストされたオブジェクトを持つオブジェクトに対して浅い比較チェックを実行します。

const hero1 = {
  name: 'Batman',
  address: {
    city: 'Gotham'
  }
};
const hero2 = {
  name: 'Batman',
  address: {
    city: 'Gotham'
  }
};

shallowEqual(hero1, hero2); // => false

今回は、2 つのオブジェクト

hero1

と hero2 を使用します。同じコンテンツの場合、shallowEqual(hero1, hero2) も false を返します。 これは、ネストされたオブジェクト

hero1.address

と hero2.address が異なるオブジェクト インスタンスであるために発生します。したがって、浅い比較では、hero1.address と hero2.address が 2 つの異なる値であると見なされます。 ネストされたオブジェクトの問題を解決するには、詳細な比較が必要です。

4. 深い比較

深い比較は浅い比較と似ていますが、オブジェクトがプロパティに含まれている場合、再帰的な浅い比較がプロパティに対して実行される点が異なります。ネストされたオブジェクトのレイヤー比較。

詳細な比較の実装を見てください:

function deepEqual(object1, object2) {
  const keys1 = Object.keys(object1);
  const keys2 = Object.keys(object2);

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

  for (let index = 0; index < keys1.length; index++) {
    const val1 = object1[keys1[index]];
    const val2 = object2[keys2[index]];
    const areObjects = isObject(val1) && isObject(val2);
    if (areObjects && !deepEqual(val1, val2) || 
        !areObjects && val1 !== val2) {
      return false;
    }
  }

  return true;
}

function isObject(object) {
  return object != null && typeof object === &#39;object&#39;;
}

第 13 行的 areObjects && !deepEqual(val1, val2)  一旦检查到的属性是对象，则递归调用将会开始验证嵌套对象是否也相等。

现在用 deepEquality() 比较具有嵌套对象的对象：

const hero1 = {
  name: 'Batman',
  address: {
    city: 'Gotham'
  }
};
const hero2 = {
  name: 'Batman',
  address: {
    city: 'Gotham'
  }
};

deepEqual(hero1, hero2); // => true

深度比较函数能够正确地确定 hero1 和 hero2 是否具有相同的属性和值，包括嵌套对象  hero1.address  和 hero2.address 的相等性。

为了深入比较对象，我建议使用Node内置util模块的  isDeepStrictEqual(object1, object2)  或lodash 库的 _.isEqual(object1, object2) 。

5. 总结

引用相等性（使用  ===、 == 或 Object.is()）用来确定操作数是否为同一个对象实例。

手动检查对象是否相等，需要对属性值进行手动比较。尽管这类检查需要手动编码来对属性进行比较，但由于很简单，所以这种方法很方便。

当被比较的对象有很多属性或在运行时确定对象的结构时，更好的方法是使用浅层检查。

如果比较的对象具有嵌套对象，则应该进行深度比较检查。

英文原文地址：https://dmitripavlutin.com/how-to-compare-objects-in-javascript/

作者：Dmitri Pavlutin

译文地址：https://segmentfault.com/a/1190000022913676

更多编程相关知识，请访问：编程入门！！

以上がJavaScript でオブジェクトを比較するいくつかの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。