JavaScript中的console

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()分组
  • console.dir()交互式列表

console.log()

它可以用来输出一个变量或输出一个字符串。

console.log("Hello");
const str="Hello";
console.log(str);

console.log()的参数可以有多个,输出的结果以一个空格隔开。

const str1="hello";
const str2="world";
console.log(str1,str2);

运行效果:


console.log()可以使用C语言 printf()风格的占位符,不过支持的占位符种类较少,只支持字符串(%s)、整数(%d或%i)、浮点数(%f)和对象(%)。

console.log("%d年%d月%d日",2016,12,30);

运行效果:


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");
JavaScript中的console_第1张图片

console.table()

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

运行效果:


console.time()和console.timeEnd()

记录代码运行花费的时间。

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

运行效果:


console.assert()

cnosole.asseert()类似于单元测试中的断言,用来判断当前值的真假,当表达式为false时,输出错误信息。

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

运行效果:


console.count()

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

function demo() {
    console.count("label");
};
for(let i=0;i<3;i++){
    demo();
}

运行效果:


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

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中的console_第2张图片

console.groupCollapsed()console.group()用法相同,只是默认为折叠显示。

console.dir()

将特定的JS对象显示为可以交互的列表,列表默认是折叠起来的。
在Chrome中打印DOM元素时,console.log()会将DOM元素以HTML的形式输出,而console.dir()会以JSON对象的形式输出。

console.log(document.body);
console.dir(document.body);

运行效果:


JavaScript中的console_第3张图片

你可能感兴趣的:(JavaScript中的console)