Chrome 的 JavaScript 控制台是否懒得评估数组?
感谢您的评论,技术。我能够找到一个现有的未经证实的 Webkit 错误来解释这个问题:https : //bugs.webkit.org/show_bug.cgi? id =35801(编辑:现已修复!)
关于它有多少错误以及它是否可以修复,似乎存在一些争论。在我看来,这确实是一种不良行为。这对我来说尤其令人不安,因为至少在 Chrome 中,当代码驻留在立即执行的脚本中时(在页面加载之前),即使在控制台打开时,只要刷新页面,就会发生这种情况。当控制台尚未激活时调用 console.log 只会导致对正在排队的对象的引用,而不是控制台将包含的输出。因此,在控制台准备好之前,不会评估数组(或任何对象)。这确实是一个懒惰评估的情况。
但是,有一种简单的方法可以在您的代码中避免这种情况:
var s = ["hi"];
console.log(s.toString());
s[0] = "bye";
console.log(s.toString());
通过调用 toString,您可以在内存中创建一个表示,该表示不会被以下语句更改,控制台将在准备好时读取该表示。控制台输出与直接传递对象略有不同,但似乎可以接受:
hi
bye
从 Eric 的解释来看,是由于console.log()
排队,所以打印了数组(或对象)的后一个值。
可能有5种解决方案:
1. arr.toString() // not well for [1,[2,3]] as it shows 1,2,3
2. arr.join() // same as above
3. arr.slice(0) // a new array is created, but if arr is [1, 2, arr2, 3]
// and arr2 changes, then later value might be shown
4. arr.concat() // a new array is created, but same issue as slice(0)
5. JSON.stringify(arr) // works well as it takes a snapshot of the whole array
// or object, and the format shows the exact structure
您可以使用以下命令克隆数组Array#slice
:
console.log(s); // ["bye"], i.e. incorrect
console.log(s.slice()); // ["hi"], i.e. correct
您可以使用的函数而console.log
不是没有这个问题的函数如下:
console.logShallowCopy = function () {
function slicedIfArray(arg) {
return Array.isArray(arg) ? arg.slice() : arg;
}
var argsSnapshot = Array.prototype.map.call(arguments, slicedIfArray);
return console.log.apply(console, argsSnapshot);
};
不幸的是,对于对象的情况,最好的方法似乎是首先使用非 WebKit 浏览器进行调试,或者编写一个复杂的函数进行克隆。如果您只使用简单的对象,其中键的顺序无关紧要并且没有功能,您总是可以这样做:
console.logSanitizedCopy = function () {
var args = Array.prototype.slice.call(arguments);
var sanitizedArgs = JSON.parse(JSON.stringify(args));
return console.log.apply(console, sanitizedArgs);
};
所有这些方法显然都非常慢,所以比普通console.log
s更慢,你必须在完成调试后将它们剥离。
这已在 Webkit 中进行了修补,但是在使用 React 框架时,在某些情况下会发生这种情况,如果您遇到此类问题,请按照其他人的建议使用:
console.log(JSON.stringify(the_array));
到目前为止,最短的解决方案是使用数组或对象传播语法来获取要在记录时保留的值的克隆,即:
console.log({...myObject});
console.log([...myArray]);
但是要注意,因为它是浅拷贝,因此任何深层嵌套的非原始值都不会被克隆,因此不会在控制台中以修改后的状态显示