简介
在前端开发中,我们常常需要处理、操作对象。如果遇到对象过于复杂或嵌套层数过多,直接使用 console.log() 打印会是一件非常痛苦的事情,要不时地点开并折叠控制台才能找到自己需要的信息。
本文介绍了一个方便的 npm 包——peek-object,它可以帮助我们通过一张表格的方式,清晰地看到对象内容并作出响应的调整。
安装
我们可以使用 npm 来安装 peek-object:
$ npm install -g peek-object
使用
安装完成之后,我们就可以在终端中使用 peek-object 命令:
$ peek-object <object>
<object>
参数是我们传入的需要打印的对象,可以是一个 JavaScript 对象或一个 JSON 字符串。
举一个例子,假如我们有一个 JavaScript 对象:
-- -------------------- ---- ------- ----- ---- - - ----- -------- ---- --- -------- - ----- ----------- --------- --------- ------- -------- -------- -------- -- -------- ----------- ----------- ---------- -展开代码
我们可以使用 peek-object 命令输出这个对象的字段和对应的值:
$ peek-object "$user"
命令行输出将会是如下的表格形式:
┌─────────┬─────────────────┐ │ (index) │ Values │ ├─────────┼─────────────────┤ │ name │ 'Alice' │ │ age │ 25 │ │address │ [object Object] │ │hobbies │ ['reading', ..] │ └─────────┴─────────────────┘
其中,我们可以看到对象 user 的各个属性的名称和值,如果属性的值也是一个对象,则用 '[object Object]' 代表它。
我们还可以使用 peek-object 打印一个 JSON 字符串:
$ peek-object '{"greeting": "Hello, world!"}'
输出将会是如下形式的表格:
┌───────────┬───────────────────┐ │ (index) │ Values │ ├───────────┼───────────────────┤ │ "greeting" │ "Hello, world!" │ └───────────┴───────────────────┘
参数
peek-object 还提供了几个参数,我们可以根据实际需求来调用它们。
--color
peek-object 可以为字段值添加不同颜色的标记,来更好地区分它们之间的差异。使用 --color
参数即可开启颜色输出。
$ peek-object "$user" --color
--keys
使用 --keys
参数可以指定输出哪些字段。这在打印大型对象时会很有用。
const article = { title: 'JavaScript 的面向对象编程', author: 'Alice', content: '这是一篇关于 JavaScript 面向对象编程的文章,......' } $ peek-object "$article" --keys title,content
此时输出将只会展示 article 对象的 title 和 content 2 个字段。
--no-header
默认情况下,peek-object 会展示出对象名称和列标识。通过 --no-header
参数可以关闭这个功能。
$ peek-object "$user" --no-header
--no-index
通过 --no-index
参数可以关闭默认的索引列。
$ peek-object "$user" --no-index
总结
使用 peek-object,我们可以以一个更直观、友好的方式查看和分析对象数据,降低了调试代码时的痛苦度。并且该 npm 包提供的参数级别也非常丰富,可以灵活配置,让我们有个性化的体验。
有了 peek-object,我们开发调试代码时将更加的顺畅和高效。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005609281e8991b448dec4a