console

console的方法

• 提示類

  這類方法的目的和效果類似，都是提示，只是提示的類型不同：log,debug,info,warn,error。這些方法我們經常使用，所以就不多說，看看其他的方法吧。👇👇👇

• 計算

  • console.count

    function func(){
    	console.count("order");   // 此處如果不填，默認是 default
    }
    
    for(let i = 0;i<3;i++){
      func();
    }
    

  • console.time()和console.timeEnd()

    測試一段代碼的執行時間，在進行代碼優化之後，對比哪種寫法的執行效率更高:

    console.time();
      function func() {
        console.count("order");   // 此處如果不填，默認是 default    
        /**
        *
        * order: 1
        * order: 2
        * order: 3
        */
      }
    
      for (let i = 0; i < 3; i++) {
        func();
      }
      console.timeEnd();     //default: 0.310791015625ms
    

• 其他

  • trace

    function add(x, y) {
        console.trace();
        return x + y;
    }
      // 調用:
      var result = add3(6, 6);
      function add3(x, y) { return add2(x, y); }
      function add2(x, y) { return add1(x, y); }
      function add1(x, y) { return add(x, y); }
    

  • table

    • 語法：console.table(tabledata, tablecolumns)

    • 參數

      • 第一個是填充到表格的數據，可以是數組或者對象，必填，
      • 第二個是標題欄名稱，選填

    • 例子

      var table = [
      { "name": "Anna", "sex": "女" },
      { "name": "Jack", "sex": "男" },
      { "name": "Tom", "sex": "男"},
      ];
      console.table(table);
      

• 樣式

  • 語法：console.log("%c內容",樣式）

  • %c起到了關鍵作用，它的功能是根據提供的樣式代碼對輸出內容進行格式化。

  • 例子

    console.log("%cHello World!"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");