深度冻结对象

Beginner

This tutorial is from open-source community. Access the source code

简介

在本实验中,我们将探索如何在 JavaScript 中深度冻结一个对象。我们将学习如何递归地使用 Object.freeze() 方法来冻结对象的所有属性,使其不可变。在本实验结束时,你将更好地理解如何防止对对象进行修改,并确保 JavaScript 代码中的数据完整性。

这是一个实验(Guided Lab),提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤,获得实际操作经验。根据历史数据,这是一个 初级 级别的实验,完成率为 92%。获得了学习者 100% 的好评率。

如何在 JavaScript 中深度冻结对象

要在 JavaScript 中深度冻结一个对象,请遵循以下步骤:

  1. 使用 Object.keys() 获取传入对象的所有属性。
  2. 使用 Array.prototype.forEach() 遍历这些属性。
  3. 对所有是对象的属性递归调用 Object.freeze(),必要时应用 deepFreeze()
  4. 最后,使用 Object.freeze() 冻结给定的对象。

以下是代码:

const deepFreeze = (obj) => {
  Object.keys(obj).forEach((prop) => {
    if (typeof obj[prop] === "object") deepFreeze(obj[prop]);
  });
  return Object.freeze(obj);
};

你可以使用以下代码测试深度冻结的对象:

"use strict";

const val = deepFreeze([1, [2, 3]]);

val[0] = 3; // 不允许
val[1][0] = 4; // 同样不允许

上述代码将抛出一个错误,因为 val 对象被深度冻结,无法修改。

总结

恭喜你!你已经完成了深度冻结对象实验。你可以在 LabEx 中练习更多实验来提升你的技能。