ES10 中，我们可以使用 WeakMap() 与 Object.freeze() 结合使用，来防止数据变动。
为什么需要防止数据变动？
在前端开发中，经常需要处理复杂的数据结构，如对象和数组等。有时候会存在误操作，导致数据结构发生变化，从而影响程序的正常运行。为了避免这种情况发生，我们需要采取措施来防止数据变动。
WeakMap() 的作用
WeakMap 是 ES6 中新添加的一个数据结构，它是一个弱引用 Map，适用于以对象为键的情况。WeakMap 中的键是弱引用的，即只要对象没有被引用，就会被自动回收。这一特性可以避免内存泄漏。
Object.freeze() 的作用
Object.freeze() 是一个用来冻结对象的函数。一旦一个对象被冻结，就无法再修改它的值、属性、方法。这种情况下，对该对象进行修改操作，将会抛出 TypeError 错误。
WeakMap() 与 Object.freeze() 的结合使用
为了防止数据变动，可以将对象的属性都使用 Object.freeze() 冻结起来，这样就无法修改它们了。但是，如果需要在代码中使用这些已经冻结的对象作为键，就需要使用 WeakMap()。
下面是一个示例代码：
-- -------------------- ---- ------- ----- --- - --- ---------- ----- ------ - - ----- ---- -- ---------------------- --------------- ------- ----------------------------- -- ------ ----------- - ----- -- ---------- ------ ------ -- ---- ---- -------- ------ -- ------ ----------- ----------------------------- -- ---------
在上面的代码中，首先定义了一个 WeakMap，并创建了一个对象 person，再使用 Object.freeze() 冻结该对象，然后使用 WeakMap() 将冻结后的对象作为键，存入 map 中。在后面的修改操作中，由于对象已经被冻结，所以会抛出 TypeError 错误。最终，通过 map.get() 方法获取该对象键的值，输出结果为 undefined，因为该对象已经被回收掉了。
总结
使用 WeakMap() 结合 Object.freeze() 可以有效地保护数据结构，避免误操作所带来的风险，为程序的稳定运行提供了保障。作为前端开发者，应该掌握这种技术，并在实际项目中灵活应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654eda0c7d4982a6eb7ec50e