如何在 Javascript 中不可变地更新地图

Question

我正在使用Redux进行React，我正在尝试更改包含Map的状态，但我不确定如何正确执行此操作。

我正在尝试使用此处列出的更新模式(但它们仅显示对象和数组的示例(： https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns

我得到了一张像这样的恒定地图：

const propertiesMap1 = new Map([
["TITLE1",
{
propertyValues: {
myProperty1 : "myVal1",
myProperty2 : "myVal2",
myProperty3 : "myVal3",                                                            
},
isOpen: true
}
],
....

数组中有 2 张这样的地图：const arr = [map1, map2]

我正在尝试更新特定地图中的值，如下所示：

function updateValueInProperties(array, index, category, value) 
{
return array.map( (item, index) => 
{
if(index !== action.index) 
{
return item;
}

// Otherwise, this is the one we want - return an updated value
return {
...item,
item.get(category): {
}
};    
});

}

但是上面有编译错误。.

如何永久更新地图？

Answer 1

简短回答：

要创建"更新的克隆"：new Map(oldMap).set('x', 'y')或new Map(oldMap).delete('x')。

TLDR

映射的构造函数采用可迭代对象，映射是一个可迭代对象。例如：

const 
m1 = new Map().set('x1', 'y1').set('x2', 'y2'),
m2 = new Map([...m1.entries()])
;
m1 === m2 // false;
m2.get('x1') // y1

因此，要以创建新地图的方式更新地图，您可以使用.entries()将旧地图转换为数组，更新此数组并将其转换回地图。

//update a value
const updated = new Map([...m1.entries()].map(
([key, val]) => [
key, 
key == 'x1' ? `updated ${val}` : val 
]
));

甚至更短，感谢@VLAZ的所有评论

const clone = new Map(oldMap).set('x', 'y')

总结

要flat copy映射，您可以使用new Map(old)并创建修改后的克隆，而不是可以使用新映射的所有delete()、set()或clear()方法。中间阵列可以为过滤等提供更大的灵活性，但会带来一些性能成本。