Javascript中console如何使用？

Posted 2020-11-01

本文和大家分享的主要是javascript中console的使用相关内容，一起来看看吧，希望对大家学习javascript有所帮助。

． console.log

对于console.log（）应该很熟悉 往往传一个变量或字符串以便检查函数是否调用等或打印出变量数据。

let  arr=[1,2,3,4];console.log(arr);console.log("first","goods");// 打印结果为:

(4) [1, 2, 3, 4]

first goods

然而也可以使用占位符进行输入：

console.log("%s","string");// 输出结果：string

console.log("%d年%d月%d日",2014,03,10);//输出结果：2014年3月10日

console.log("%f",7.18534);// 输出结果：7.18534

console.log()的参数可多个，以空格为分隔。同时也可使用占位符，字符（%s）,整数（%d）,浮点（%f）。值得注意的是console.log只能使用以上占位符！！！！

． 显示信息的命令

1. console.info()   用于显示提示性信息

2. console.error() 用于显示错误性信息

3. console.warn() 用于显示警告性信息

console.log("first");console.info("info");console.error("error");console.warn("waring");

输出结果为：

通过以上例子可知info,error,warn的用法和log的使用用法一致，只不过所输出的图标与颜色不同。

． console.table()

let arry= [

{name: ’123’,age: ’12’,sex: ’n’,phone: ’212’},

{name: ’123’,age: ’12’,sex: ’n’,phone: ’212’},

{name: ’123’,age: ’12’,sex: ’n’,phone: ’212’},

]

console.table(arry);

输出结果为：

console.table()方法可以将传入的对象或数组这些复合数据以表格形式输出,变于在工作比较所对应的的Key值。

． console.group(),console.groupEnd(）

console.group("第一组信息");

console.log("第一组第一条：我的博客");

console.log("第一组第二条：CSDN");console.groupEnd();

console.group("第二组信息");

console.log("第二组第一条：程序爱好者QQ群");

console.log("第二组第二条：欢迎你加入");console.groupEnd();

输出结果为：

在使用console.log()中，我们知道，其职能是输出变量及字符串，然而并没有层级关系，

在一些特定的场景中，我们需要明确层级关系，这时console.gruop()和console.gruopEnd()作用就显现出来了。值得注意是：console.gruop()和console.gruopEnd()要尽量同时使用，否则层级关系会很混乱！！！

． console.time(),console.timeEnd()

console.time();let a=[];for(let i=0;i<10000;i++){

a..push(i);};console.timeEnd();// 输出结果为：default: 1.18115234375ms

在某些特定的场景中或在做一些性能优化时，我们需要知道某一个方法或逻辑需要跑多长时间，符不符合当时所有限定的条件时，console.time(),console.timeEnd()可以帮我们实现。

． console.dir()

var init = {

name: ’bob’,

age: ’12’,

firsrcard: ’101’,

getSchool: function(res) {

return res = ’MJXX’;

}

}

console.dir(init);

输出结果为：

console.dir()是以树状结构的形式展现出一个对象的所有属性和方法。

． console.dirxml()

var info=document.getElementById(’age’);

info.innerhtml+=’

追加的内容

’;console.dirxml(info);

输出结果：

console.dirxml()输出的是某个节点的所包含的html，xml代码。

． console.assert()

let isboolea=false;

console.assert(isboolea);

console.assert()是用来判断一个表达式变量是否为真，只有表达式为false时，才输出一条相应信息，并且抛出异常，如果为true是控制台直接报错。

． console.profile()和console.profileEnd()

function All(){

// alert(11);

for(var i = 0; i < 10; i++){

funcA(100);

}

funcB(1000);

}function funcA(count){

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

}function funcB(count){

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

}console.profile("性能分析器");

All();console.profileEnd();//输出结果为：

Profile ’性能分析器’ started.

undefined

Profile ’性能分析器’ finished.

console.profile()和console.profileEnd()是分析程序各部分所运行的时间，找出瓶颈所在，但说实话，我也是在整理的时候看到，没有用过此用法。不太了解，如有使用过的请留言告知！

． console.count()

function Cunts(){

console.count("被调用的次数");};Cunts();Cunts();Cunts();

//输出结果为：

被调用的次数: 1

被调用的次数: 2

被调用的次数: 3

console.count()是统计代码所执行的次数。

 

 

 来源：网络