Javascript 如何验证两个对象数组

说明：已从父组件调用子组件方法，并将对象数组作为参数。在子组件中，将此

数组

赋给变量

父组件：

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

this.child.sendObject(obj);

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

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");
    }
}

子组件：

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

this.child.sendObject(obj);

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

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");
    }
}

问题陈述：

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

    let obj = [{
           'prop1': 'value4',
           'prop2': 'value2'
         },{
           'prop1': 'value1',
           'prop2': 'value7'
         }];
  
    this.child.sendObject(obj);
  

    public sendObject(obj) : void {
       this.updatedObj = obj;
    }
  
    public addNewObj() {
       this.updatedObj.push({
         'prop3': 'value3',
         'prop4': 'value4 
       })
    }
  

• 可以在

  obj

  数组中的子组件本身中添加新对象
  子组件：

    let obj = [{
           'prop1': 'value4',
           'prop2': 'value2'
         },{
           'prop1': 'value1',
           'prop2': 'value7'
         }];
  
    this.child.sendObject(obj);
  

    public sendObject(obj) : void {
       this.updatedObj = obj;
    }
  
    public addNewObj() {
       this.updatedObj.push({
         'prop3': 'value3',
         'prop4': 'value4 
       })
    }
  

我想用这个更新的对象验证（检查是否相等）以前发送的对象

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

子组件：

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

this.child.sendObject(obj);

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

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

）并从父级切换回子级，则上述逻辑工作正常。它打断并仅显示从父级传递的对象。

只有一个组件应该是数组的“所有者”。在你的情况下，看起来父母应该对此负责。然后，子组件不应直接将数据推送到数组中，而应将事件发送到其输出中，其中包含要添加的数据，父组件应将这些数据推送到数组中。

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

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

设obj1={ “prop1”：“value1”， “prop2”：“value2” };

设obj2={ “prop2”：“value2”， “prop1”：“value1” };

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

您可以使用Lodash（）或下划线（）等库中的“deep equal”函数

---

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

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

设obj1={ “prop1”：“value1”， “prop2”：“value2” };

设obj2={ “prop2”：“value2”， “prop1”：“value1” };

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

您可以使用Lodash（）或下划线（）等库中的“deep equal”函数

---

如果你想建立你自己的比较函数，看看这个问题的答案：

在你的最后一段代码中，你给

obj

分配一个副本给

let copy

，然后把

obj

分配给

this.updatedObj

，最后比较

copy

和

this.updatedObj

是否相同，它们总是相同的，因为您刚刚将相同的

obj

分配给了两个变量。同样，因为您立即将

obj

分配给了

this.updatedObj

，无论子组件将其设置为什么，都将被覆盖。不过，我必须同意@ludevik。如果只让一个组件负责

obj

，你将省去很多麻烦。在你的最后一块代码中，你将

obj

的一个副本分配给

let copy

，然后将

obj

分配给

this.updatedObj

，最后比较

copy

和

this.updatedObj

是否相同，它们总是相同的，因为您刚刚将相同的

obj

分配给了两个变量。同样，因为您立即将

obj

分配给了

this.updatedObj

，无论子组件将其设置为什么，都将被覆盖。不过，我必须同意@ludevik。如果只让一个组件负责

obj

，您将省去很多麻烦。