用新值更新不可变的 js 嵌套对象

Question

我有 2 个不可变对象。结构如下图

    const state = fromJS({
       "a":"value1",
       "b":{
          "c":"value2"
       },
       "d":[ ],
       "e":{
          "f":"value3",
          "g":{
             "h":true
          }
       }
    })
    
    and
     
    const updateVal = fromJS({
    "b":{"c": "newValue"},
       "e": {"g":{"h": false"}}
    })

我想要的结果是

     state = fromJS({
       "a":"value1",
       "b":{
          "c":"newValue"
       },
       "d":[ ],
       "e":{
          "f":"value3",
          "g":{
             "h":false
          }
       }
    })

我尝试了 mergeWith、mergeDeep 但总是得到结果

    var state = fromJS({
           "a":"value1",
           "b":{
              "c":"newValue" // this is updating as I have same new object structure
           },
           "d":[ ],
           "e":{ // here I am loosing other values
              "g":{
                 "h":false
              }
           }
        })

所以“e”中的所有内容都将替换为“updateVal”

我尝试过的

    state.mergeWith((prev, next) => {
      if(!prev) return next;
      return next;
    }, updateVal)

这只是一个结构，“updateVal”是动态的，我不知道 updateVal 会出现什么。所以如果某些结构匹配然后替换那些特定的值

Answer 1

mergemergeWith 和update 都执行浅 更新，这意味着它们只会将第一级深度的内容复制到另一个对象中。这样一来，一些值可能会丢失，因为整个地图“e”会被新地图“e”替换。

另一方面，mergeDeep 遍历并比较每个级别的集合。它将它们合并，产生您所期望的结果：

（请注意，在 ImmutableJS 版本 3.8.x 和 4.0.x 中合并有一些差异，但在这种情况下它们无关紧要）

const state = Immutable.fromJS({
  "a": "value1",
  "b": {
    "c": "value2"
  },
  "d": [],
  "e": {
    "f": "value3",
    "g": {
      "donttouchme": "ok",
      "h": true
    }
  }
});

const updateVal = Immutable.fromJS({
  "b": {
    "c": "newValue"
  },
  "e": {
    "g": {
      "h": false
    }
  }
});

const result = state.mergeDeep(updateVal);
console.log(result.toJS());

<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/4.0.0-rc.14/immutable.min.js"></script>

Answer 2

我希望我能正确解释我的方法。您可能可以执行以下操作，获取对象 A 和对象 B，并使用 Proxy object with handler 基于 A 和 B 的超集创建一个新对象 C。

你创建一个函数接受两个对象并返回一个对象。然后遍历第一个对象的键，检查第二个对象是否也具有这些键，并且当您再次遇到对象时，此调用需要递归，但我希望这对您的旅程有所帮助。如果有帮助，我也可以编写一些示例代码来分享。