浏览器工具中的 [] 与 [{...}]，但两者具有相同的对象

如果你看一下图片，两个数组都由相同类型的对象组成。第一个我使用空数据作为占位符创建它，但第二个我使用来自服务器的数据创建它。

  writeValue(v: any) {
    console.log('aaa');
    console.log(v);
    console.log('aaa');
    this.form = new FormArray([]);
    for (const value of v) {
      console.log('bbb');
      console.log(value);
      console.log('bbb');
      this.form.push(new FormControl(value));
    }
    this.form.valueChanges.subscribe(res => {
      if (this.onChange) {
        this.onChange(this.form.value);
      }
    });
  }

对于第一种情况，它会遍历所有 writeValue 代码，对于第二种情况，它不会遍历 for(v 的 const value) 代码。为什么会发生这种情况？当我打印出来时，它们似乎是相同的，除了浏览器工具中的 [{...}] 与 [] 之间的一个差异。

如果你想看看我是如何创建它们的。第一个是routes，第二个是routeslocal。我将它们放在有角度的 formcontrol 中，这就是它如何通过 controlvalueaccessor 来 writeValue。如果你想知道它是如何工作的，你可以查看我之前的问题here。还有更多代码，但不包括服务。

ngOnInit() {

    const routes: any[] = [];
    routes.push({ ...dataI });

    this.requestForm = this.fb.group({
      statusId: null,
      requestVehicles: this.fb.array([
        this.fb.group({
          garageId: 0,
          routes: new FormControl(routes),
          endDateTime: 0,
        })
      ])
    });

    if (this.data.isEdit) {
      this.Title = 'Edit';
      this.data.fService.getRequest(this.data.requestId).subscribe(thisRequest => {
        this.requestForm = this.fb.group({
          statusId: thisRequest.status,
          requestVehicles: this.fb.array([
          ])
        });
        thisRequest.requestVehicles.forEach((element, index) => {

          const routeslocal: any[] = [];
          element.routes.forEach((elementt, indexx) => {
            this.data.fService.getAddressPoint(elementt).subscribe(sbed => {
              const newRoute = {
                addressPointId: sbed.addressPointId,
                municipalityId: sbed.municipalityId,
                regionId: sbed.regionId,
                rvId: element.rvId,
                sequenceNumber: indexx,
                settlementId: sbed.settlementId,
                regionName: sbed.regionName,
                municipalityName: sbed.municipalityName,
                settlementName: sbed.settlementName,
                description: sbed.description,
              };
              routeslocal.push({...newRoute});
            });
          });

          this.requestVehicles.push(this.fb.group({
            endDateTime: new Date(element.endDateTime),
            garageId: element.garageId,
            routes: new FormControl(routeslocal),
          }));
            });
          });
        });
      });
    }
  }

开场白线，[] or [{}]，立即绘制在控制台中。

如果是[]，在记录时数组中没有任何内容，因此浏览器将其绘制为空数组。但当你稍后查看并单击小三角形时，数据就出现了。

您可以在控制台中使用以下代码重现此行为：

;(function(){ let arr=[]; setTimeout(()=>{ arr[0] = {b:3}; }); return arr;})()

因此，您看到的差异与数组填充的同步性有关。