javascript - 修改嵌套对象,然后返回修改后的父对象

标签 javascript ecmascript-6 local-storage

我有这个功能

function save(value, ...props)
{
    var record;
    var allRecords = JSON.parse(window.localStorage.getItem("data"));
    record = allRecords;
    for (var prop of props)
    {
        record = record[prop];
    }
    record = value;
    window.localStorage.setItem("data", JSON.stringify(allRecords));
}

它的工作就是在window.localStorage中保存一堆数据。但是,由于 JavaScript 是“按值引用”语言,因此修改 record 不会影响父对象 (allRecords)。那么,如何迭代整个存储对象,修改其子对象,然后保存修改后的父对象?

最佳答案

您需要修改父对象:

function save(value, ...props)
{
  var record = allRecords = JSON.parse(window.localStorage.getItem("data"));
  var parent=record;
  for (var prop of props)
  {
      parent=record;//store before modifying, so keep the parent
      record = record[prop];
  }

 parent[prop]= value;
 window.localStorage.setItem("data", JSON.stringify((allRecords));
 return parent;
}

但是现在你的函数已经“深入”到了对象中(只是说):

save("hi","a","b","c");//will save like this
a={
   b={
     c="hi";
   }
}

另一种可能性是在最后一次迭代之前停止循环,然后执行 record[prop]=value。

1.对象如何存储: 对象是通过指针来存储的。所以在内存中它看起来像这样(伪代码):

//a memory location holding an object
432:
 val1:1
 val2:2

如果说对象的名字是a,a的存储方式如下:

a = location:432

如果复制它,例如使用 b=a,则仅复制指针而不是对象:

a = location:432
b = location:432

如果您更改对象 a 中的某项,它实际上会更改位置 432 处的对象,因此 b 会更改为。 对象中的对象看起来是一样的:

//another obj
100:
   obj1:  location:432 //our pointer to the object

因此,我们的 for 循环(让我们继续看上面的保存示例)将跟随指向对象的指针,获取持有指针的属性,然后跟随该指针指向另一个对象(a-> b -> c)。这些对象存储在内存中的某个位置。 JSON.stringify 函数进行深度复制。因此它跟随每个指针并将所有必要的信息放入一个字符串(对象 a b 和 c)。

  • “为什么你的代码可以工作,而我的却不能?”:
  • 你做什么

    value=obj[key];
    value="new";
    

    我做什么:

    obj[key]="new";
    

    但是那是一样的不是吗?没有。我们来看看内存中的数据:

      //you
     //before
    value:undefined
    obj:
        key:"old"
    
    //copying
    value:"old"
    obj:
         key:"old"
    
    //changing
    
    value:"new"
    obj:
          key:"old" //never changed...
    

    关于javascript - 修改嵌套对象,然后返回修改后的父对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41879599/

    相关文章:

    javascript - 在 div 中搜索元素

    javascript - 如何向 HTML5 Canvas 添加撤消功能?

    javascript - 使用 Webpack 1 构建 CSS 和 Javascript 文件

    javascript - React 和 Redux 以及 Axios 中 API 的并行/顺序调用

    Javascript循环创建多个相互附加的div

    javascript - 操作列定义的 ng-grid 问题

    javascript - React Native - 从子级调用父级引用函数

    html - 单击按钮将输入数据保存到 localStorage

    google-chrome-extension - 如何有效地从chrome.storage.sync存储数据/从chrome.storage.sync检索数据?

    javascript - LocalStorage 设置数组内的对象 Ionic List