我在 angular 中的 for 循环中得到相同的对象进行修改

Question

所以我想执行一个循环，它本质上是在迭代中修改元素的结构。但是，为了修改，我有一个预定义的结构对象，我已将其设置为默认对象。现在，当我遍历对象数组（需要修改的数组）的每个元素时，我将默认对象与当前元素一起发送到其他一些函数，这些函数本质上是 returns 一个修改后的对象。但是，发生的事情是我传递的默认对象在每次迭代后都会被修改。如何阻止我的默认对象被修改？

例如，我有要修改的数据

[{
    "name": "Sample 1",
    "session_id": "sample_id_1",
    "created": "2020-04-14T06:45:05.494Z",
    "isUploaded": false,
    "username": "username1",
    "topics": [
        {
            "name": "2",
            "isUploaded": true,
            "topic_id": "2"
        },
        {
            "name": "3",
            "isUploaded": true,
            "topic_id": "3"
        }
    ]
},
{
    "name": "Sample_2",
    "session_id": "sample_id_2",
    "created": "2020-04-14T05:43:10.643Z",
    "isUploaded": false,
    "username": "username2",
    "topics": [
        {
            "name": "2",
            "isUploaded": true,
            "topic_id": "2"
        },
        {
            "name": "1",
            "isUploaded": true,
            "topic_id": "1"
        },
        {
            "name": "4",
            "isUploaded": true,
            "topic_id": "4"
        }
    ]
}]

我想使用的默认对象数组是：

[
    {
      topic_id: '1',
      topic_status: '-1',
      topic_name:
      {
        en: 'Some english text 1?',
        hi: 'some hindi text 1?'
      },
      isPlayed: false,
      status: false
    }, {
      topic_id: '2',
      topic_status: '-1',
      topic_name: {
        en: 'some english text 2?',
        hi: 'some hindi text 2?'
      },
      isPlayed: false,
      status: false
    },
    {
      topic_id: '3',
      topic_status: '-1',
      topic_name: {
        en: 'some english text 3?',
        hi: 'some hindi text 3?'
      },
      isPlayed: false,
      status: false
    },
    {
      topic_id: '4',
      topic_status: '-1',
      topic_name: {
        en: 'some english text 4?',
        hi: 'some hindi text 4?'
      },
      isPlayed: false,
      status: false
    }
  ]

现在我写了这个循环，它将根据默认对象修改循环内的每个元素，如下所示：

async getServerSessionsAsLocal(serverSessions) { // serverSessions contains the sample Array of Objects described above
const newArray = [];
const defaultQuestionsForLocal = await this.userService.getUserQuestions(); // this will return the default object Array described above
if (defaultQuestionsForLocal) {
  for (let i = 0 ; i < serverSessions.length; ++i) {
    const generatedSession = this.syncService.generateSession(serverSessions[i], [...defaultQuestionsForLocal]); // this function essentially modifies the serverSession object according to the default object Array
    newArray.push(generatedSession);
  }
}
return [...newArray];

}

因此，函数 generateSession 的工作原理如下：它在提供的 serverSession[i] 对象中查找主题键（通过循环 defaultQuestionsForLocal 数组）并将其 topic_id 与 defaultQuestionsForLocal 中存在的 topic_id 匹配。如果匹配，它会将 defaultQuestions 元素的 topic_status 更新为 3，否则保持原样。现在考虑到我们正在使用默认的 QuestionsArray 修改索引 0 处的示例数据，生成的会话如下所示：

{
"name": "Sample 1",
"session_id": "sample_id_1",
"created": "2020-04-14T06:45:05.494Z",
"isUploaded": false,
"username": "username1",
"topics": [
    {
        "name": "1",
        "isUploaded": false,
        "topic_id": "1",
        "topic_status": -1
    },
    {
        "name": "2",
        "isUploaded": true,
        "topic_id": "2",
        "topic_status":3,
    },
    {
        "name": "3",
        "isUploaded": true,
        "topic_id": "3",
        "topic_status": 3,
    },
    {
        "name": "4",
        "isUploaded": false,
        "topic_id": "4",
        "topic_status": -1,
    },
]

}

现在我面临的问题是，当我将 defaultQuestionsArray 传递给 generateSession 函数时，它会在内部修改此 defaultQuestionsArray，将其分配回会话对象的主题键并 return 返回完整的对象。对于第一次迭代，一切似乎都很好，但是对于任何后续迭代，默认问题数组都会被修改。因此，在第二次迭代之后，将根据索引 2 处的示例对象修改 defaultQuestions 数组中每个元素中的 topic_status 键。因此，例如在第二次迭代之后，defaultQuestionsArray 看起来像：

