如何验证两个对象数组答案

【问题标题】：How to validate two array of objects如何验证两个对象数组
【发布时间】：2019-02-06 11:01:53
【问题描述】：

解释： 子组件方法已从父组件调用，并使用array of objects 作为参数。在子组件中，将此array 赋值给一个变量。

父组件：

let obj = [{
             'prop1': 'value1',
             'prop2': 'value2'
           },{
             'prop1': 'value1',
             'prop2': 'value2'
           }];

this.child.sendObject(obj);

子组件：

public sendObject(obj) : void {
   this.updatedObj = obj;
}

问题陈述：

从父组件传递的对象的属性可以更新并发送到子组件。

父组件：

  let obj = [{
         'prop1': 'value4',
         'prop2': 'value2'
       },{
         'prop1': 'value1',
         'prop2': 'value7'
       }];

  this.child.sendObject(obj);

可以在obj数组中的子组件本身中添加新对象。

子组件：

  public sendObject(obj) : void {
     this.updatedObj = obj;
  }

  public addNewObj() {
     this.updatedObj.push({
       'prop3': 'value3',
       'prop4': 'value4 
     })
  }

我想用这个更新的对象验证（检查相等性）先前发送的对象。

到目前为止我尝试了什么？

子组件：

public sendObject(obj) : void {
    const copy = JSON.parse(JSON.stringify(obj));
    this.updatedObj = obj;

    if (JSON.stringify(this.updatedObj) === JSON.stringify(copy)) {
       console.log("Not changed");
    } else {
       console.log("Changed");
    }
}

如果从父组件修改了对象属性，但如果我将任何新对象添加到子组件中的现有数组 (this.updatedObj) 并从父组件切换回子组件，则上述逻辑工作正常。它中断并仅显示从父级传递的对象。

【问题讨论】：

在最后一段代码中，将obj 的副本分配给let copy，然后将obj 分配给this.updatedObj，最后比较copy 和this.updatedObj 是否是相同，它们将始终相同，因为您只是将相同的 obj 分配给两个变量
此外，由于您将obj 立即分配给this.updatedObj，因此子组件设置的任何内容都将被覆盖。不过，我必须同意@ludevik。只需让一个组件负责obj，您就可以省去很多麻烦。

标签： javascript arrays json angular object

【解决方案1】：

只有一个组件应该是数组的“所有者”。在您的情况下，看起来父母应该对此负责。子组件不应该直接将数据推送到数组，而是应该使用它想要添加的数据向其输出发出事件，并且父组件应该将这些数据推送到数组中。

【讨论】：

【解决方案2】：

您使用 JSON.stringify 的解决方案很脆弱，因为无法保证对象内部的键顺序。这些对象都是一样的，但是比较会失败：

让 obj1 = { “道具1”：“价值1”， “道具2”：“价值2” };

让 obj2 = { “道具2”：“价值2”， “道具1”：“价值1” };

您可以在字符串化之前对每个对象的键进行递归排序，但由于排序和字符串化会很慢。

您可以使用 Lodash (https://lodash.com/docs#isEqual) 或 Underscore (https://underscorejs.org/#isEqual) 等库中的“深度相等”函数。

如果您想构建自己的比较函数，请查看以下问题的答案：Object comparison in JavaScript

【讨论】：