javaScript console用法

snowLu 發布于2019-08-21 11:35 / 2982人閱讀

摘要：首先選擇一條想要輸出的日志，但是不可能手動去寫，如果日志很長那么這也太蠢了。代碼如下拼出字符串后，因為格式需要，分割，所以在拼成數組，然后再擴展運算展開。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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