console对象

水深无声 2022-03-14 15:08 175阅读 0赞

#### 1、log ####

如果第一个参数是格式字符串（使用了格式占位符），\*\*console.log\*\*方法将依次用后面的参数替换占位符，然后再进行输出。

console.log(' %s + %s = %s', 1, 1, 2)
    // 1 + 1 = 2
    
    console.log("%s + %s = %s", 1, '1', 2);
    // 1 + 1 = 2
    
    console.log("%s + %d = %s", 1, '1', 2);
    // 1 + NaN = 2

上面代码中，`console.log`方法的第一个参数有三个占位符（`%s`），第二、三、四个参数会在显示时，依次替换掉这个三个占位符。

**console.log**方法支持以下占位符，不同类型的数据必须使用对应的占位符。

*  %s 字符串
 *  %d 整数
 *  %i 整数
 *  %f 浮点数
 *  %o 对象的链接
 *  %c CSS 格式字符串

使用`%c`占位符时，对应的参数必须是 **CSS** 代码，用来对输出内容进行CSS渲染。

console.log(
      '%c this is a red text!',
      'color: red; background: yellow; font-size: 24px;'
    )

上面代码运行后，输出的内容将显示为黄底红字。  
![在这里插入图片描述][20190306163643773.]

**console.log**方法的两种参数格式，可以结合在一起使用。

console.log(' %s + %s ', 1, 1, '= 2')
    // 1 + 1 = 2

console对象的所有方法，都可以被覆盖。因此，可以按照自己的需要，定义console.log方法。

['log', 'info', 'warn', 'error'].forEach(function(method) { 
      console[method] = console[method].bind(
        console,
        new Date().toISOString()
      );
    });
    
    console.log("出错了！");
    // 2014-05-18T09:00.000Z 出错了！

上面代码表示，使用自定义的console.log方法，可以在显示结果添加当前时间。

#### 2、warn | error ####

\*\*warn\*\*方法和\*\*error\*\*方法也是在控制台输出信息，它们与log方法的不同之处在于，warn方法输出信息时，在最前面加一个黄色三角，表示警告；error方法输出信息时，在最前面加一个红色的叉，表示出错。同时，还会高亮显示输出文字和错误发生的堆栈。其他方面都一样。

![在这里插入图片描述][20190306164557684.]

#### 3、console.table() ####

下面是显示表格内容的例子。

var languages = { 
      csharp: {  name: "C#", paradigm: "object-oriented" },
      fsharp: {  name: "F#", paradigm: "functional" }
    };
    
    console.table(languages);

上面代码的language，转为表格显示如下。

<table> 
 <thead> 
  <tr> 
   <th align="left">(index)</th> 
   <th align="left">name</th> 
   <th align="left">paradigm</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">csharp</td> 
   <td align="left">“C#”</td> 
   <td align="left">“object-oriented”</td> 
  </tr> 
  <tr> 
   <td align="left">fsharp</td> 
   <td align="left">“F#”</td> 
   <td align="left">“functional”</td> 
  </tr> 
 </tbody> 
</table>

#### 4、console.count() ####

count方法用于计数，输出它被调用了多少次。

function greet(user) { 
      console.count();
      return 'hi ' + user;
    }
    
    greet('bob')
    // : 1
    // "hi bob"
    
    greet('alice')
    // : 2
    // "hi alice"
    
    greet('bob')
    // : 3
    // "hi bob"

上面代码每次调用greet函数，内部的console.count方法就输出执行次数。

该方法可以接受一个字符串作为参数，作为标签，对执行次数进行分类。

function greet(user) { 
      console.count(user);
      return "hi " + user;
    }
    
    greet('bob')
    // bob: 1
    // "hi bob"
    
    greet('alice')
    // alice: 1
    // "hi alice"
    
    greet('bob')
    // bob: 2
    // "hi bob"

上面代码根据参数的不同，显示bob执行了两次，alice执行了一次。

#### 5、dir | log | dirxml ####

对于输出 DOM 对象，略有不同：  
![在这里插入图片描述][20190306170415705.]  
![在这里插入图片描述][20190306170428637.]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70]

#### 6、console.time()，console.timeEnd() ####

这两个方法用于计时，可以算出一个操作所花费的准确时间。

console.time('Array initialize');
    
    var array= new Array(1000000);
    for (var i = array.length - 1; i >= 0; i--) { 
      array[i] = new Object();
    };
    
    console.timeEnd('Array initialize');
    // Array initialize: 1914.481ms

time方法表示计时开始，timeEnd方法表示计时结束。它们的参数是计时器的名称。调用timeEnd方法之后，控制台会显示“计时器名称: 所耗费的时间”。

#### 7、命令行 API ####

（1）`$(selector)`

`$(selector)`返回第一个匹配的元素，等同于document.querySelector()。注意，如果页面脚本对 有 定 义 ， 则 会 覆 盖 原 始 的 定 义 。 比 如 ， 页 面 里 面 有 j Q u e r y ， 控 制 台 执 行 有定义，则会覆盖原始的定义。比如，页面里面有 jQuery，控制台执行 有定义，则会覆盖原始的定义。比如，页面里面有jQuery，控制台执行(selector)就会采用 jQuery 的实现，返回一个数组。

（2）`inspect(object)`

inspect(object)方法打开相关面板，并选中相应的元素，显示它的细节。DOM 元素在Elements面板中显示，比如inspect(document)会在 Elements 面板显示document元素。JavaScript 对象在控制台面板Profiles面板中显示，比如inspect(window)。

（3）`getEventListeners(object)`

getEventListeners(object)方法返回一个对象，该对象的成员为object登记了回调函数的各种事件（比如click或keydown），每个事件对应一个数组，数组的成员为该事件的回调函数。

（4）`keys(object)，values(object)`

keys(object)方法返回一个数组，包含object的所有键名。

values(object)方法返回一个数组，包含object的所有键值。

var o = { 'p1': 'a', 'p2': 'b'};
    
    keys(o)
    // ["p1", "p2"]
    values(o)
    // ["a", "b"]

> 原文请参考：[http://javascript.ruanyifeng.com/stdlib/console.html\#toc2][http_javascript.ruanyifeng.com_stdlib_console.html_toc2]

[20190306163643773.]: /images/20220312/414622a404d0421c90579346d4d6b975.png
[20190306164557684.]: /images/20220312/70a746da947a4c60909dc31c6eb6a445.png
[20190306170415705.]: /images/20220312/5b2aab6474a5425d9bcee8e726efb4b4.png
[20190306170428637.]: /images/20220312/d2a3774c59ae40bc932a17614f8f34e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70]: /images/20220312/658718fca2db4e1cb65c46d86c6d0a88.png
[http_javascript.ruanyifeng.com_stdlib_console.html_toc2]: http://javascript.ruanyifeng.com/stdlib/console.html#toc2