JavaScript 中 console 的用法

leo108 发布于2019-08-21 10:42 / 1046人阅读

摘要：根据常用程度，列出以下几种对象的方法与与与以下示例的运行环境是。与这四个方法的使用方法跟一模一样，差别在于输出的颜色与图标不同。类似于单元测试中的断言，当表达式为时，输出错误信息。

Javascript 中 console 的用法

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

console.log()

console.debug()、console.info()、console.warn() 与 console.error()

console.table()

console.time() 与 console.timeEnd()

console.assert()

console.count()

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

以下示例的运行环境是 Chrome 43。

console.log()

先来谈谈我们最熟悉也最常用的 console.log() 方法。

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

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

运行结果如下：

Hello China!
Hello world!

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

// 代码段 1
var str1 = "hello";
var str2 = "world";
console.log(str1, str2);

// 代码段 2
console.log("%d年%d月%d日", 2015, 09, 22);

控制台会输出：

hello world
2015年9月22日

代码片段 1 显示，console.log() 的参数可以有多个，输出的结果以一个空格隔开。

代码片段 2 显示，console.log() 可以使用 C 语言 printf() 风格的占位符，不过其支持的占位符种类较少，只支持字符串（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）。

console.debug()、 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()

我们看下面一个变量：

var 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() 与 console.timeEnd()

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

console.time("for-test");
var arr = [];
for(var i = 0; i < 100000; i++) {
    arr.push({"key": i});
}
console.timeEnd("for-test");

输出为：

for-test: 176.152ms

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

console.assert()

console.assert() 类似于单元测试中的断言，当表达式为 false 时，输出错误信息。示例如下：

var arr = [1, 2, 3];
console.assert(arr.length === 4);

输出结果如下：

console.count()

调试代码时，我们经常需要知道一段代码被执行了多少次，我们可以使用 console.count() 来方便的达到我们的目的。示例如下：

function func() {
    console.count("label");
}

for(var i = 0; i < 3; i++) {
    func();
}

运行结果为：

label: 1
label: 2
label: 3

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

运行结果为：

把 "group" 换成 "groupCollapsed"，则默认为折叠运行结果。

由于本文只列出部分方法，查看完整方法请移步阮一峰前辈的博客。

专线服务超融合服务器 java中枚举的用法 python中for的用法 python中input的用法 php中css的用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86033.html

js中数据的用法总结

摘要：一，会改变原数组移除数组末尾最后一项，返回删除的元素如果你在一个空数组上调用，它返回在数组末尾添加一个或多个元素，返回修改后数组长度移除数组第一项，返回移除的元素在数组头部添加一个或多个元素，返回修改后数组长度对数组元素排序，返回排序后的数一，会改变原数组 1.移除数组末尾最后一项.pop()，返回删除的元素如果你在一个空数组上调用 pop()，它返回 undefined let...

Snailclimb 2019-08-22 15:53 评论0 收藏0
javaScript console用法

摘要：首先选择一条想要输出的日志，但是不可能手动去写，如果日志很长那么这也太蠢了。代码如下拼出字符串后，因为格式需要，分割，所以在拼成数组，然后再扩展运算展开。 console.log概述谈到javaScript 的 console，通常能说的就是console.log/info/warning等等，比如，console.time(test){....fn....}console.endT...

snowLu 2019-08-21 11:35 评论0 收藏0
JavaScript 之核心语法 [ 运算符 ]

摘要：算数运算符算数运算符表示对数据值进行计算加法运算符写法加号类型的数据值，会正常进行计算类型的数据值，会先将类型转换成类型，然后在进行计算类型的数据值，无法进行计算，他会将其他类型都转换成类型，在进行字符串的拼接定义变量哦吼吼吼加法运算类算数运算符算数运算符 - 表示对数据值进行计算加法运算符 - 写法：加号 + number类型的数据值，会正常进行计算 boolean类型的...

zhongmeizhi 2019-08-23 10:49 评论0 收藏0
快速理解JavaScript中this的用法与陷阱

摘要：赫敏第三行的是在最外层执行，也就是在全局对象下。而在对象下声明了属性，就相当于罗恩，输出的当然就是罗恩。之所以写这篇文章，是为了我下一篇文章做铺垫快速理解中和的用法敬请期待 this是 JS 这门语言的魅力之一——灵活方便又难以捉摸，即使是有经验的程序员，如果不仔细也有可能搞错，关于this的用法也成为许多公司的经典面试题。如果你写过 Java ，你可能接触过this——一般指向当前...

Kylin_Mountain 2019-08-19 17:48 评论0 收藏0
Javascript调试命令——你只会Console.log() ?

摘要：调试命令你只会对象提供对浏览器控制台的接入如的。分类输出不同类别信息的输出文字信息提示信息警告信息错误信息分组输出使用和包裹分组内容。中的参数作为计时器的标识，具有唯一性。应该需要其他的调试工具。 Javascript调试命令——你只会Console.log() ? Console 对象提供对浏览器控制台的接入（如：Firefox 的 Web Console）。不同浏览器上它的工作方式...

Ocean 2019-08-22 13:59 评论0 收藏0