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的用法，但願能幫助你們，若是有沒寫到的請留言，我會隨時更新所未補充上的，相互學習，相互幫助，相互進步！