javascript - 避免对象突变

Question

我正在使用 React 和 ES6。所以我遇到了以下情况:我有一个包含对象数组的状态，假设 a = [{id: 1, value: 1}, {id: 2, value: 2}]在 Object A 的状态，然后我将列表传递给 Object B通过 Prop ，Object B (在构造函数中)将列表复制到它自己的状态并调用一个使用 map 的函数我返回 b = [{id: 1, value: 1, text: 'foo'}, {id: 2, value: 2, text: 'foo'}] 的函数(添加 (text, value) 到每个对象)，所以它虽然没有变异 a在Object A但确实如此。

所以我做了一些测试:

const a = [{id: 1, value: 1}, {id: 2, value: 2}] // suppose it is in object A

addText = (list) => {
    return list.map((item) => {item.text = "foo"; return item})
}

const b = addText(a) // suppose it is in object B

所以在我的假设下a !== b ，但是 a被 addText 突变, 所以他们是平等的。

在大型项目中，程序员会犯错误(我在这里犯过!)应该如何处理这种情况以避免以这种方式改变对象？ (该示例尝试将 a 重新设置为 state，用于 Object A，这是 React 的一个组件)

Answer 1

如果您对对象的更改真的很浅(在对象的顶层)，您可以使用 Object.assign({}, oldObj, newObj)，或者如果您有Object spread proposal在 babel 中启用，{ ...oldObj, newThing: 'thing' }

要在团队中强制执行此操作，您可以使用此 ESLint 插件 https://github.com/jhusain/eslint-plugin-immutable启用 no-mutation 规则。