深度合并两个不可变映射，同时忽略嵌套的 arrays

Question

 const map1 = Immutable.Map({ a: { x: 1, z: 1, y: 1, values: [1, 2, 3] } }); const map2 = Immutable.Map({ a: { x: 2, values: [4, 5, 6] } }); const map3 = map1.mergeDeep(map2) // Output I want is: // { a: { x: 2, z: 1, y: 1 values: [4, 5, 6] } }

假设我有两张地图。 其中一张地图是另一张地图的部分 object，不一定包含所有相同的属性。 我想合并它们，包括嵌套对象，但不合并 arrays。 如上所示，它更新了两个地图中存在的属性，保留了新的第二个 map 中不存在的旧属性，并且只使用了最新的 map 数组，而不是将它们合并到 [1,2,3 ,4,5,6]。 我怎样才能做到这一点？

Answer 1

这个问题似乎与这个stackoverflow 帖子有关。 如前所述，使用fromJS而不是Map得到所需的结果。 此外，这个答案很好地解释了两者之间的区别。 请参考并运行下面的代码片段以获取工作示例：

 const map1 = Immutable.fromJS({ a: { x: 1, z: 1, y: 1, values: [1, 2, 3] } }); const map2 = Immutable.fromJS({ a: { x: 2, values: [4, 5, 6] } }); const map3 = map1.mergeDeep(map2) console.log(map3) // Output I want is: // { a: { x: 2, z: 1, y: 1 values: [4, 5, 6] } } /* And this snippet results in: { "a": { "x": 2, "z": 1, "y": 1, "values": [ 4, 5, 6 ] } } */

 <script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.js" integrity="sha512-9XVMKQr4ymAxO4jZVbEM2eq01aGlTY4bMlWyQh+KcQWprFkWu5KpOcDOa3RLFZc586QHihZPd1b8XzXqweRxIQ==" crossorigin="anonymous"></script>

Answer 2

你没有state你用的immutable.js版本，但是你问的方式，大概是4.0.0-rc12。 Immutable.js 版本 3.8.x 的 mergeDeep function 做了你想要的； 它取代了 arrays 而不是合并它们。 这就是@etarhan 的答案有效但不适合您的原因。

没有“好”的解决方案。 mergeDeepWith function 让我们定义一个合并 function，但遗憾的是合并只在冲突时触发 - 所以它也对你没有帮助。 您所能做的就是手动遍历 object 或升级 immutable.js。

还要注意Immutable.Map({ a: { x: 1, z: 1, y: 1, values: [1, 2, 3] } }); 只对输入进行浅层转换。 values数组仍然是一个数组。 这通常是不希望的，您可能希望拥有一个 Immutable.List 而不是数组。 为此，请使用fromJS ，它会转换 depply。

我会在松弛频道上提出这个问题，IMO 应该也有可能在 collections 上调用合并。

与此类似的东西可能会完成这项工作：

 const map1 = Immutable.fromJS({ a: { x: 'one', z: 'old', y: 'old', values: [1, 2, 3] } }); const map2 = Immutable.fromJS({ a: { x: 'two', v: 'new', values: [4, 5, 6] } }); function mergeStuff(a, b, path = '') { return a.withMutations(map => { for(key of b.keys()) { map.update(key, (val) => { console.log('updating', path + key, val, b.get(key)); if(Immutable.isKeyed(val)) { return mergeStuff(val, b.get(key), key + '.'); } return b.get(key, val); }); } }); } const map3 = mergeStuff(map1, map2); console.log('result:'); console.log(map3);

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