Как проверить два массива объектов

Question

Объяснение: Метод дочернего компонента был вызван из родительского компонента с 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) в дочернем компоненте и переключается обратно с родительского на дочерний.Он разбивает и показывает только объекты, переданные от родителя.

Answer 1

Ваше решение, использующее JSON.stringify, хрупкое, потому что нет никаких гарантий для порядка ключей внутри объектов.Эти объекты совпадают, но сравнение не удастся:

let obj1 = {'prop1': 'value1', 'prop2': 'value2'};

let obj2 = {'prop2 ':' value2 ',' prop1 ':' value1 '};

Вы можете рекурсивно сортировать ключи каждого объекта перед их строковой обработкой, но это будет медленным из-за сортировки и строковой обработки.

Вы можете использовать функцию «глубокого равенства» из библиотеки, такой как Lodash (https://lodash.com/docs#isEqual) или Underscore (https://underscorejs.org/#isEqual).

). Если вы хотите создать собственную функцию сравнения, взгляните на ответы на этот вопрос: Сравнение объектов в JavaScript

Answer 2

Только один компонент должен быть «владельцем» массива.В вашем случае, похоже, родитель должен нести ответственность за это.Затем дочерний компонент не должен передавать данные в массив напрямую, а вместо этого должен отправлять событие на свой выход с данными, которые он хочет добавить, а родительский должен помещать эти данные в массив.