Mengapa Adakah `console.log` Menunjukkan Maklumat Objek Lapuk Selepas Pengubahsuaian dalam JavaScript?

Menyingkap Rahsia console.log dan Manipulasi Objek

Apabila bekerja dengan tatasusunan dan objek dalam JavaScript, tingkah laku console.log boleh kadang-kadang membingungkan. Pertimbangkan kod berikut:

foo = [{id: 1},{id: 2},{id: 3},{id: 4}, {id: 5}, ];
console.log('foo1', foo, foo.length);
foo.splice(2, 1);
console.log('foo2', foo, foo.length);

Dalam penyemak imbas seperti Chrome, kod ini menghasilkan output yang membingungkan berikut:

foo1 [Object, Object, Object, Object, Object]  5
foo2 [Object, Object, Object, Object]  4

Mengapa foo2 menunjukkan panjang tatasusunan yang dikemas kini (4) tetapi masih dipaparkan lima objek?

Memeriksa Objek dalam Console.log

Puncanya terletak pada cara console.log mengendalikan objek. Apabila mengelog objek, konsol menerima rujukan kepadanya secara serentak. Walau bagaimanapun, paparan sebenar sifat objek berlaku secara tidak segerak, selalunya selepas objek diubah suai.

Akibatnya, anda mungkin melihat maklumat lapuk apabila mengembangkan objek yang dilog dalam konsol. Untuk mengelakkan kekeliruan ini, konsol memaparkan "i" kecil dalam kotak yang menunjukkan bahawa nilai yang ditunjukkan telah diambil gambar pada masa pengelogan, walaupun objek mungkin telah berubah sejak itu.

Strategi Pengelogan

Untuk memintas isu ini, pertimbangkan untuk menggunakan salah satu daripada teknik berikut:

• Log nilai objek individu: console.log(obj.foo, obj.bar, obj.baz);
• JSON mengekod objek sebagai rentetan: console.log(JSON.stringify(obj));
• Kod semula objek dengan JSON untuk mengekalkan kebolehperiksaan: console.log(JSON.parse(JSON.stringify(obj)));

Perhatikan bahawa JSON mempunyai hadnya, kerana ia menanggalkan sifat tidak boleh bersiri dan gagal pada rujukan bulat. Untuk senario yang lebih kompleks, pertimbangkan untuk menggunakan mekanisme penyalinan dalam tersuai.

Atas ialah kandungan terperinci Mengapa Adakah `console.log` Menunjukkan Maklumat Objek Lapuk Selepas Pengubahsuaian dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!