153

我将从代码开始：

var s = ["hi"];
console.log(s);
s[0] = "bye";
console.log(s);

很简单，对吧？对此，Firefox 控制台说：

[ "hi" ]
[ "bye" ]

很棒，但 Chrome 的 JavaScript 控制台（7.0.517.41 beta）说：

[ "bye" ]
[ "bye" ]

我做错了什么，还是 Chrome 的 JavaScript 控制台在评估我的数组时非常懒惰？

显示所描述行为的控制台屏幕截图。

4

7 回答 7

85

感谢您的评论，技术。我能够找到解释此问题的现有未经证实的 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
于 2010-10-30T18:54:45.090 回答
27

从 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
于 2012-10-07T22:11:56.767 回答
7

您可以使用以下命令克隆数组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 更慢，你必须在完成调试后将它们剥离。

于 2011-01-27T17:42:49.807 回答
4

这已在 Webkit 中进行了修补，但是在使用 React 框架时，在某些情况下会发生这种情况，如果您遇到此类问题，请按照其他人的建议使用：

console.log(JSON.stringify(the_array));
于 2015-04-30T00:35:52.160 回答
2

到目前为止，最短的解决方案是使用数组或对象传播语法来获取要在记录时保留的值的克隆，即：

console.log({...myObject});
console.log([...myArray]);

但是请注意，因为它执行的是浅拷贝，因此任何深层嵌套的非原始值都不会被克隆，因此不会在控制台中以修改后的状态显示

于 2020-04-12T07:52:24.933 回答
1

这已经回答了，但无论如何我都会放弃我的答案。我实现了一个不受此问题影响的简单控制台包装器。需要 jQuery。

它只实现log,warn和error方法，您必须添加更多才能使其与常规console.

var fixedConsole;
(function($) {
    var _freezeOne = function(arg) {
        if (typeof arg === 'object') {
            return $.extend(true, {}, arg);
        } else {
            return arg;
        }
    };
    var _freezeAll = function(args) {
        var frozen = [];
        for (var i=0; i<args.length; i++) {
            frozen.push(_freezeOne(args[i]));
        }
        return frozen;
    };
    fixedConsole = {
        log: function() { console.log.apply(console, _freezeAll(arguments)); },
        warn: function() { console.warn.apply(console, _freezeAll(arguments)); },
        error: function() { console.error.apply(console, _freezeAll(arguments)); }
    };
})(jQuery);
于 2013-02-28T15:31:31.600 回答
0

看起来 Chrome 正在其“预编译”阶段用指向实际数组的指针替换任何“s”实例。

一种解决方法是克隆数组，而不是记录新副本：

var s = ["hi"];
console.log(CloneArray(s));
s[0] = "bye";
console.log(CloneArray(s));

function CloneArray(array)
{
    var clone = new Array();
    for (var i = 0; i < array.length; i++)
        clone[clone.length] = array[i];
    return clone;
}
于 2010-10-31T14:20:52.530 回答