在前端开发中，经常需要使用 JSON 格式来传递数据。在 JavaScript 中，我们可以使用 JSON.stringify() 方法将一个对象转换为 JSON 格式的字符串。然而，当对象中存在循环引用时，JSON.stringify() 方法会抛出错误。在 ES10 中，这个问题得到了解决，本文将介绍 ES10 中的 JSON.stringify() 方法是如何更好地处理对象中的循环引用的。
什么是循环引用？
循环引用指的是在一个对象内部存在对自身的引用。例如，下面的代码中，对象 b 中包含了对自身的引用：
--- - - --- --- - - - -- - -- --- - --
这种情况下，如果我们使用 JSON.stringify() 方法将对象 a 转换为 JSON 格式的字符串，就会抛出错误：
------------------ -- ---------- ---------- -------- --------- -- ----
ES10 中的解决方案
在 ES10 中，JSON.stringify() 方法新增了第二个参数，用于处理循环引用。这个参数称为 replacer，它是一个函数，用于转换对象的属性值。在处理循环引用时，我们可以使用 replacer 函数来避免对象的属性值被重复处理。
下面是一个使用 replacer 函数解决循环引用的例子：
--- - - ---
--- - - - -- - --
--- - --
--- ------ - ---------------
--
----- ------ -- -
-- ---- --- ---- -
------ -------------
-
------ ------
-
--
-------------------- -- ------------------------在上面的例子中，我们使用了一个简单的 replacer 函数，当属性名为 'a' 时，将属性值替换为字符串 '[Circular]'。这样，我们就可以避免循环引用导致的错误。
深度优先遍历
使用 replacer 函数处理循环引用时，我们需要注意遍历对象的顺序。通常情况下，我们使用的都是深度优先遍历，也就是先遍历对象的子属性，再遍历对象本身。这样可以保证循环引用被正确地处理。
下面是一个使用深度优先遍历处理循环引用的例子：
--- - - ---
--- - - - -- - --
--- - --
--- ---- - --- ----------
--- ------ - ---------------
--
----- ------ -- -
-- ------- ----- --- -------- -- ----- --- ----- -
-- ----------------- -
------ -------------
-
----------------
-
------ ------
-
--
-------------------- -- ------------------------在上面的例子中，我们使用了一个 WeakSet 来记录已经遍历过的对象。当遍历到一个对象时，如果它已经在 seen 中出现过了，就说明存在循环引用，返回字符串 '[Circular]'。否则，我们将它添加到 seen 中，继续遍历它的子属性。
总结
ES10 中的 JSON.stringify() 方法新增了 replacer 参数，可以更好地处理对象中的循环引用。我们可以使用 replacer 函数来避免对象的属性值被重复处理。在处理循环引用时，我们需要注意遍历对象的顺序，通常使用深度优先遍历。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65dae9361886fbafa48083cf