成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

javaScript console用法

snowLu / 2985人閱讀

摘要：首先選擇一條想要輸出的日志，但是不可能手動(dòng)去寫(xiě)，如果日志很長(zhǎng)那么這也太蠢了。代碼如下拼出字符串后，因?yàn)楦袷叫枰?，分割，所以在拼成?shù)組，然后再擴(kuò)展運(yùn)算展開(kāi)。

console.log概述

談到j(luò)avaScript 的 console，通常能說(shuō)的就是console.log/info/warning等等，比如，console.time(test){....fn....}console.endTime(test)算個(gè)程序跑的時(shí)間啦什么鬼的。。這有什么用。

沒(méi)用！

而我們追求的是什么？當(dāng)然是

好看！

以前的日志是這樣的：

而現(xiàn)在的日志是這樣的：

開(kāi)工！

自定義日志樣式很簡(jiǎn)單，大概就是

console.log("%c xx","color:red")

%c后邊跟想要輸出的日志內(nèi)容，在后邊就是跟自定義的樣式,得到

像文中這樣，每個(gè)字體都是不一樣的樣式，即對(duì)每個(gè)字前，加%c,然后后邊的樣式以“，”分割即可，比如

console.log("%c不%c一%c樣","color:red","color:blue","color:green")

知道日志自定義樣式的原理，做出本文動(dòng)圖就簡(jiǎn)單了。
首先選擇一條想要輸出的日志，但是不可能手動(dòng)去寫(xiě)%c xx %c xxx，如果日志很長(zhǎng)那么這也太蠢了。
于是將 日志的每一個(gè)字轉(zhuǎn)換成數(shù)組的每一個(gè)元素，比如本文中的“我的日志萌萌噠”，通過(guò)代碼，把他轉(zhuǎn)換到數(shù)組當(dāng)中，然后再拼接成%c的字符串，具體操作為：

let log = "我的日志萌萌噠~".split("").reduce((pre, cur)=> {
                   return pre + "%c" + cur
                   }, "");

這樣我們就得到了，類似%c xx這樣滿足條件的字符串。
然后，在這次循環(huán)中，去定義每個(gè)字的樣式，想要讓每個(gè)字顏色，大小不同，只需要去，生成隨機(jī)數(shù)，然后賦值給字體大小和顏色即可，以下是加了生成隨機(jī)樣式的代碼。

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
                }, "");

因?yàn)閏onsole.log(%c x%c x,"style1","style2")需要的是這樣的格式，所以，需要將之前推入style數(shù)組的樣式對(duì)象拿出來(lái)，再拼成字符串（這里貌似可以直接在reduce循環(huán)里去拼，但是我不，我就要多寫(xiě)幾行）。
代碼如下：

        let styleStr = ""
        for (let a of style) {
                for (let b in a) {
                    styleStr += `$:${a[b]};`
                    }
                    styleStr += `,`
                }

拼出字符串后，因?yàn)楦袷叫枰?，’分割，所以在拼成?shù)組，然后再擴(kuò)展運(yùn)算展開(kāi)。恩，對(duì)，就是這樣！
console.log(log, ...(styleStr.split(",")))
當(dāng)當(dāng)當(dāng)當(dāng)，大功告成!
繞了這么多路，本文自定義日志的應(yīng)用場(chǎng)景有哪些呢？

根本沒(méi)有！

做人呢，最重要的就是開(kāi)心~





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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86899.html

