订阅方法中的代码不按正确的顺序运行

Question

从get请求我收到对象数组，我想将该数据分配给两个不同的变量。一个变量将获得所有数据，第二个变量将获得该数据的变异版本。

我试过的代码：

this.service.getEmployeeTimesheets().subscribe(res => {

     this.timesheets = res; 
     this.mutatedTimesheets = res.map(j => {

       delete j["keyName1"];
       delete j["keyName2"]; 

     });
 console.log(this.mutatedTimesheets);

   });

会发生什么事情是由于某种原因，时间表值被改变并且mutatedTimesheets获得未定义的数组

Answer 1

它不起作用，当map函数返回新数组时它返回新数组，但是对象引用是相同的，例如，如果y有

    var user = {firstname:"user1",password:"pass123"};

    var first = [user];

    var second =[user];

    delete user["firstname"];

    console.log(first) // [{password:"pass123"}]
    console.log(second) // [{password:"pass123"}]

这意味着用户对象引用与您设置它的数组中的metter相同，因此当您使用map返回新数组时，对象引用保持不变，因此您在对象中执行的所有内容对于两个数组都是相同的，您可以这样做以防止发生了什么事

this.mutatedTimesheets = res.map(j => {
    let newObjectReference ={...j};
    delete newObjectReference["keyName1"];
    delete newObjectReference["keyName2"]; 
    return newObjectReference;

});

Answer 2

编辑：要制作同一个对象的多个副本而不让它们相互修改，您可以使用var obj = JSON.parse(JSON.stringify(res))。

所以在你的情况下：this.timesheets = JSON.parse(JSON.stringify(res));

关于对象克隆在javascript中的行为（例如：How do I correctly clone a JavaScript object?）有更深入的解释，但是JSON函数链在这里做了诀窍

---

在你的res.map()你忘记返回j：

this.mutatedTimesheets = res.map(j => {

    delete j["keyName1"];
    delete j["keyName2"]; 
    return j;

});

应该做的伎俩

Answer 3

你犯了2个错误。

1）通过引用复制数组。因此，时间表也会被修改

2）不从map返回修改后的元素

试试吧

this.service.getEmployeeTimesheets().subscribe(res => {

     this.timesheets = res; 
     this.mutatedTimesheets = res.map(j => {

       // Re-reference the current object
       j = {...j};

       delete j["keyName1"];
       delete j["keyName2"]; 

       return j;

     });

     console.log(this.mutatedTimesheets);

   });