javaScript console用法

最新推荐文章于 2024-10-11 14:49:46 发布

j_bleach

最新推荐文章于 2024-10-11 14:49:46 发布

阅读量584

点赞数 1

分类专栏： js 文章标签： javascript console

本文链接：https://blog.csdn.net/j_bleach/article/details/60975423

版权

js 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

javaScript console详解

console.log概述

谈到javaScript 的 console，通常能说的就是console.log/info/warning等等，比如，console.time(test){….fn….}console.endTime(test)算个程序跑的时间啦什么鬼的。。这有什么用。没用！而我们追求的是什么？当然是好看！
以前的日志是这样的：
这里写图片描述
而现在的日志是这样的：
console

开工！

自定义日志样式很简单，大概就是
console.log('%c xx','color:red')
%c后边跟想要输出的日志内容，在后边就是跟自定义的样式,得到

像文中这样，每个字体都是不一样的样式，即对每个字前，加%c,然后后边的样式以“，”分割即可，比如

console.log('%c不%c一%c样','color:red','color:blue','color:green')

nosame
知道日志自定义样式的原理，做出本文动图就简单了。
首先选择一条想要输出的日志，但是不可能手动去写%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(‘,’)))
当当当当，大功告成!
绕了这么多路，本文自定义日志的应用场景有哪些呢？
根本没有！
做人呢，最重要的就是开心~

代码地址：https://github.com/jiwenjiang/j-selects/tree/develop