Tan's-Blog

前言

刚开始学JS的时候，老师就说过要多用console.log() 打印信息。不过也是对于我这种初学者来说console.log()已经够用了，随着学习的深入，log() 面对一个长长的数组时，就显得不是很直观。这个时候就可以用 console.table()来直观显示这一数组。接下来和大家介绍一下console的几个比较常用的方法。

1. console.log()

其实console.log()还隐藏着很多让人意想不到的功能，比如说打印出带css样式的文字，通过%s和%o(注意是字母 o)占位符进行传值。

1.1 %s和%o占位符


var user = {name: 'tan'};

console.log('Hello %s %o', 'World', user);

1.2 打印带样式信息

console.log('%cMsg', 'css')

console.log('Hello %cWorld', 'color: #2b99ff; font-size: 24px;');

1.3 增强log()信息的阅读体验

假设有这么一个场景，你需要一次打印好几个变量信息，而你又不想写好几个console.log()进行一次次打印。这时候你可能会一次打印全部变量，场景如下：

那么问题来了，对象少的时候还是比较好辨别。那如果对象多了，就显得有点混乱了。为了提高它的可读性，可以给这些参数用一个{}包起来，就会有不一样的效果。

2. console.table()

这个API我也是最近才发现的，有点惊讶，居然还有这么好用的东西，话不多说自行体验。

假设有这么一个数组：

var arr = [
        {id: 1, name: '小明', age: '18'},
        {id: 2, name: '小红', age: '19'},
        {id: 3, name: '小东', age: '18'},
        {id: 4, name: '小莉', age: '18'},
        {id: 5, name: '小伟', age: '20'}
    ]