摘要:1.console的用法:在调试 JS 代码时,很多人倾向于使用 alert() 或者 console.log() 方法来输出信息,正如某些 Java 程序员喜欢在调试代码时使用System.out.println() 输出信息一样。但与 Java 输出不一样的是, console 对象拥有多种方法可以更好的呈现信息,从而给代码调试带来方便。

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-js下console方法的一些用法分享

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

1.console的用法:

在调试 JS 代码时,很多人倾向于使用 alert() 或者 console.log() 方法来输出信息,正如某些 Java 程序员喜欢在调试代码时使用System.out.println() 输出信息一样。但与 Java 输出不一样的是, console 对象拥有多种方法可以更好的呈现信息,从而给代码调试带来方便。

console.log()

我们最常用的做法是通过它来输出一个变量或者输出一个字符串。比如下面:

 console.log("Hello China!"); const str = "Hello world!"; console.log(str); 

运行结果如下:

 Hello China! Hello world!

但我们也可以这样用 console.log() :

 // 代码段 1 const str1 = "hello"; const str2 = "world"; console.log(str1, str2);  // 代码段 2 console.log("%d年%d月%d日", 2015, 09, 22); 

控制台会输出:

 hello world 2015年9月22日

console.debug()、https://console.info()、 console.warn() 与 console.error()

这四个方法的使用方法跟 console.log() 一模一样,差别在于输出的颜色与图标不同。下面是示例:

 console.log("log"); console.debug("debug"); console.info("info"); console.warn("warn"); console.error("error"); 

运行结果如下:

console.table()

我们看下面一个变量:

 const people = {     "person1": {"fname": "san", "lname": "zhang"},      "person2": {"fname": "si", "lname": "li"},      "person3": {"fname": "wu", "lname": "wang"} }; 

我们用 console.log() 将之在 Chrome 的控制台中输出:

再用 console.table() 输出:

所以从上面两种输出我们可以看出,当输出类似于这种两层嵌套的对象时,我们可以选择 console.table() 以表格的形式输出。当然,嵌套三层及以上的也会以表格形式输出,但限于表格只能显示二维信息的特点,其会在嵌套三层或以上的地方会显示 "Object" 字符串

在调试时,我们经常需要知道一段代码执行时间,我们可以使用这两行代码来实现。看下面一段代码:

 console.time("for-test");//引号内为一个输出内容标题而已 const arr = []; for(let i = 0; i < 100000; i++) {     arr.push({"key": i}); } console.timeEnd("for-test"); 

输出为:

 for-test: 16.030ms  // Chrome 这优化做的,版本 43 中的时间是:176.152ms

从上面的例子可以看出,我们用 console.time() 和 console.timeEnd() 包围要测试运行时间的代码,这两个方法的参数保持一致,以便正确识别和匹配代码开始和结束的位置。

console.group()、 console.groupEnd() 与 console.groupCollapsed()

一般的 console.log() 方法的输出没有层级关系,在需要一些显示层级关系的输出中显得苍白无力,使用 console.group() 可以达到我们的目的。示例代码如下:

 console.group("1"); console.log("1-1"); console.log("1-2"); console.log("1-3"); console.groupEnd(); console.group("2"); console.log("2-1"); console.log("2-2"); console.log("2-3"); console.groupEnd(); 

1.console的用法:

在调试 JS 代码时,很多人倾向于使用 alert() 或者 console.log() 方法来输出信息,正如某些 Java 程序员喜欢在调试代码时使用System.out.println() 输出信息一样。但与 Java 输出不一样的是, console 对象拥有多种方法可以更好的呈现信息,从而给代码调试带来方便。

console.log()

我们最常用的做法是通过它来输出一个变量或者输出一个字符串。比如下面:

 console.log("Hello China!"); const str = "Hello world!"; console.log(str); 

运行结果如下:

 Hello China! Hello world!

但我们也可以这样用 console.log() :

 // 代码段 1 const str1 = "hello"; const str2 = "world"; console.log(str1, str2);  // 代码段 2 console.log("%d年%d月%d日", 2015, 09, 22); 

控制台会输出:

 hello world 2015年9月22日

console.debug()、https://console.info()、 console.warn() 与 console.error()

这四个方法的使用方法跟 console.log() 一模一样,差别在于输出的颜色与图标不同。下面是示例:

 console.log("log"); console.debug("debug"); console.info("info"); console.warn("warn"); console.error("error"); 

运行结果如下:

console.table()

我们看下面一个变量:

 const people = {     "person1": {"fname": "san", "lname": "zhang"},      "person2": {"fname": "si", "lname": "li"},      "person3": {"fname": "wu", "lname": "wang"} }; 

我们用 console.log() 将之在 Chrome 的控制台中输出:

再用 console.table() 输出:

所以从上面两种输出我们可以看出,当输出类似于这种两层嵌套的对象时,我们可以选择 console.table() 以表格的形式输出。当然,嵌套三层及以上的也会以表格形式输出,但限于表格只能显示二维信息的特点,其会在嵌套三层或以上的地方会显示 "Object" 字符串

在调试时,我们经常需要知道一段代码执行时间,我们可以使用这两行代码来实现。看下面一段代码:

 console.time("for-test");//引号内为一个输出内容标题而已 const arr = []; for(let i = 0; i < 100000; i++) {     arr.push({"key": i}); } console.timeEnd("for-test"); 

输出为:

 for-test: 16.030ms  // Chrome 这优化做的,版本 43 中的时间是:176.152ms

从上面的例子可以看出,我们用 console.time() 和 console.timeEnd() 包围要测试运行时间的代码,这两个方法的参数保持一致,以便正确识别和匹配代码开始和结束的位置。

console.group()、 console.groupEnd() 与 console.groupCollapsed()

一般的 console.log() 方法的输出没有层级关系,在需要一些显示层级关系的输出中显得苍白无力,使用 console.group() 可以达到我们的目的。示例代码如下:

 console.group("1"); console.log("1-1"); console.log("1-2"); console.log("1-3"); console.groupEnd(); console.group("2"); console.log("2-1"); console.log("2-2"); console.log("2-3"); console.groupEnd(); 

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

js实例教程-js下console方法的一些用法分享

全部内容,希望文章能够帮你解决

js实例教程-js下console方法的一些用法分享

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过