js console.log打印对象时属性缺失的解决方法


Posted in Javascript onMay 23, 2019

1. 序

在编写代码时,我们常常用 console.log() 的方式将信息在控制台中打印出来以帮助我们进行前端调试。一般情况下,我们打印普通值都没有问题,但在打印对象类型时,我们就需要注意点了,要不然可能会出现不符合期望的结果。

2. console.log()输出对象属性缺失

  • 首先,定义了一个 cat对象 ,其拥有 name, age, color, birthday 四个属性。
  • 接着,我们又定义了一个函数 test ,它接收一个对象作为参数。调用test函数时,我们想知道传入test函数的参数是怎样的,会先调用 console.log(obj) 将传入的对象打印出来,最后在函数内的某处删除传入对象的 name 属性。

那么,此时将 cat 对象作为参数调用 test 函数,控制台打印出来的信息将会是什么呢?会是我们预想的传入时参数的样子吗?

const cat = {
 name: '喵喵',
 age: '2',
 color: 'white',
 birthday: '1月1号'
}

function test(obj) {
 console.log(obj)
 //这里有段很长的代码...
 delete obj.name
}

test(cat)

控制台输出信息:

js console.log打印对象时属性缺失的解决方法

咋一看,没问题,输出的结果的确是我们传入时的样子。但实际中,传入的对象可能具有很多属性,那么我们想要看完整的信息就必须将输出结果展开。如下:

js console.log打印对象时属性缺失的解决方法

展开的信息中,我们可以看到结果少了 name 属性,细心的小伙伴可以发现还多了一个感叹号的标志(鼠标悬浮的文字:Value below was evaluated just now.)。咦,奇怪了,我们不是在test函数内的第一行代码就输出参数的信息的吗,怎么会少了 name 属性? 其实感叹号的内容已经说明了,我们展开的信息其实是刚刚获取到的结果,也就是代码执行后的结果,test函数中有一段 delete obj.name 的代码,执行完后,obj对象当然就没有 name

属性啦。在复杂的项目中,对象属性会很多,代码中的不知哪一处也可能会删除了对象的某些属性,这时我们打印出来的结果可能就会跟传入时的不一样,这种情况下我们可能就会一头雾水了。那么如何获取正确的结果呢?

3. 获取正确的结果

由于展开 console.log() 的结果并不是我们代码所处位置那个时间点的对象的拷贝,故我们想要在代码执行到那个位置时的那个时间点对应的对象状态,只要在那时输出 对象的副本 即可。

3.1 方法1:对象展开

const cat = {
 name: '喵喵',
 age: '2',
 color: 'white',
 birthday: '1月1号'
}

function test(obj) {
 console.log({...obj}) //使用ES6的对象展开符操作,获取到obj的副本。
 //这里有段很长的代码...
 delete obj.name
}

test(cat)

这时,我们得到的就是 console.log() 执行时间点时obj的状态啦。

js console.log打印对象时属性缺失的解决方法

3.2 方法2: JSON.stringfy()看字符串

const cat = {
 name: '喵喵',
 age: '2',
 color: 'white',
 birthday: '1月1号'
}

function test(obj) {
 console.log(JSON.stringify(obj)) //调用JSON.stringify()方法将对象转化为字符串
 //这里有段很长的代码...
 delete obj.name
}

test(cat)

同样,此时我们也可以得到代码运行时间点时的obj对象状态。

js console.log打印对象时属性缺失的解决方法

总结 : 以上两种方法都可以获取代码运行时的对象状态,但是比较 推荐第一种方法,因为当内容非常多时,第一种方法可以展开数据,有利于我们更快捷清晰地获取目标信息。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
jQuery 版元素拖拽原型代码
Apr 25 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 Javascript
基于Cesium绘制抛物弧线
Nov 18 Javascript
Node.js+ELK日志规范的实现
May 23 #Javascript
jquery+php后台实现省市区联动功能示例
May 23 #jQuery
js尾调用优化的实现
May 23 #Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 #Javascript
Express结合Webpack的全栈自动刷新
May 23 #Javascript
ajax跨域访问遇到的问题及解决方案
May 23 #Javascript
简单了解JavaScript异步
May 23 #Javascript
You might like
我的论坛源代码(十)
2006/10/09 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
JavaScript自定义超时API代码实例
2020/04/30 Javascript
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
python使用wxpython开发简单记事本的方法
2015/05/20 Python
Python读写文件方法总结
2015/06/09 Python
python实现电子产品商店
2019/02/26 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
怎样拟定创业计划书
2014/05/01 职场文书
项目投资建议书
2014/05/16 职场文书
保护环境倡议书100字
2014/05/19 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
Python+Appium新手教程
2021/04/17 Python
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python
Python标准库之typing的用法(类型标注)
2021/06/02 Python
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
MySQL表锁、行锁、排它锁及共享锁的使用详解
2022/04/02 MySQL
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang