คอนโซล JavaScript ของ Chrome ขี้เกียจเกี่ยวกับการประเมินอาร์เรย์หรือไม่?

ฉันจะเริ่มต้นด้วยรหัส:

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

ง่ายใช่มั้ย? เพื่อตอบสนองต่อสิ่งนี้ Firebug กล่าวว่า:

["hi"]
["bye"]

ยอดเยี่ยม แต่คอนโซล JavaScript ของ Chrome (7.0.517.41 เบต้า) บอกว่า:

["bye"]
["bye"]

ฉันทำอะไรผิดพลาดหรือว่าคอนโซล JavaScript ของ Chrome ขี้เกียจเป็นพิเศษในการประเมินอาร์เรย์ของฉัน

ขอบคุณสำหรับความคิดเห็น 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

จากคำอธิบายของ 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คุณต้องถอดมันออกหลังจากที่คุณแก้ไขจุดบกพร่องเสร็จแล้ว

สิ่งนี้ได้รับการแก้ไขใน Webkit แล้วอย่างไรก็ตามเมื่อใช้ React framework สิ่งนี้เกิดขึ้นกับฉันในบางสถานการณ์หากคุณมีปัญหาดังกล่าวให้ใช้ตามที่คนอื่นแนะนำ:

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

นี่เป็นคำตอบแล้ว แต่ฉันจะตอบตกลงอยู่ดี ฉันใช้เครื่องห่อคอนโซลแบบธรรมดาซึ่งไม่ประสบปัญหานี้ ต้องใช้ jQuery

จะดำเนินการเพียงlog, warnและวิธีการที่คุณจะต้องเพิ่มมากขึ้นบางในการสั่งซื้อเพื่อให้เป็นกันกับปกติerrorconsole

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" ด้วยตัวชี้ไปยังอาร์เรย์จริง

วิธีหนึ่งคือการโคลนอาร์เรย์บันทึกสำเนาใหม่แทน:

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]);

อย่างไรก็ตามได้รับการเตือนเนื่องจากเป็นการคัดลอกแบบตื้นดังนั้นค่าที่ไม่ใช่แบบดั้งเดิมที่ซ้อนกันลึก ๆ จะไม่ถูกโคลนดังนั้นจึงแสดงในสถานะที่แก้ไขในคอนโซล