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

資訊專欄INFORMATION COLUMN

JavaScript 中 console 的用法

leo108 / 1152人閱讀

摘要：根據(jù)常用程度，列出以下幾種對(duì)象的方法與與與以下示例的運(yùn)行環(huán)境是。與這四個(gè)方法的使用方法跟一模一樣，差別在于輸出的顏色與圖標(biāo)不同。類似于單元測試中的斷言，當(dāng)表達(dá)式為時(shí)，輸出錯(cuò)誤信息。

Javascript 中 console 的用法

在調(diào)試 JS 代碼時(shí)，很多人傾向于使用 alert() 或者 console.log() 方法來輸出信息，正如某些 Java 程序員喜歡在調(diào)試代碼時(shí)使用 System.out.println() 輸出信息一樣。但與 Java 輸出不一樣的是， console 對(duì)象擁有多種方法可以更好的呈現(xiàn)信息，從而給代碼調(diào)試帶來方便。根據(jù)常用程度，列出以下幾種 console 對(duì)象的方法：

console.log()

console.debug()、console.info()、console.warn() 與 console.error()

console.table()

console.time() 與 console.timeEnd()

console.assert()

console.count()

console.group、console.groupEnd() 與 console.groupCollapsed()

以下示例的運(yùn)行環(huán)境是 Chrome 43。

console.log()

先來談?wù)勎覀冏钍煜ひ沧畛Ｓ玫?console.log() 方法。

我們最常用的做法是通過它來輸出一個(gè)變量或者輸出一個(gè)字符串。比如下面：

console.log("Hello China!");
var str = "Hello world!";
console.log(str);

運(yùn)行結(jié)果如下：

Hello China!
Hello world!

但我們也可以這樣用 console.log() ：

// 代碼段 1
var str1 = "hello";
var str2 = "world";
console.log(str1, str2);

// 代碼段 2
console.log("%d年%d月%d日", 2015, 09, 22);

控制臺(tái)會(huì)輸出：

hello world
2015年9月22日

代碼片段 1 顯示，console.log() 的參數(shù)可以有多個(gè)，輸出的結(jié)果以一個(gè)空格隔開。

代碼片段 2 顯示，console.log() 可以使用 C 語言 printf() 風(fēng)格的占位符，不過其支持的占位符種類較少，只支持字符串（%s）、整數(shù)（%d或%i）、浮點(diǎn)數(shù)（%f）和對(duì)象（%o）。

console.debug()、 console.info()、 console.warn() 與 console.error()

這四個(gè)方法的使用方法跟 console.log() 一模一樣，差別在于輸出的顏色與圖標(biāo)不同。下面是示例：

console.log("log");
console.debug("debug");
console.info("info");
console.warn("warn");
console.error("error");

運(yùn)行結(jié)果如下：

console.table()

我們看下面一個(gè)變量：

var people = {
    "person1": {"fname": "san", "lname": "zhang"}, 
    "person2": {"fname": "si", "lname": "li"}, 
    "person3": {"fname": "wu", "lname": "wang"}
};

我們用 console.log() 將之在 Chrome 的控制臺(tái)中輸出：

再用 console.table() 輸出：

所以從上面兩種輸出我們可以看出，當(dāng)輸出類似于這種兩層嵌套的對(duì)象時(shí)，我們可以選擇 console.table() 以表格的形式輸出。當(dāng)然，嵌套三層及以上的也會(huì)以表格形式輸出，但限于表格只能顯示二維信息的特點(diǎn)，其會(huì)在嵌套三層或以上的地方會(huì)顯示 "Object" 字符串。

console.time() 與 console.timeEnd()

在調(diào)試時(shí)，我們經(jīng)常需要知道一段代碼執(zhí)行時(shí)間，我們可以使用這兩行代碼來實(shí)現(xiàn)?？聪旅嬉欢未a：

console.time("for-test");
var arr = [];
for(var i = 0; i < 100000; i++) {
    arr.push({"key": i});
}
console.timeEnd("for-test");

輸出為：

for-test: 176.152ms

從上面的例子可以看出，我們用 console.time() 和 console.timeEnd() 包圍要測試運(yùn)行時(shí)間的代碼，這兩個(gè)方法的參數(shù)保持一致，以便正確識(shí)別和匹配代碼開始和結(jié)束的位置。

console.assert()

console.assert() 類似于單元測試中的斷言，當(dāng)表達(dá)式為 false 時(shí)，輸出錯(cuò)誤信息。示例如下：

var arr = [1, 2, 3];
console.assert(arr.length === 4);

輸出結(jié)果如下：

console.count()

調(diào)試代碼時(shí)，我們經(jīng)常需要知道一段代碼被執(zhí)行了多少次，我們可以使用 console.count() 來方便的達(dá)到我們的目的。示例如下：

function func() {
    console.count("label");
}

for(var i = 0; i < 3; i++) {
    func();
}

運(yùn)行結(jié)果為：

label: 1
label: 2
label: 3
console.group()、 console.groupEnd() 與 console.groupCollapsed()

一般的 console.log() 方法的輸出沒有層級(jí)關(guān)系，在需要一些顯示層級(jí)關(guān)系的輸出中顯得蒼白無力，使用 console.group() 可以達(dá)到我們的目的。示例代碼如下：

console.group("1");
console.log("1-1");
console.log("1-2");
console.log("1-3");
console.groupEnd();
console.group("2");
console.log("2-1");
console.log("2-2");
console.log("2-3");
console.groupEnd();

運(yùn)行結(jié)果為：

把 "group" 換成 "groupCollapsed"，則默認(rèn)為折疊運(yùn)行結(jié)果。

由于本文只列出部分方法，查看完整方法請(qǐng)移步阮一峰前輩的博客。

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

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

相關(guān)文章

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

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

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

  • javaScript console用法

    摘要：首先選擇一條想要輸出的日志，但是不可能手動(dòng)去寫，如果日志很長那么這也太蠢了。代碼如下拼出字符串后，因?yàn)楦袷叫枰?，分割，所以在拼成?shù)組，然后再擴(kuò)展運(yùn)算展開。 console.log概述 談到j(luò)avaScript 的 console，通常能說的就是console.log/info/warning等等，比如，console.time(test){....fn....}console.endT...

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

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

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

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

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

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