入门前端-《JavaScript 语言入门教程-console 对象与控制台》

妖狐艹你老母 2022-11-11 14:51 164阅读 0赞

# 日志输出等级 #

*  `console.log()`
 *  `console.info()`
 *  `console.debug()`
 *  `console.warn()`  
    warn方法输出信息时，在最前面加一个黄色三角，表示警告
 *  `console.error()`  
    error方法输出信息时，在最前面加一个红色的叉，表示出错。同时，还会高亮显示输出文字和错误发生的堆栈。

## console.table() ##

对于某些复合类型的数据，console.table方法可以将其转为表格显示。

var languages = [
      {  name: "JavaScript", fileExtension: ".js" },
      {  name: "TypeScript", fileExtension: ".ts" },
      {  name: "CoffeeScript", fileExtension: ".coffee" }
    ];
    
    console.table(languages);

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

(index)	name	fileExtension
    0	"JavaScript"	".js"
    1	"TypeScript"	".ts"
    2	"CoffeeScript"	".coffee"

## 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`方法就输出执行次数。

## console.dir() ##

dir方法用来对一个对象进行检查（inspect），并以易于阅读和打印的格式显示。

console.log({ f1: 'foo', f2: 'bar'})
    // Object {f1: "foo", f2: "bar"}
    
    console.dir({ f1: 'foo', f2: 'bar'})
    // Object
    // f1: "foo"
    // f2: "bar"
    // __proto__: Object

该方法对于输出 DOM 对象非常有用，因为会显示 DOM 对象的所有属性。

console.dir(document.body)

Node 环境之中，还可以指定以代码高亮的形式输出。

console.dir(obj, { colors: true})

## 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`方法之后，控制台会显示“计时器名称: 所耗费的时间”。

## console.group()，console.groupEnd()，console.groupCollapsed() ##

console.group和console.groupEnd这两个方法用于将显示的信息分组。它只在输出大量信息时有用，分在一组的信息，可以用鼠标折叠/展开。

console.group('一级分组');
    console.log('一级分组的内容');
    
    console.group('二级分组');
    console.log('二级分组的内容');
    
    console.groupEnd(); // 二级分组结束
    console.groupEnd(); // 一级分组结束

上面代码会将“二级分组”显示在“一级分组”内部，并且“一级分组”和“二级分组”前面都有一个折叠符号，可以用来折叠本级的内容。