[] vs [{...}]在浏览器工具中，而两者都有相同的对象 [英] [] vs [{...}] in browser tools, while both having same objects

问题描述

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

If you look at the picture both arrays consist of same kind of object. first I create it with empty data as placeholder, but second one I create it with data coming from server.

  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的常量值)代码.为什么会这样呢?当我将它们打印出来时，它们似乎是相同的，只是浏览器工具中的[{...}]与[]不同.

for first case it goes through all of the writeValue code, for second one it doesn't go through the for(const values of v) code. why is this happening? when I print them out they seem to be the same other than one difference [{...}] vs [] in browser tools.

如果您想了解我如何创建它们.第一个是路由，第二个是routeslocal.我将它们放在有角度的formcontrol中，这就是如何通过controlvalueaccessor获得writeValue的方法.如果您想知道它是如何工作的，可以查看我以前的问题

If you want to see how I create them. the first one is routes and the second one is routeslocal. I put them in angular formcontrol, and thats how it gets to writeValue via controlvalueaccessor. If you want to know how it works you could check my previous question here. there is more code, but it doesn't include the service.

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

推荐答案

在控制台中立即画出开始线[]或[{}].

The opening line, [] or [{}], is immediately drawn in the console.

对于[]，在记录时数组中没有任何内容，因此浏览器将其绘制为空数组.但是稍后查看数据并单击小三角形时，数据就存在了.

In the case of [], there was nothing in the array at logging time, so the browser draw it as an empty array. But the data was present when you looked at it and clicked on the small triangle, later.

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

You can reproduce this behavior with this code in your console:

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

所以您看到的差异与数组填充的同步性有关.

So the difference you saw is related to the (a)synchronicity of array filling.

这篇关于[] vs [{...}]在浏览器工具中，而两者都有相同的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！