javaScript console用法
javaScript console详解
console.log概述
谈到javaScript 的 console，通常能说的就是console.log/info/warning等等，比如，console.time(test){….fn….}console.endTime(test)算个程序跑的时间啦什么鬼的。。这有什么用。没用！而我们追求的是什么？当然是好看！ 以前的日志是这样的：
而现在的日志是这样的：
开工！
自定义日志样式很简单，大概就是
console.log('%c xx','color:red')
%c后边跟想要输出的日志内容，在后边就是跟自定义的样式,得到
像文中这样，每个字体都是不一样的样式，即对每个字前，加%c,然后后边的样式以“，”分割即可，比如
console.log('%c不%c一%c样','color:red','color:blue','color:green')
知道日志自定义样式的原理，做出本文动图就简单了。 首先选择一条想要输出的日志，但是不可能手动去写%c xx %c xxx，如果日志很长那么这也太蠢了。 于是将 日志的每一个字转换成数组的每一个元素，比如本文中的“我的日志萌萌哒”，通过代码，把他转换到数组当中，然后再拼接成%c的字符串，具体操作为：
let log = "我的日志萌萌哒~".split('').reduce((pre, cur)=> {
return pre + '%c' + cur
}, '');这样我们就得到了，类似%c xx这样满足条件的字符串。 然后，在这次循环中，去定义每个字的样式，想要让每个字颜色，大小不同，只需要去，生成随机数，然后赋值给字体大小和颜色即可，以下是加了生成随机样式的代码。
let log = "我的日志萌萌哒~".split('').reduce((pre, cur)=> {
let color = `#${Math.floor(Math.random() * 16777215).toString(16)}`
let random = Math.floor(Math.random() * 10)
style.push({
'font-size': `${random + 20}pt`,
'color': color,
'text-shadow': `5px 5px 10px ${color}`,
'font-family': `${fonts[random]}`//这里在外边定义了一些字体
})
return pre + '%c' + cur
}, '');因为console.log(%c x%c x,’style1’,’style2’)需要的是这样的格式，所以，需要将之前推入style数组的样式对象拿出来，再拼成字符串（这里貌似可以直接在reduce循环里去拼，但是我不，我就要多写几行）。 代码如下：
let styleStr = ''
for (let a of style) {
for (let b in a) {
styleStr += `${b}:${a[b]};`
}
styleStr += `,`
}拼出字符串后，因为格式需要‘，’分割，所以在拼成数组，然后再扩展运算展开。恩，对，就是这样！ console.log(log, …(styleStr.split(‘,’))) 当当当当，大功告成! 绕了这么多路，本文自定义日志的应用场景有哪些呢？ 根本没有！ 做人呢，最重要的就是开心~