你可能不知道的console

1. 概述

• console 對象提供對瀏覽器控制檯的接入。不一樣瀏覽器上它的工做方式是不同的. 其次它是一個全局對象, 咱們先在控制檯將console打印出來, 看看它裏面都有些什麼東西

2. log()方法

• console.log() 就是向web控制檯輸出一條信息. 參數能夠是變量, 數字, 字符串等。

  // 常規下
  var name = '肖奇 馬斯克'
  console.log('Hello');            // Hello
  console.log(name);               // Jack
  console.log(`Hello, ${name}`);   // 肖奇 馬斯克

• 除此以外, 還支持格式化輸出：

  var name = '肖奇 馬斯克'
  // %s         字符串
  // %d or %i   整數
  // %f         浮點數
  // %c         樣式代碼
  console.log('Hi, 我是%s。', name);
  console.log('%cHi, 我是%s。', 'color: rebeccapurple;', name);

3. info(), warn(), error()方法

• // Info
  console.info('Hi, This is message');
  // warning 警告
  console.warn('On, Your operation may cause a security breach!');
  // Error 報錯
  console.error('Shit! Variable does not exist!');

4. table()方法

• 接受一個數組或者對象, 能夠接受一個額外的參數來描述表格的列數。它會把數據經過表格的形式打印出來

  let array = [
    { name: '肖奇 馬斯克', tag: '虞美人' },
    { name: '拉賈 佩奇', tag: '谷歌' },
    { name: '埃隆 馬斯克', tag: '特斯拉' }
  ];
  console.table(array)

5. group()方法

• console.group和console.groupWEnd就像一對標籤同樣。group在控制檯建立一個新的分組, 輸出到控制檯上的內容都會被添加一個縮進, 表示該內容屬於當前分組, 直到調用console.groupEnd()以後, 當前分組才結束。

  let items = [
    { name: '肖奇 馬斯克', tag: '虞美人' },
    { name: '拉賈 佩奇', tag: '谷歌' },
    { name: '埃隆 馬斯克', tag: '特斯拉' }
  ];
  items.forEach(item => {
    console.group(`${item.name}`);
    console.log(`${item.name}`);
    console.log(`%c表明標識  ${item.tag}`, 'color: red;');
    console.groupEnd(`${item.name}`);
  })

6. dir()方法

• 在控制檯中顯示指定JavaScript對象的屬性，並展示相似文件樹樣式的交互列表。

  console.dir(document.getElementById('header'));

7. count()方法

• 輸出每一次被調用的次數。

  console.count('肖奇 馬斯克');
  console.count('拉賈 佩奇');
  console.count('埃隆 馬斯克');
  console.count('埃隆 馬斯克');
  console.count('拉賈 佩奇');
  console.count('埃隆 馬斯克');
  console.count('埃隆 馬斯克');
  console.count('拉賈 佩奇');

8. clear()方法

• 清除控制檯信息。

  console.clear();
  // 執行結果：Console was cleared

9. time()方法

• 啓動一個計時器（timer）來跟蹤某一個操做的佔用時長。每個計時器必須擁有惟一的名字。 頁面中最多能同時運行10,000個計時器。跟group同樣, time也是配套的。 當以此計時器名字爲參數調用 console.timeEnd() 時，瀏覽器將以毫秒爲單位，輸出對應計時器所通過的時間。

  console.time('fetching data');
  fetch('https://api.github.com/users/anran758')
      .then(data => data.json())
      .then(data => {
          console.timeEnd('fetching data');
          console.log(data);
      });

10. assert()方法

• 第一個參數接受一個斷言(聲明), 第二個參數是一個message。 若是斷言爲false，則將一個錯誤消息寫入控制檯；若是斷言是true，就當作沒發生。

  // 語法：console.assert(assertion, message [, subst1, ..., substN]);
  console.assert(1 === 1, '此條消息不會在控制檯輸出!');
  console.assert(1 === 2, '1 === 2 這是個錯誤!');