console.log
将显示对象在最后执行状态下的情况,而不是调用console.log
时的状态。我必须克隆对象才能通过
console.log
输出它,以获取该行代码中对象的状态。
示例:var test = {a: true}
console.log(test); // {a: false}
test.a = false;
console.log(test); // {a: false}
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)));
console.log
和 console.dir
没有区别。 - Andrew D.console.dir
不起作用。这是人们提供的解决方案的比较:http://jsfiddle.net/luken/M6295/。 - Lukeconsole.dir
仍然与 console.log
没有区别。 - Magne如果我想要查看它被记录时的状态,我通常会将其转换为JSON字符串。
console.log(JSON.stringify(a));
function odump(o){
console.log($.parseJSON(JSON.stringify(o)));
}
- Chris@evan的回答 在这里似乎是最好的。只需滥用JSON.parse/stringify来有效地复制对象即可。
console.log(JSON.parse(JSON.stringify(test)));
您可以使用jQuery.extend
在特定时间点创建对象快照。
console.log($.extend({}, test));
这里实际上发生的是jQuery使用test
对象的内容创建了一个新对象,并记录了它(因此不会改变)。
Angular提供了一个copy
函数,可用于同样的效果:angular.copy
console.log(angular.copy(test));
这是一个函数,它包装了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)));
}
有一个使用调试器库的选项。
只需将脚本包含到您的网页中并放置日志语句即可。
<script src="debug.js"></script>
日志记录
var test = {a: true}
log(test); // {a: true}
test.a = false;
log(test); // {a: false}
到2022年底,出现了一个新选项:
使用新的DOM structuredClone
方法对对象进行深拷贝:
console.log(structuredClone(obj))
它使用与在 Web Worker 之间传输消息时使用的克隆算法相同的克隆算法。
这应该比 JSON.parse(JSON.stringify(obj))
技术更快,并且适用于更多类型的对象。
有关详细信息,请参见 https://developer.mozilla.org/en-US/docs/Web/API/structuredClone。
function MyLog(text) {
console.log(JSON.stringify(text));
}
MyLog("hello console!");
它非常好用!
console.log(JSON.stringify(myObject, null, 2));
我可能因为提出这个建议而被批评,但是我们可以更进一步。我们可以直接扩展控制台对象本身,使其更清晰明了。
console.logObject = function(o) {
(JSON.stringify(o));
}
我不知道这是否会导致某种类型的库冲突/核融合/时空连续性破裂。但它在我的qUnit测试中运行得非常完美。:)