Angular 代码神秘地赋值答案

【问题标题】：Angular code mysteriously assigning valuesAngular 代码神秘地赋值
【发布时间】：2021-12-11 13:39:42
【问题描述】：

出于某种我不明白的原因，此代码将“temps”的值分配给 this.messages，任何帮助将不胜感激。我知道问题出在下面的代码块中，因为删除 .sort 部分会更改 this.messages 的输出顺序。

this.currentMessageSubject.subscribe(()=> {
  console.log('Refreshing messages')
  if (this.conversationId) {
    firebase.firestore().collectionGroup('conv').where("parentMessageId", "==", this.conversationId).get().then(async (querySnapshot) => {
      let temps: FirebaseMessages;
      let tempsMsgs = new Map();
      temps = this.messages;
      temps.messages = []
      
      querySnapshot.forEach((newConvo) => {
        const thing = { id: newConvo.id, ...newConvo.data() } as FirebaseMessage;
  
        if (!tempsMsgs.has(thing.id)) {
          tempsMsgs.set(thing.id, thing)
          temps.messages.push(thing);
        }
        
      })
      temps.messages.sort(function(a,b){
        return a.timestamp.seconds - b.timestamp.seconds;
      });
      temps.messages = temps.messages.filter((message) => {
        if (message.id) {
          return true;
        }
        
        return false;
      })
    })
  }
})

【问题讨论】：

以下答案是否解决了问题，或者您还需要帮助找出问题所在吗？

标签： javascript angular typescript ionic-framework

【解决方案1】：

如果你为一个变量（即对象）分配一个非原始值，它将通过引用传递。

所以，在你的情况下，这一行：

temps = this.messages;

将this.messages 中的相同对象分配给temps 变量。因此，编辑temps 实际上也会编辑this.messages，因为两者都指向同一个对象。

您必须克隆您的对象，并将克隆分配给您的temps 变量。关于克隆 - 关于在 SO 上克隆对象有多个很好的答案，所以我不会在这里讨论，因为我们不知道 messages 的结构。

【讨论】：

【解决方案2】：

在做temps = this.messages;时，引用传递给temps。

您需要以另一种方式克隆此对象（注意更改第 7 行）：

this.currentMessageSubject.subscribe(()=> {
  console.log('Refreshing messages')
  if (this.conversationId) {
    firebase.firestore().collectionGroup('conv').where("parentMessageId", "==", this.conversationId).get().then(async (querySnapshot) => {
      let temps: FirebaseMessages;
      let tempsMsgs = new Map();
      temps = {...this.messages};
      temps.messages = []
      
      querySnapshot.forEach((newConvo) => {
        const thing = { id: newConvo.id, ...newConvo.data() } as FirebaseMessage;
  
        if (!tempsMsgs.has(thing.id)) {
          tempsMsgs.set(thing.id, thing)
          temps.messages.push(thing);
        }
        
      })
      temps.messages.sort(function(a,b){
        return a.timestamp.seconds - b.timestamp.seconds;
      });
      temps.messages = temps.messages.filter((message) => {
        if (message.id) {
          return true;
        }
        
        return false;
      })
    })
  }
})

您可以参考此主题以了解更多信息：What is the most efficient way to deep clone an object in JavaScript?

【讨论】：