时间戳

首页 > 解决方案 > 当我不想要它时，为什么原始对象会改变？

javascript - 当我不想要它时，为什么原始对象会改变？

问题描述

我正在从 API 获取降价，我想在我的 vuejs 应用程序中使用它。

我想访问降价和转换后的数据。

async getNotes() {
  var regxHighlights = /id:\b([0-9]+)\b/g;
  var regxNotes = /id-\b([0-9]+)\b/g;
  fetch(`/books/${this.id}/notes`).then(res => res.json()).then(res => {
    var data = res.map(n => {
      n.note = converter.makeHtml(n.note)
      n.note = n.note.replace(regxHighlights, `<b class="ref noteRef" style="user-select: none;" data="id$1" >id:$1</b>`);
      n.note = n.note.replace(regxNotes, `<b class="ref noteRef" style="user-select: none;" data="id-$1" >id-$1</b>`);
      return n
    })
    this.notes = data
    this.rawNotes = res
  })
},

问题是res变了！所以data和res都是一回事。那不应该发生的正确！

标签： javascriptobject

解决方案

听起来响应是一个对象数组。当您这样做时res.map(n，每个n都是对原始对象之一的引用。例如，在第一次迭代中，n === res[0]; 改变n就会改变res[0]。

看起来制作对象的浅表副本应该在这里工作：

var data = res.map((originalObj) => {
  const newObj = { ...originalObject };
  newObj.note = converter.makeHtml(n.note)
      .replace(regxHighlights,
                          `<b class="ref noteRef" style="user-select: none;" data="id$1" >id:$1</b>`)
      .replace(regxNotes,
                          `<b class="ref noteRef" style="user-select: none;" data="id-$1" >id-$1</b>`);
  return newObj;
})

推荐阅读