javascript中console的用法

最近在掘金以及其余网站上看到不少关于console的帖子，因为自己前端对于console和alert调试数据逻辑很广泛 因此就想整理一下console的用法 若是还有没被整理出来的请留言，共同进步。好了  翠花 上酸菜：

• 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+='<p>追加的内容</p>';
  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()是统计代码所执行的次数。

以上就是所总结的console的用法，但愿能帮助你们，若是有没写到的请留言，我会随时更新所未补充上的，相互学习，相互帮助，相互进步！