객체 배열 분류 동일 객체 참조 / 객체 복사(Object.assign)

- Object.assign()

Object.assign([], data)

Object.assign()은 JavaScript에서 객체를 복사하는 메서드입니다. 첫 번째 매개변수는 대상 객체이고, 나머지 매개변수는 복사하고자 하는 소스 객체입니다.

Object.assign([], data)는 빈 배열([])에 data 객체의 속성을 복사하여 새로운 배열을 생성하는 코드입니다. []는 빈 배열을 생성하는 것이며, data 객체의 속성들을 복사하여 새로운 배열로 만듭니다.

 

- 예시

전체리스트를 객체의 특정 속성 값에 따라 분류할 때 this.AList.push(data) 데이터를 push하는데

이때 AllList의 객체를 참조하게 됩니다.

그래서 아래에서 children메뉴를 필터링 할 때 BList의 값이 변경될 때 AList의 값도 변경되는 오류가 있었습니다.

 

배열의 요소를 직접 push하지 말고 배열의 요소들을 복사하여 새로운 배열을 생성하고, 그 배열을 AList와 BList에 할당해야 합니다.

그러기 위해서 Object.assign()을 사용한 코드입니다.

    this.AllList = [{title: 'menu1', children: [{title: 'menu1-1', option:'A'}, {title: 'menu1-2', option:'A,B'}]}...];
    for (let i = 0; i < this.AllList.length; i++) {
      let data = this.AllList[i];
      if (data.option.includes('A')) {
        this.AList.push(Object.assign([], data)); //객체 복사
      }
      if (data.option.includes('B')) {
        this.BList.push(Object.assign([], data)); //객체 복사
      }
          
    for (var i = 0; i < this.AList.length; i++) {
      let data = [];
      for (var j = 0; j < this.AList[i].children.length; j++) {
        if (this.AList[i].children[j].option.includes('A')) {
          data.push(this.AList[i].children[j]);
        }
      }
      this.AList[i]['children'] = data;
    }
    for (var i = 0; i < this.BList.length; i++) {
      let data = [];
      for (var j = 0; j < this.BList[i].children.length; j++) {
        if (this.BList[i].children[j].option.includes('B')) {
          data.push(this.BList[i].children[j]);
        }
      }
      this.BList[i]['children'] = data;
    }