国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

你所不知道 ? Console

scq000 / 3153人閱讀

前言

console.log 可以是在日常 Web 開發中最常用的方法了，但是你應該知道 console 比你想象的強。

1.凡人視角 打印字符串

代碼：

console.log("I am a 凡人");
打印提示消息

代碼：

console.info("Yes, you are a 凡人");
打印警告消息

代碼：

console.warn("凡人你居然敢窺視我");
打印錯誤消息

代碼：

console.error("天兵天將，把這個凡人給我打入地獄");
打印調試信息 
console.debug("我就是傳說中的debug");

2.上帝視角 查看所有方法

console 除了上面的幾個方法還有什么方法呢？log 除了能打印字符串外，還能打印出對象，我們可以利用 console.log 打印自己。

代碼：

console.log(console);

輸出：

Object {
    assert: ...,
    clear: ...,
    count: ...,
    debug: ...,
    dir: ...,
    dirxml: ...,
    error: ...,
    group: ...,
    groupCollapsed: ...,
    groupEnd: ...,
    info: ...,
    log: ...,
    markTimeline: ...,
    profile: ...,
    profileEnd: ...,
    table: ...,
    time: ...,
    timeEnd: ...,
    timeStamp: ...,
    timeline: ...,
    timelineEnd: ...,
    trace: ...,
    warn: ...
}

啊咧咧？怎么這么多方法。其實上面的 console 方法 不一定每個瀏覽器 都有實現，我這邊使用的是 chrome瀏覽器 。所以說，這個特性是非標準的，請盡量不要在 生產環境 中使用它。

但是我們可以在 開發環境 中，合理的利用 這些方法來幫助我們開發。

清理控制臺

如果我們在控制臺調試的時候，難免 強迫癥 發作想清理掉已經亂七八糟的控制臺。瀏覽器和命令行 clear 一樣提供了一個清理函數 console.clear() 。

console.clear()

當然我們也可以用 chrome 的 command line api 來清理控制臺。

clear()

又或者可以使用按鍵Mac上 cmd + k ，Win ctrl + l（我用的是chrome瀏覽器）。

分組

當代碼非常長，或者我們需要把一個函數，或者一個文件中的函數等區分出來。我們可以使用分組來實現。

代碼：

console.group("凡人");
console.log("手");
console.log("腳");
console.groupEnd();

console.group("神");
console.log("法力無邊");
console.log("騰云架霧");
console.groupEnd();

輸出：

如果想要輸出為折疊，我們可以使用 console.groupCollapsed ，用法和 console.group 類似。

查看對象信息

有時候我們需要打印出對象信息,可以使用 console.log 來進行簡單的輸出。

代碼：

var person = {
    head: 1,
    hand: 2,
    leg: 2
};
console.log(person);

嗚嗚，可是這個顯示得好丑，我們這個時候就可以使用傳說中的神器 console.table 來幫助我們清楚的顯示 關聯數組信息。

var data = [
    {
        "姓名": "幼兒園", 
        "性別": "女"
    },
    {
        "姓名": "李狗嗨",
        "數量": 1
    }
];
console.table(data);

輸出：

但是如果想要看詳細的對象信息，我們可以使用 console.dir，將一個 JavaScript 對象的所有屬性和屬性值顯示成一個可交互的列表，它還能打印出函數等。

console.dir(clear);

什么？你想看某個節點中的html代碼？沒事，我們可以用 console.dirxml 來查看頁面中對應元素的 html/xml 內容。

html代碼：


    
I am a 凡人

javascirpt代碼：

var person = document.getElementById("person");
console.dirxml(person)；
性能測試

雷軍粑粑老是喜歡說：“不服？跑個分。”有時候，我們也需要對代碼跑個分。這個時候，我們可以使用console.time和console.timeEnd，他們可以記錄代碼運行所花費的時間。

console.time("神機妙算");
(function () {
    for(var i = 0; i < 10; i++) {
        var sum = (function () {
            var flog = 0;
            for(var i = 0; i < 10; i++) {
                flog+=i;
            }
        })();
    }
})();
console.timeEnd("神機妙算");

啊咧咧？你這個頂多就是 計時器 怎么能說是 性能測試 。客官別急，我們這還有一個叫做 console.profile 和 console.profileEnd 姐妹呢~~

console.profile("神機妙算");
(function () {
    for(var i = 0; i < 10; i++) {
        var sum = (function () {
            var flog = 0;
            for(var i = 0; i < 10; i++) {
                flog+=i;
            }
        })();
    }
})();
console.profileEnd("神機妙算");

