javascript console.log() 带来的疑惑

这两天在写插件的时候无意间就被 console.log() 给坑到了。

看下面这个例子:

    var obj = {‘k1‘:[1,2,3], ‘k2‘:[2,3,4]}

    console.log( obj )        // {‘k1‘:[0,2,3], ‘k2‘:[2,3,4]}
    console.log( obj.k1 )  // [1,2,3]

    obj[‘k1‘] = [0,2,3]

    console.log( obj )        // {‘k1‘:[0,2,3], ‘k2‘:[2,3,4]}
    console.log( obj.k1 )    // [0,2,3]

是不是很奇怪, 未赋值之前的console.log() 居然显示赋值后的状态。 最坑的是数组对象居然没有受到影响,依然显示正常顺序的值! 我心里就想吧,obj  和 obj[‘k1‘] 都是对象,为什么 obj 就奇怪点? 我甚至还想到了 引用传值,作用域声明。真是伤脑筋!

最后还是请教一位同事发现是 console.log() 的问题。

然后就换了 alert()

当然 alert() 直接打印不出来对象,那就使用  alert( JSON.stringify() ),可以正常显示,后来试了

 console.log( JSON.stringify(obj) )  也可以
    var obj = {‘k1‘:[1,2,3], ‘k2‘:[2,3,4]}

    console.log( JSON.stringify(obj) )        // {‘k1‘:[1,2,3], ‘k2‘:[2,3,4]}
    console.log( JSON.stringify(obj.k1) )  // [1,2,3]

    obj[‘k1‘] = [0,2,3]

    console.log( JSON.stringify(obj.k1) )        // {‘k1‘:[0,2,3], ‘k2‘:[2,3,4]}
    console.log( JSON.stringify(obj) )    // [0,2,3]

如果想显示对象还可以长这样:

console.log( JSON.parse(JSON.stringify(obj)) ) 

好吧,这真是个不小的坑!

搜了一下发现: console.log 将在最后一个执行状态显示对象,而不是在调用 console.log的状态。

最后还是不明白,为什么 obj 和 obj.k1 同为对象, console.log() 打印不同?

时间: 2024-12-12 17:54:37

javascript console.log() 带来的疑惑的相关文章

前端不为人知的一面--前端冷知识集锦 前端已经被玩儿坏了!像console.log()可以向控制台输出图片

前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来.现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容. HTML篇 浏览器地址栏运行JavaScript代码 这个很多人应该还是知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以javascript:开

js的console.log()

<script type="text/javascript"> console.log(['华为','苹果','小米']); </script> 原文地址:https://www.cnblogs.com/xm666/p/11333318.html

JavaScript原型链中toString()方法输出alert()和console.log()得到不同的结果

<script language="javascript"> function myObj(){ var total = 0; } myObj.prototype.add = function(a,b){ this.total = a + b; } myObj.prototype.toString = function(){ return this.total; } var obj = new myObj(); obj.add(1,2); console.log(obj);

[Javascript] Advanced Console Log Arguments

Get more mileage from your console output by going beyond mere string logging - log entire introspectable objects, log multiple items in one call, and apply C-Style string substitution to make the console work for you. // Can accept multi args consol

JavaScript调试技巧之console.log()详解

转载 对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻断JavaScript程序的执行,从而造成副作用:而console.log()仅在控制台中打印相关信息,因此不会造成类似的顾虑 一.什么是console.log()?除了一些很老版本的浏览器,现今大多数浏览器都自带调试功能:即使没有调试功能,也可以通过安装插件来进行补充.比如,老版本的Firefox没有自带调试工具,在这种情况下可以通过安装Firebug

javascript 中的console.log和弹出窗口alert

主要是方便你调式javascript用的.你可以看到你在页面中输出的内容. 相比alert他的优点是: 他能看到结构话的东西,如果是alert,淡出一个对象就是[object object],但是console能看到对象的内容. console不会打断你页面的操作,如果用alert弹出来内容,那么页面就死了,但是console输出内容后你页面还可以正常操作. console里面的内容非常丰富,你可以在控制台输入:console,然后就可看到:Console {memory: MemoryInfo

JavaScript调试技巧之console.log()详解--2015-08-07

对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻断 JavaScript程序的执行,从而造成副作用:而console.log()仅在控制台中打印相关信息,因此不会造成类似的顾虑 一.什么是console.log()?除了一些很老版本的浏览器,现今大多数浏览器都自带调试功能: 即使没有调试功能,也可以通过安装插件来进行补充.比如,老版本的Firefox没有自带调试工具,在这种情况下可以通过安装Firebug插

JavaScript写到控制台的方法console.log()

如果您的浏览器支持调试,你可以使用 console.log() 方法在浏览器中显示 JavaScript 值. 浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script typ

[Javascript] Format console.log with CSS and String Template Tags

The Chrome console allows you to format messages using CSS properties. This lesson walks you through the syntax of formatting your logs with css then refactoring into a template tag function to make formatting more reusable. const debug = (label, sty