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

Question

我正在为 React 使用 Redux，并且我正在尝试更改包含 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() 的方法可以使用新地图。中间数组可能会为过滤等提供更大的灵活性，但会带来一些性能成本。

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

How to immutably update a map in Javascript

javascript

immutability

redux

react-redux