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

编辑：要制作同一对象的多个副本而又彼此不修改，可以使用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 2

它不是那样工作的，当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"}]

表示用户对象引用与您在哪个数组中设置的引用相同，因此，当您使用map返回新数组时，对象引用保持不变，因此您在两个数组中在对象中所做的所有操作都是相同的，您可以这样做以防止发生这种情况

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

});

Answer 3

您犯了 2个错误。

1）通过引用复制阵列。因此时间表也会被修改

2）不返回地图中的修改元素

尝试一下

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

   });

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

3 个答案:

尝试一下