配列の評価についてChromeのJavaScriptコンソールは怠惰ですか？

私はコードから始めます：

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

シンプルでしょ？これに応じて、Firebugは言う：

["hi"]
["bye"]

すばらしいが、ChromeのJavaScriptコンソール（7.0.517.41ベータ版）は次のように述べている。

["bye"]
["bye"]

私は何か間違ったことをしましたか、それともChromeのJavaScriptコンソールは私の配列の評価について非常に怠惰ですか？

コメントをありがとう、tec。この問題を説明する既存の未確認の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

エリックの説明から、それは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));

これは既に回答済みですが、とにかく回答を破棄します。この問題の影響を受けないシンプルなコンソールラッパーを実装しました。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);

Chromeは「プリコンパイル」フェーズで「s」のインスタンスをポインタに置き換えているようです実際の配列へのにです。

1つの方法は、アレイのクローンを作成し、代わりに新しいコピーをログに記録することです。

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;
}

これまでの最短の解決策は、配列またはオブジェクトスプレッド構文を使用して、ロギング時に保持される値のクローンを取得することです。

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

ただし、浅いコピーを行うため、警告が表示されます。そのため、深くネストされた非プリミティブ値は複製されず、変更された状態でコンソールに表示されません。