javaScript console用法

snowLu 发布于2019-08-21 11:35 / 2895人阅读

摘要：首先选择一条想要输出的日志，但是不可能手动去写，如果日志很长那么这也太蠢了。代码如下拼出字符串后，因为格式需要，分割，所以在拼成数组，然后再扩展运算展开。

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(",")))
当当当当，大功告成!
绕了这么多路，本文自定义日志的应用场景有哪些呢？

根本没有！

做人呢，最重要的就是开心~

代码地址：https://github.com/jiwenjiang...

GPU云服务器云服务器 javascript用法 javascript常见用法 javascript_bind用法 console

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86899.html

JavaScript 中 console 的用法

摘要：根据常用程度，列出以下几种对象的方法与与与以下示例的运行环境是。与这四个方法的使用方法跟一模一样，差别在于输出的颜色与图标不同。类似于单元测试中的断言，当表达式为时，输出错误信息。 Javascript 中 console 的用法在调试 JS 代码时，很多人倾向于使用 alert() 或者 console.log() 方法来输出信息，正如某些 Java 程序员喜欢在调试代码时使用 S...

leo108 2019-08-21 10:42 评论0 收藏0
js中数据的用法总结

摘要：一，会改变原数组移除数组末尾最后一项，返回删除的元素如果你在一个空数组上调用，它返回在数组末尾添加一个或多个元素，返回修改后数组长度移除数组第一项，返回移除的元素在数组头部添加一个或多个元素，返回修改后数组长度对数组元素排序，返回排序后的数一，会改变原数组 1.移除数组末尾最后一项.pop()，返回删除的元素如果你在一个空数组上调用 pop()，它返回 undefined let...

Snailclimb 2019-08-22 15:53 评论0 收藏0
JavaScript 之核心语法 [ 运算符 ]

摘要：算数运算符算数运算符表示对数据值进行计算加法运算符写法加号类型的数据值，会正常进行计算类型的数据值，会先将类型转换成类型，然后在进行计算类型的数据值，无法进行计算，他会将其他类型都转换成类型，在进行字符串的拼接定义变量哦吼吼吼加法运算类算数运算符算数运算符 - 表示对数据值进行计算加法运算符 - 写法：加号 + number类型的数据值，会正常进行计算 boolean类型的...

zhongmeizhi 2019-08-23 10:49 评论0 收藏0
快速理解JavaScript中this的用法与陷阱

摘要：赫敏第三行的是在最外层执行，也就是在全局对象下。而在对象下声明了属性，就相当于罗恩，输出的当然就是罗恩。之所以写这篇文章，是为了我下一篇文章做铺垫快速理解中和的用法敬请期待 this是 JS 这门语言的魅力之一——灵活方便又难以捉摸，即使是有经验的程序员，如果不仔细也有可能搞错，关于this的用法也成为许多公司的经典面试题。如果你写过 Java ，你可能接触过this——一般指向当前...

Kylin_Mountain 2019-08-19 17:48 评论0 收藏0
Javascript调试命令——你只会Console.log() ?

摘要：调试命令你只会对象提供对浏览器控制台的接入如的。分类输出不同类别信息的输出文字信息提示信息警告信息错误信息分组输出使用和包裹分组内容。中的参数作为计时器的标识，具有唯一性。应该需要其他的调试工具。 Javascript调试命令——你只会Console.log() ? Console 对象提供对浏览器控制台的接入（如：Firefox 的 Web Console）。不同浏览器上它的工作方式...

Ocean 2019-08-22 13:59 评论0 收藏0