Swift51.com
麦子学院 头像
麦子学院  2018-04-23 21:55

Javascript学习之console的使方法详解

回复:0  查看:2694  

本文和大家分享的主要是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);//输出结果:2014310

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

  输出结果为:

Javascript学习之console的使方法详解

通过以上例子可知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);

  输出结果为:

Javascript学习之console的使方法详解

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

  输出结果为:

Javascript学习之console的使方法详解

在使用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);

  输出结果为:

Javascript学习之console的使方法详解

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

  . console.dirxml()

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

  info.innerHTML+='

追加的内容

';console.dirxml(info);

  输出结果:

Javascript学习之console的使方法详解

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

  . console.assert()

  let isboolea=false;

  console.assert(isboolea);

Javascript学习之console的使方法详解

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()是统计代码所执行的次数。

 

 

 来源:网络