过滤新对象时如何防止先前定义的对象更新（基于原始对象创建的新对象）

Question

我想根据年份过滤一组对象，但每当我过滤出一组值时，它都会过滤新创建的对象和原始对象中的值。但我希望原始对象保持不变，这样我就可以应用不同的过滤器。

我尝试过使用 .assign、JSON.parse(JSON.stringify(Object)) 和 clone deep 函数。

组件代码

export class LeaderboardComponent implements OnInit {
  title = "Leaderboard"
  public navList = [];
  public navFilterList = [];
  routeCount = 0; 
  logsCount = 0;
  completeJourneys = 0;
  selectFilter = "";
  selectDateFilter = "";
  currentDate = new Date;
  minutes = 1000 * 60;
  hours = this.minutes * 60;
  days = this.hours * 24;
  month = this.days * 30;
  years = this.days * 365;
  currTimestamp = this.currentDate.getTime();
  clonedObject;
  objCopy = [];

  constructor(private leaderboardService: LeaderboardService) { }

  ngOnInit() {
    this.leaderboardService.getNavList()
    .subscribe(data => {
      this.navList = data;
       this.objCopy = Object.assign([], data);
      console.log("here");
      console.log(this.objCopy);
    });
  }


  orderByDate(){
    console.log(this.objCopy);
    var tempLogArray = 0;
    this.navFilterList = this.objCopy;

    if(this.selectDateFilter != "all"){

      for(var i = 0; i < this.navFilterList.length; i ++){
        for(var j = 0; j < this.navFilterList[i].user.routes.length; j ++){
          for(var k = 0; k < this.navFilterList[i].user.routes[j].logs.length; k++){
                var logDate = new Date(this.navFilterList[i].user.routes[j].logs[k].attemptDate);
                this.navFilterList[i].user.routes[j].logs[k].timestamp = logDate.getTime(); 
          }
          this.navFilterList[i].user.routes[j].logs =  this.navFilterList[i].user.routes[j].logs.filter(log => ((this.currTimestamp - log.timestamp)/this.years)  < 1);
        }
      }
      console.log("here year");
    }
}
}

按日期调用过滤器的html代码

              <select [(ngModel)]="selectDateFilter"  (change)="orderByDate()" class="form-group" style="width: 100px;" >
                <option  disabled selected value="" >Order by: </option>
                <option  value = "week">Last 7 Days</option>
                  <option  value = "month">Last Month</option>
                  <option  value = "year" >Last Year</option>
                  <option  value = "all" >All Time</option>
                </select>

我希望 objCopy 始终包含从 API 中的 JSON 文件获取的数据，而是使用过滤后的数据进行更新。

Answer 1

分配了非原始值的变量将获得对该值的引用。该引用指向对象在内存中的位置。变量实际上并不包含值。

所以尝试使用spread 运算符

this.navFilterList = [...this.objCopy];

编辑：

我注意到您正在修改对象，这意味着 spread 运算符和 slice 将不起作用，因为它们是浅拷贝而不是深层克隆。

您的原始方法JSON.parse(JSON.stringify(Object)) 将适用于深度克隆：

this.navFilterList = JSON.parse(JSON.stringify(this.objCopy));