Javascript學習之console的使方法詳解

本文和大家分享的主要是javascript中console的使用相關內容，一起來看看吧，希望對大家學習javascript有所幫助。

　?。?console.log

　　對于console.log（）應該很熟悉 往往傳一個變量或字符串以便檢查函數(shù)是否調用等或打印出變量數(shù)據。

　　let  arr=[1,2,3,4];console.log(arr);console.log("first","goods");// 打印結果為:

　　(4) [1, 2, 3, 4]

　　first goods

　　然而也可以使用占位符進行輸入：

　　console.log("%s","string");// 輸出結果：string

　　console.log("%d年%d月%d日",2014,03,10);//輸出結果：2014年3月10日

　　console.log("%f",7.18534);// 輸出結果：7.18534

　　console.log()的參數(shù)可多個，以空格為分隔。同時也可使用占位符，字符（%s）,整數(shù)（%d）,浮點（%f）。值得注意的是console.log只能使用以上占位符?。。?！

　　． 顯示信息的命令

　　1. console.info()   用于顯示提示性信息

　　2. console.error() 用于顯示錯誤性信息

　　3. console.warn() 用于顯示警告性信息

　　console.log("first");console.info("info");console.error("error");console.warn("waring");

　　輸出結果為：

通過以上例子可知info,error,warn的用法和log的使用用法一致，只不過所輸出的圖標與顏色不同。

　?。?console.table()

　　let arry= [

　　{name: '123',age: '12',sex: 'n',phone: '212'},

　　{name: '123',age: '12',sex: 'n',phone: '212'},

　　{name: '123',age: '12',sex: 'n',phone: '212'},

　　]

　　console.table(arry);

　　輸出結果為：

console.table()方法可以將傳入的對象或數(shù)組這些復合數(shù)據以表格形式輸出,變于在工作比較所對應的的Key值。

　?。?console.group(),console.groupEnd(）

　　console.group("第一組信息");

　　console.log("第一組第一條：我的博客");

　　console.log("第一組第二條：CSDN");console.groupEnd();

　　console.group("第二組信息");

　　console.log("第二組第一條：程序愛好者QQ群");

　　console.log("第二組第二條：歡迎你加入");console.groupEnd();

　　輸出結果為：

在使用console.log()中，我們知道，其職能是輸出變量及字符串，然而并沒有層級關系，

　　在一些特定的場景中，我們需要明確層級關系，這時console.gruop()和console.gruopEnd()作用就顯現(xiàn)出來了。值得注意是：console.gruop()和console.gruopEnd()要盡量同時使用，否則層級關系會很混亂！?。?/span>

　?。?console.time(),console.timeEnd()

　　console.time();let a=[];for(let i=0;i<10000;i++){

　　a..push(i);};console.timeEnd();// 輸出結果為：default: 1.18115234375ms

　　在某些特定的場景中或在做一些性能優(yōu)化時，我們需要知道某一個方法或邏輯需要跑多長時間，符不符合當時所有限定的條件時，console.time(),console.timeEnd()可以幫我們實現(xiàn)。

　?。?console.dir()

　　var init = {

　　name: 'bob',

　　age: '12',

　　firsrcard: '101',

　　getSchool: function(res) {

　　return res = 'MJXX';

　　}

　　}

　　console.dir(init);

　　輸出結果為：

　console.dir()是以樹狀結構的形式展現(xiàn)出一個對象的所有屬性和方法。

　　． console.dirxml()

　　var info=document.getElementById('age');

　　info.innerHTML+='

追加的內容

';console.dirxml(info);

　　輸出結果：

　console.dirxml()輸出的是某個節(jié)點的所包含的html，xml代碼。

　?。?console.assert()

　　let isboolea=false;

　　console.assert(isboolea);

console.assert()是用來判斷一個表達式變量是否為真，只有表達式為false時，才輸出一條相應信息，并且拋出異常，如果為true是控制臺直接報錯。

　?。?console.profile()和console.profileEnd()

　　function All(){

　　// alert(11);

　　for(var i = 0; i < 10; i++){

　　funcA(100);

　　}

　　funcB(1000);

　　}function funcA(count){

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

　　}function funcB(count){

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

　　}console.profile("性能分析器");

　　All();console.profileEnd();//輸出結果為：

　　Profile '性能分析器' started.

　　undefined

　　Profile '性能分析器' finished.

　　console.profile()和console.profileEnd()是分析程序各部分所運行的時間，找出瓶頸所在，但說實話，我也是在整理的時候看到，沒有用過此用法。不太了解，如有使用過的請留言告知！

　?。?console.count()

　　function Cunts(){

　　console.count("被調用的次數(shù)");};Cunts();Cunts();Cunts();

　　//輸出結果為：

　　被調用的次數(shù): 1

　　被調用的次數(shù): 2

　　被調用的次數(shù): 3

　　console.count()是統(tǒng)計代碼所執(zhí)行的次數(shù)。

 

 

 來源：網絡