如何比较两个不同的javascript对象具有相同的属性（不比较实例函数）

Question

How do I compare the tree structure inside an object task with the obj_after tree, without having to actually compare individual nodes in the tree. (one is an instance of a class ie with instance methods and the other has no functions just data).

Please read below to understand my exact problem (not so clear from the above).

I am writing a script that builds a GUI based on a js object tree. I am using coffeescript for this.

I would like to create a class that takes a json, and build the tree.

window.GuiTree = class GuiTree
    constructor:(json_GUI_tree)->

But the problem I am having is in testing this. I would like to add methods to this class like 'add_node'. That adds a new node to the GuiTree.

So I try this in Jasmine.

obj_before =
  1:
    type:"text" 
    name:"task"
    label:"Task"
  2:
    type:"subsection"
    sections:
      3:
        4:
          type:"text" 
          name:"subtask"
          label:"Subtask"   


obj_after =
  1:
    type:"text" 
    name:"task"
    label:"Task"
  2:
    type:"subsection"
    sections:
      3:
        4:
          type:"text" 
          name:"subtask"
          label:"Subtask"   
        5:
          type:"text" 
          name:"subtask"
          label:"Subtask"

Where I have added the task 5 to the Gui tree

And I would like to test it like this

task = new GuiTree(obj_before)
expect(task.add(3, node_5)).givesNewTree(obj_after)

The matcher 'givesNewTree' is a custom matcher.

The problem is here !! how do I compare the tree structure inside the object task with the obj_after tree, without having to actually compare individual nodes in the tree. (one is )

To me it looks like lots of error prone code to write to compare the trees. So I may need to write tests to test. Is there a smarter way.

Answer 1

What you're looking for is an implementation of deep equivalence. They're not necessarily error prone, in fact there are several known implementation, the most well known is QUnit's deepEqual implementation. Here's another. Granted it's a quite complicated algorithm.

Your could of course also define a .equals (or similarly named) method in your GuiTree class that compares two instances in a simpler way based on what you already know is significant about them, but I would try existing deep equal algorithms first since you might be able to import previously written code that you already know is correct.

A hackish alternative is to do JSON.stringify() on both objects and expect the resulting JSON encoded strings to be equal, but I suspect that could lead to various problems with circular references and the like, but it might get you started.

Answer 2

Just today, Underscore.js 1.2.0 came out, with a new _.isEqual function that can handle cycles. Underscore is a robust, mature, and reasonably small library that works in both client-side and server-side JavaScript.