这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

前言

今天要认识的是花里胡哨的console家族成员。

花里胡哨的 console

以表格形式输出：console.table

对于数组或对象类型的数据，console.table 方法可以将数据以表格形式打印。

// 打印一个包含对象的数组
function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");

console.table([john, jane, emily]);

输出结果：这样看起来是不是好看多了呢~

console.table 方法还可以接受一个 column 参数，用于配置想要显示的列，比如说上述例子我们只想显示 firstName：

console.table([john, jane, emily],['firstName']);

格式化输出

当需要快速拼接多个参数、或自定义输出格式的时候，可以使用%xxx 占位符作为解决方案。console 支持的占位符有：

• \n：换行
• %s：字符串（整数、小数也可以）
• %d 或 %i：整数
• %f：浮点数
• %o 或 %O：对象
• %c：css样式

看看具体用法：

// %s 
console.log('%s---%s---%s---%s','%s test', 123, 45.6, {a:1,b:2})

// %d %i %f 
console.log('%s---%d---%i---%f---%d','%d %i %f test', 123, 45.6, 7.89, {a:1,b:2})

// %o %O
console.log('%s---%o---%O','%o %O test', {a:1,b:2}, {a:1,b:2})

// %c
const style = 'color: #f00; font-size:18px; font-weight:800; background: #FF0'
const content = 'this is a %c test' 
console.log('%c %s', style, content)

输出效果如下：

自定义对象输出格式：devtoolsFormatters

为了支持这点，咱们需要先启用一下配置：Ctrl+Shift+P，输入preferences 打开配置面板，找到 console 的 enable custom formatters 配置，启用它。

然后咱们就可以开始写自定义的输出方法 window.devtoolsFormatters 了。这个 formatter最多可以包含三个方法：

• header : 处理展示在 console 的日志中的主要部分。header 方法返回一个 JsonML 数组
• hasbody : 如果想显示一个用来展开对象的 ▶ 箭头，返回 true
• body : 定义将会被显示在展开部分的内容中。

JsonML（JSON Markup Language），如果你写过 React 或者用过 Vue 的 render 方法，应该会很熟悉这个结构，它由三部分组成：
[ 标签名, 属性对象, 内容（文本或子节点）]

什么情况下可能会用到这个花里胡哨的玩意儿呢？比如说你想在队友的一堆输入里面找到自己输出的部分、比如说你想给某个特殊的实例对象输出易于辨认的标识、再比如你纯粹想找点乐子哈哈哈。来看看具体用法：

window.devtoolsFormatters = [{
    header: function(obj){ 
      //判断是否是自定义格式方法
      if (!obj.__clown) {
        return null;
      }      
      //移除标记
      delete obj.__clown;      
      //定义输出样式
      const style = `
        border: dotted 2px gray;
        border-radius: 4px;
        padding: 5px;
      `
      //定义输出内容
      const content = `🤡 ${JSON.stringify(obj)}`;
      try {
        // return 带样式的内容
        return ['div', {style}, content]
      } catch (err) {
        // 容错处理，return null 即按常规格式输出
        return null;
      }
    },
    hasBody: function(){
        return false;
    }
}]

console.clown = function (obj) {
  console.log({...obj, __clown: true});
}

好了，试试用起来是什么效果？

console.clown({message: 'hello!'});

输出结果：