如何使console.log显示对象的当前状态?

2020/11/13 06:22 · javascript ·  · 0评论

在没有附加组件的Safari(实际上是大多数其他浏览器)中,console.log将在最后执行状态而不是在console.log调用时的状态下显示对象

我必须克隆对象只是为了通过它输出console.log以获取该行的对象状态。

例:

var test = {a: true}
console.log(test); // {a: false}
test.a = false; 
console.log(test); // {a: false}

我认为您正在寻找console.dir()

console.log()不会执行您想要的操作,因为它会打印对对象的引用,并在您将其弹出时将其更改。console.dir调用时在对象中打印属性的目录。

下面的JSON想法是一个好主意;您甚至可以继续解析JSON字符串,并获得类似.dir()的可浏览对象:

console.log(JSON.parse(JSON.stringify(obj)));

如果我想在记录日志时查看其状态,通常要做的就是将其转换为JSON字符串。

console.log(JSON.stringify(a));

香草JS:

@evan的答案似乎在这里最好。只需(ab)使用JSON.parse / stringify有效地复制对象。

console.log(JSON.parse(JSON.stringify(test)));

jQuery的特定解决方案:

您可以使用以下命令在某个时间点创建对象的快照: jQuery.extend

console.log($.extend({}, test));

此处实际发生的情况是jQuery正在使用test对象的内容创建一个新对象,并对其进行记录(因此它不会更改)。

AngularJS(1)具体解决方案:

Angular提供了copy可以用来达到相同效果函数:angular.copy

console.log(angular.copy(test));

香草JS包装器功能:

这是一个包装console.log但将在注销之前复制所有对象的函数

我写这篇文章是为了回答答案中一些类似但功能不强的功能。它支持多个参数,并且如果它们不是常规对象,则不会尝试复制它们

function consoleLogWithObjectCopy () {
  var args = [].slice.call(arguments);
  var argsWithObjectCopies = args.map(copyIfRegularObject)
  return console.log.apply(console, argsWithObjectCopies)
}

function copyIfRegularObject (o) {
  const isRegularObject = typeof o === 'object' && !(o instanceof RegExp)
  return isRegularObject ? copyObject(o) : o
}

function copyObject (o) {
  return JSON.parse(JSON.stringify(o))
}

用法示例consoleLogWithObjectCopy('obj', {foo: 'bar'}, 1, /abc/, {a: 1})

> Object在控制台中,不仅显示当前状态。实际上,它会延迟读取对象及其属性,直到您对其进行扩展。

例如,

var test = {a: true}
console.log(test);
setTimeout(function () {
    test.a = false; 
    console.log(test);
}, 4000);

然后展开第一个电话,如果在第二个电话console.log返回之前进行,那将是正确的

使用Xeon06的提示,您可以在一个对象中解析他的JSON,这是我现在用来转储对象的日志函数:

function odump(o){
   console.log($.parseJSON(JSON.stringify(o)));
}

我定义了一个实用程序:

function MyLog(text) {
    console.log(JSON.stringify(text));
}

当我想登录控制台时,我只需执行以下操作:

MyLog("hello console!");

效果很好!

您可能希望以易于理解的方式记录对象:

console.log(JSON.stringify(myObject, null, 2));

这会使对象在每个级别上缩进2个空格。

如何使用JavaScript漂亮地打印JSON?

有一个使用调试器库的选项。

https://debugjs.net/

只需将脚本包含在您的网页中并放入日志语句即可。

<script src="debug.js"></script>

记录中

var test = {a: true}
log(test); // {a: true}
test.a = false; 
log(test); // {a: false}

我可能会建议这样做,但可以采取进一步的措施。我们可以直接扩展控制台对象本身以使其更加清晰。

console.logObject = function(o) {
  (JSON.stringify(o));
}

我不知道这是否会引起时空连续体中某些类型的库碰撞/核熔毁/破裂。但这在我的qUnit测试中效果很好。:)

在打开控制台后刷新页面,或在将请求提交到目标页面之前打开控制台...。

只需在控制台上打印整个对象。

console.dir(object);
本文地址:http://javascript.askforanswer.com/ruheshiconsole-logxianshiduixiangdedangqianzhuangtai.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!