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

【JavaScript入門】2つのオブジェクトを比較する方法をわかりやすく解説

JavaScriptにおいて、オブジェクトは配列や文字列とは異なる性質を持っています。そのため、「===」や「==」といった演算子で単純に比較することはできません。オブジェクト同士を比較するには、まず文字列化（stringify）を行い、その結果を等価演算子で比較する必要があります。

次の例では、まずオブジェクトをJSON.stringify()で文字列化してから、互いに比較しています。

例

<html>
<body>
    <script>
        const obj1 = {Name: "Rahim", City: 'Hyderabad', Country: "India" };
        const obj2 = {Name: "Rahim", City: 'Hyderabad', Country: "India" };
        document.write(JSON.stringify(obj1) === JSON.stringify(obj2));
    </script>
</body>
</html>

出力

true

続く例のように、同じプロパティを持っていても記述の順序が異なる場合を考えてみましょう。この場合、出力結果が示すとおり、比較結果はfalseとなります。

例

<html>
<body>
    <script>
        const obj1 = {Name: "Rahim", City: 'Hyderabad', Country: "India" };
        const obj2 = {Name: "Rahim", Country: "India", City: 'Hyderabad'};
        document.write(JSON.stringify(obj1) === JSON.stringify(obj2));
    </script>
</body>
</html>

出力

false

この欠点を克服するために活用できるのが、「lodash」というJavaScriptライブラリです。lodashはプロパティの並び順ではなく、キーと値のペアが等しいかどうかを判定してくれます。

例

次の例では、lodashの「_.isEqual()」メソッドを使用してJavaScriptオブジェクトを比較しています。JSON.stringify()による比較ではfalseになる一方で、_.isEqual()ではtrueが返される点に注目してください。

<html>
<head>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
</head>
<body>
    <script>
        const obj1 = {Name: "Rahim", City: 'Hyderabad', Country: "India" };
        const obj2 = {Name: "Rahim", Country: "India", City: 'Hyderabad'};
        document.write(JSON.stringify(obj1) === JSON.stringify(obj2));
        document.write("</br>");
        document.write(_.isEqual(obj1, obj2));
    </script>
</body>
</html>

出力

false
true

補足：JSON.stringify()による比較の注意点

JSON.stringify()を使った比較は手軽な反面、プロパティの順序が異なるとfalseになるほか、値がundefinedのプロパティや関数、Symbolなどは文字列化の際に無視されるため、正確な比較ができないケースがあります。実務では、lodashの_.isEqual()や、Node.js標準のutil.isDeepStrictEqual()など、深い比較（ディープイコール）に対応したメソッドを利用するのが確実です。

  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