在前端开发过程中，我们通常使用 console.log() 来输出调试信息。然而，在使用此方法时会遇到一个问题：当我们使用 console.log() 输出对象和数组时，它们打印出来的结果有时候并不直观。
对象的输出
让我们从一个简单的对象开始：
----- --- - - ---- ------ ---- -- -- -----------------
这将在控制台中输出以下内容：
----- ------ ---- ---
这是我们期望的结果。但是，如果我们尝试嵌套对象：
----- --- - -
---- -
---- -----
--
---- --
--
-----------------这将在控制台中输出以下内容：
----- ----- ------- ---- ---
这似乎也是我们期望的结果。但是，当我们尝试展开内部对象时：
---------------------
这将在控制台中输出以下内容：
----- ------
我们会发现，控制台只显示了内部对象的属性，而没有显示外部对象的其他属性。这可能会导致混淆和错误诊断。
数组的输出
接下来，让我们看看数组的输出。假设我们有一个简单的数组：
----- --- - ------- ------ ------- -----------------
这将在控制台中输出以下内容：
------- ------ ------
这也是我们期望的结果。但是，当我们尝试展开数组时：
--------------------
这将在控制台中输出以下内容：
--- --- ---
我们会发现，控制台没有以数组形式显示值，而是将它们作为单个字符串打印出来。这可能会对查错造成困扰。
解决方案
为了避免这些问题，我们可以使用 JSON.stringify() 方法将对象或数组转换为字符串。例如：
----- --- - -
---- -
---- -----
--
---- --
--
---------------------------------
-------------------------------------这将在控制台中输出以下内容：
------------------------------ -------------
现在我们可以看到完整的对象结构，并且不再需要手动展开数组。
另外，如果您正在使用 Chrome 开发者工具，则可以使用 %o 占位符来直接将对象或数组作为参数传递给 console.log()。例如：
----------------- ----- ----------------- --------- ----------------- -----
这将在控制台中输出类似于以下内容：
-
---- -
---- -----
--
---- --
-
-
---- -----
-
-
------
------
-----
-结论
在使用 console.log() 输出对象和数组时，我们需要注意到它们的不一致性和可能导致的错误诊断。为了避免这些问题，我们可以使用 JSON.stringify() 将它们转换为字符串，或者使用 %o 占位符直接将它们作为参数传递给 console.log()。
希望这篇文章能够帮助您更好地调试前端代码！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28742