相關(guān)文章

  • JavaScript 中 console 的用法

    摘要：根據(jù)常用程度，列出以下幾種對(duì)象的方法與與與以下示例的運(yùn)行環(huán)境是。與這四個(gè)方法的使用方法跟一模一樣，差別在于輸出的顏色與圖標(biāo)不同。類似于單元測(cè)試中的斷言，當(dāng)表達(dá)式為時(shí)，輸出錯(cuò)誤信息。 Javascript 中 console 的用法 在調(diào)試 JS 代碼時(shí)，很多人傾向于使用 alert() 或者 console.log() 方法來(lái)輸出信息，正如某些 Java 程序員喜歡在調(diào)試代碼時(shí)使用 S...

    leo108 評(píng)論0 收藏0

  • js中數(shù)據(jù)的用法總結(jié)

    摘要：一，會(huì)改變?cè)瓟?shù)組移除數(shù)組末尾最后一項(xiàng)，返回刪除的元素如果你在一個(gè)空數(shù)組上調(diào)用，它返回在數(shù)組末尾添加一個(gè)或多個(gè)元素，返回修改后數(shù)組長(zhǎng)度移除數(shù)組第一項(xiàng)，返回移除的元素在數(shù)組頭部添加一個(gè)或多個(gè)元素，返回修改后數(shù)組長(zhǎng)度對(duì)數(shù)組元素排序，返回排序后的數(shù) 一，會(huì)改變?cè)瓟?shù)組 1.移除數(shù)組末尾最后一項(xiàng).pop()，返回刪除的元素 如果你在一個(gè)空數(shù)組上調(diào)用 pop()，它返回 undefined let...

    Snailclimb 評(píng)論0 收藏0

  • JavaScript 之 核心語(yǔ)法 [ 運(yùn)算符 ]

    摘要：算數(shù)運(yùn)算符算數(shù)運(yùn)算符表示對(duì)數(shù)據(jù)值進(jìn)行計(jì)算加法運(yùn)算符寫(xiě)法加號(hào)類型的數(shù)據(jù)值，會(huì)正常進(jìn)行計(jì)算類型的數(shù)據(jù)值，會(huì)先將類型轉(zhuǎn)換成類型，然后在進(jìn)行計(jì)算類型的數(shù)據(jù)值，無(wú)法進(jìn)行計(jì)算，他會(huì)將其他類型都轉(zhuǎn)換成類型，在進(jìn)行字符串的拼接定義變量哦吼吼吼加法運(yùn)算類 算數(shù)運(yùn)算符 算數(shù)運(yùn)算符 - 表示對(duì)數(shù)據(jù)值進(jìn)行計(jì)算 加法運(yùn)算符 - 寫(xiě)法：加號(hào) + number類型的數(shù)據(jù)值，會(huì)正常進(jìn)行計(jì)算 boolean類型的...

    zhongmeizhi 評(píng)論0 收藏0

  • 快速理解JavaScript中this的用法與陷阱

    摘要：赫敏第三行的是在最外層執(zhí)行，也就是在全局對(duì)象下。而在對(duì)象下聲明了屬性，就相當(dāng)于羅恩，輸出的當(dāng)然就是羅恩。之所以寫(xiě)這篇文章，是為了我下一篇文章做鋪墊快速理解中和的用法敬請(qǐng)期待 this是 JS 這門語(yǔ)言的魅力之一——靈活方便又難以捉摸，即使是有經(jīng)驗(yàn)的程序員，如果不仔細(xì)也有可能搞錯(cuò)，關(guān)于this的用法也成為許多公司的經(jīng)典面試題。 如果你寫(xiě)過(guò) Java ，你可能接觸過(guò)this——一般指向當(dāng)前...

    Kylin_Mountain 評(píng)論0 收藏0

  • Javascript調(diào)試命令——你只會(huì)Console.log() ?

    摘要：調(diào)試命令你只會(huì)對(duì)象提供對(duì)瀏覽器控制臺(tái)的接入如的。分類輸出不同類別信息的輸出文字信息提示信息警告信息錯(cuò)誤信息分組輸出使用和包裹分組內(nèi)容。中的參數(shù)作為計(jì)時(shí)器的標(biāo)識(shí)，具有唯一性。應(yīng)該需要其他的調(diào)試工具。 Javascript調(diào)試命令——你只會(huì)Console.log() ? Console 對(duì)象提供對(duì)瀏覽器控制臺(tái)的接入（如：Firefox 的 Web Console）。不同瀏覽器上它的工作方式...

    Ocean 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<