輸出會顯示在 profile

什么還是不夠？你還想知道運行時的結果棧？可以可以，我們這還有一位 console.trace 哦。他可以看透大爺你的一局一動哦。
代碼：

function add(num) {
    if (0 < num) {
        console.trace("現在num的值為", num);
        return num + add(num - 1);
    } else {
        return 0;
    }
}

var a =3;
add(3);

輸出：

判斷真假

平時我們在寫代碼是時候，經常需要判斷一下當前值的真假情況，使用if或者三元表達式來達到目的。我們現在也可以使用 console.assert 來判斷，該方法會在條件為錯誤時，返回一個 console.error 的輸出。

console.assert(1 == 1);
console.assert(1 == 0);
console.assert(!(1 == 0));
統計次數

有時候我們需要統計一個函數或者被調用了幾次，我們通常會增加一個變量 count 來記錄，然后在控制臺中查看。這樣相當的麻煩，我們可以使用 console.count 函數來幫忙我們記錄次數，并輸出。

function hi(name) {
    console.count(name);
    return "hi " + name;
}

for(var i = 0; i < 10; i++) {
    if(i < 4) {
        hi("person");
    } else {
        hi("god");
    }
}
總結

console 中有很多對我們調試代碼有幫助的函數，我們可以在開發環境中配合 console 來調試代碼，使得我們測試更加便利。

一起成長 
在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長。

如果您想讓更多人看到文章可以點個 點贊。

如果您想激勵小二可以到 Github 給個 小星星。

如果您想與小二更多交流添加微信 m353839115。

本文原稿來自 PushMeTop

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80327.html

相關文章

  • 前端面試你所不知道系列

    摘要：請注意是創建一個全局對象的屬性，而不是聲明了一個全局變量。由于變量聲明自帶不可刪除屬性，比較跟，前者是變量聲明，帶不可刪除屬性，因此無法被刪除后者為全局變量的一個屬性，因此可以從全局變量中刪除。下期預告前端面試你所不知道系列偽類和偽元素 寫在開始 又到了一年的伊始，很多人可能因為各種原因想換一份工作，而找工作難免遇到各種各樣頭痛的面試題，于是我打算寫一個系列，關于面試中最常見或者前端一...

    Julylovin 評論0 收藏0

  • 你所不知道 ? Console

    前言 console.log 可以是在日常 Web 開發中最常用的方法了，但是你應該知道 console 比你想象的強。 1.凡人視角 打印字符串 代碼： console.log(I am a 凡人); 打印提示消息 代碼： console.info(Yes, you are a 凡人); 打印警告消息 代碼： console.warn(凡人你居然敢窺視我); 打印錯誤消息 代碼： console...

    lovXin 評論0 收藏0

  • 關于JavaScript對象，你所不知道的事（一）- 先談對象

    摘要：對象與屬性讓我們保持耐心，再梳理一下對象與屬性的關系對象是屬性的集合，當對象的屬性是函數時，我們將其稱之為方法。 這篇博文的主要目的是為了填坑，很久之前我發表了一篇名為關于JavaScript對象中的一切（一） — 對象屬性的文章，想要談一談JavaScript對象，可那時只是貼了一張關于這個主題的思維導圖，今天我會針對這一主題進行展開，將JavaScript對象一些平常不太常用的知識...

    mykurisu 評論0 收藏0

  • 一些你所不知道的VS Code插件

    摘要：摘要你所不知道的系列。允許你寫入縮寫代碼并返回的相應標記，目前已經內置，所以不用配置了。自從年雙十一正式上線，累計處理了億錯誤事件，付費客戶有金山軟件百姓網等眾多品牌企業。摘要： 你所不知道的系列。 原文：提高 JavaScript 開發效率的高級 VSCode 擴展之二！ 作者：前端小智 Fundebug經授權轉載，版權歸原作者所有。 作為一名業余愛好者、專業人員，甚至是每月只有一次編...

    Near_Li 評論0 收藏0

  • 關于JavaScript對象，你所不知道的事（二）- 再說屬性

    摘要：但好在還給我們提供了一個方法，每一個對象都有這樣一個方法，專門用來判斷某個屬性是否是該對象的私有屬性。如果你想要用對象字面形式，你只能在創建對象時定義訪問器屬性。在中，我們使用凍結一個對象，并且使用來判斷一個對象是否被凍結。 說完了對象那些不常用的冷知識，是時候來看看JavaScript中對象屬性有哪些有意思的東西了。 不出你所料，對象屬性自然也有其相應的特征屬性，但是這個話題有點復雜...

    Richard_Gao 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<