javascript - 从 map 对象中设置和删除时确保原始对象的不变性

Question

我一直在研究如何在 JavaScript 中实现不变性/函数式编程，但我在使用以下代码时遇到了困难。 generateExample 函数返回的对象包含通过遍历对象数组在映射中添加和删除键/值的方法。

场景 1 简单地使用 map 方法 set 和 delete 方法并改变 map 。场景 2 在设置和删除键/值之前创建一个新映射。

我可以在每个 foreach 循环中为每个新的 set 克隆 map ，但我想这在计算上太昂贵了。

我还可以使用 Immutable.js (Map) 并为每个 set 和 delete 返回一个新的数据结构。我真的不想这样做。

在此示例中，从 generateExample 返回的对象将是唯一可以set 和 delete 到 map 的对象，因此可能令人担忧关于不变性在这个例子中并不重要？

我想了解的是，在设置和删除键/值时保持原始映射不变性的最佳方法是什么，以及它是否相关？

const sampleList = [
  {
    id: 'dog',
    value: 'Dog',
  },
  {
    id: 'cat',
    value: 'Cat',
  },
]

场景 1

const example = function generateExample() {
  const container = new Map()
  return {
    add(list) {
      list
        .forEach((x) => {
          container.set(x.id, x)
        })
    },
    remove(list) {
      list
        .forEach((x) => {
          container.delete(x.id)
        })
    },
    read(id) {
      return container.get(id)
    },
  }
}

情景 2

const example = function generateExample() {
  let container = new Map()
  return {
    add(list) {
      container = new Map(container)
      list
        .forEach((x) => {
          container.set(x.id, x)
        })
    },
    remove(list) {
      container = new Map(container)
      list
        .forEach((x) => {
          container.delete(x.id)
        })
    },
    read(id) {
      return container.get(id)
    },
  }
}

const test = example()
test.add(sampleList)
console.log(test.read('dog'))

Answer 1

在这两种情况下，您都有突变。在第一种情况下，突变发生在 Map 对象上，在第二种情况下，突变发生在容器值本身上，然后再次发生在 Map 对象上。我建议不要这样做层，但只按原样处理 Map 对象，但如果情况必须是这样，我宁愿做这样的事情

const example = function generateExample(defaultList) {
  let container = new Map(defaultList)
  return {
    add(list) {
      container = new Map(container.concat(list));
    },
    remove(list) {
      container = new Map(container.filter(item => !list.includes(item)))
    },
    read(id) {
      return container.get(id)
    },
  }
}