[
{
  topic_id: '1',
  topic_status: '3',
  topic_name:
  {
    en: 'Some english text 1?',
    hi: 'some hindi text 1?'
  },
  isPlayed: false,
  status: false
}, {
  topic_id: '2',
  topic_status: '3',
  topic_name: {
    en: 'some english text 2?',
    hi: 'some hindi text 2?'
  },
  isPlayed: false,
  status: false
},
{
  topic_id: '3',
  topic_status: '3',
  topic_name: {
    en: 'some english text 3?',
    hi: 'some hindi text 3?'
  },
  isPlayed: false,
  status: false
},
{
  topic_id: '4',
  topic_status: '3',
  topic_name: {
    en: 'some english text 4?',
    hi: 'some hindi text 4?'
  },
  isPlayed: false,
  status: false
}

]

请注意，第 3 个索引对象设置为 3，因为它在第一次迭代中被修改，其余的在当前迭代中被修改。并且由于我将此结果对象分配给提供的会话对象的主题键，因此先前修改的对象的主题键也获得相同的值。这意味着，在第二次迭代之后，newArray 看起来像：

[{
 "name": "Sample 1",
 "session_id": "sample_id_1",
 "created": "2020-04-14T06:45:05.494Z",
 "isUploaded": false,
 "username": "username1",
 "topics": [
 {
    "name": "1",
    "isUploaded": false,
    "topic_id": "1",
    "topic_status": 3
 },
 {
    "name": "2",
    "isUploaded": true,
    "topic_id": "2",
    "topic_status":3,
 },
 {
    "name": "3",
    "isUploaded": true,
    "topic_id": "3",
    "topic_status": 3,
 },
 {
    "name": "4",
    "isUploaded": false,
    "topic_id": "4",
    "topic_status": 3,
 }
]
}, {
"name": "Sample_2",
"session_id": "sample_id_2",
"created": "2020-04-14T05:43:10.643Z",
"isUploaded": false,
"username": "username2",
"topics": [
    {
        "name": "1",
        "isUploaded": true,
        "topic_id": "1",
        "topic_status": 3
    },
    {
        "name": "2",
        "isUploaded": true,
        "topic_id": "2",
        "topic_status": 3
    },
    {
        "name": "1",
        "isUploaded": true,
        "topic_id": "1",
        "topic_status": 3
    },
    {
        "name": "4",
        "isUploaded": true,
        "topic_id": "4",
        "topic_status": 3
    }
]
}]

我想要的是每次我将 defaultQuestionsArray 传递给生成会话函数时，它应该始终是默认数组。关于如何纠正此问题的任何想法？

Answer 1

使用：

Object.create(originalTemplateObject);

如果您遇到修改原始问题的问题，此方法 returns 一个对象及其属性的副本而不保留引用，参考：

Object.create

然后您可以修改副本而不是修改通过引用传递的原始文件。

一个例子：

所以你的默认对象模板是这样的：

{
  topic_id: '1',
  topic_status: '-1',
  topic_name:
  {
    en: 'Some english text 1?',
    hi: 'some hindi text 1?'
  },
  isPlayed: false,
  status: false
}

您应该在所有代码之外保存此模板，因为它应该是一个全局常量：

const objectTemplate = {
  topic_id: '',
  topic_status: '',
  topic_name:
  {
    en: '',
    hi: ''
  },
  isPlayed: false,
  status: false
}

这里我们有一个创建对象的函数，然后 returns 使用传递的参数创建新对象。

const objectTemplate = {
  topic_id: '',
  topic_status: '',
  topic_name:
  {
    en: '',
    hi: ''
  },
  isPlayed: false,
  status: false
}

const myObjects = [];

function copyObject(...objectValues){

    let i = 0;
    const newObject = Object.create(objectTemplate);
    
    for(let prop in newObject){
       newObject[prop] = objectValues[i];
       i++;
    }

    return newObject;
}

myObjects.push(
  copyObject('1', '-1', {en: 'Some english text 1?',hi: 'some hindi text 1?'}, false, false
));

console.log("array with the object copy: " + "\n");
console.log(myObjects);
console.log("\n" + "original object: " + "\n");
console.log(objectTemplate);

这是一个如何在不修改原始对象的情况下使用此方法的示例。

我在 angular 中的 for 循环中得到相同的对象进行修改

I am getting the same object inside the for loop for modification in angular

javascript

arrays

scope

object

angular