野外激情视频二区,人妻熟女一区在线,久久精品成人欧美大片

JavaScript中console.log的意思、作用及用法介紹

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2025年2月6日 11:40 本文熱度 977

在Web網(wǎng)頁(yè)開(kāi)發(fā)的JavaScript編程領(lǐng)域中，console.log()是一種常見(jiàn)的調(diào)試和輸出信息的方法。許多開(kāi)發(fā)者在編寫(xiě)代碼時(shí)經(jīng)常使用console.log()，但對(duì)于初學(xué)者或非技術(shù)人員來(lái)說(shuō)，可能不清楚console.log()的含義、作用以及如何正確使用。本文將介紹console.log()的意思、作用和用法，幫助讀者更好地理解和使用這個(gè)常見(jiàn)的編程工具。

一、console.log()的意思

在JavaScript編程語(yǔ)言中，console.log()是一個(gè)用于在控制臺(tái)輸出信息的方法。它可以接受一個(gè)或多個(gè)參數(shù)，并將這些參數(shù)的值輸出到開(kāi)發(fā)者工具的控制臺(tái)窗口中。console.log()是一種便捷的方式，用于調(diào)試代碼、輸出變量的值或顯示程序執(zhí)行的狀態(tài)。

二、console.log()的作用

console.log()的主要作用是在開(kāi)發(fā)過(guò)程中提供調(diào)試和信息輸出的功能。下面是console.log()的幾個(gè)常見(jiàn)用途：

調(diào)試代碼：通過(guò)在關(guān)鍵代碼位置插入console.log()語(yǔ)句，可以輸出變量的值或程序執(zhí)行的狀態(tài)，以便于理解代碼的執(zhí)行流程和查找錯(cuò)誤。
輸出變量的值：使用console.log()可以輸出變量的值，這對(duì)于驗(yàn)證變量的內(nèi)容、查看算法的中間結(jié)果或確保數(shù)據(jù)的正確性非常有幫助。
跟蹤程序流程：將console.log()放置在代碼的不同位置，可以追蹤程序的執(zhí)行路徑，了解代碼的執(zhí)行順序以及條件語(yǔ)句的判斷結(jié)果。
性能優(yōu)化：通過(guò)在關(guān)鍵代碼段添加時(shí)間戳信息，可以使用console.log()輸出代碼執(zhí)行的時(shí)間，以便評(píng)估程序的性能和優(yōu)化潛力。

三、console.log()的用法

console.log()的用法非常簡(jiǎn)單，可以根據(jù)需要接受一個(gè)或多個(gè)參數(shù)。下面是一些常見(jiàn)的用法示例：

輸出文本信息：

console.log('Hello, World!'); // 輸出：Hello, World!

輸出變量的值：

let name = 'John';let age = 25;
console.log('Name:', name, 'Age:', age); // 輸出：Name: John Age: 25

輸出對(duì)象：

let person = { name: 'Alice', age: 30 };console.log('Person:', person); // 輸出：Person: { name: 'Alice', age: 30 }

輸出表達(dá)式的結(jié)果：

let x = 10;let y = 5;
console.log('Sum:', x + y); // 輸出：Sum: 15

輸出多個(gè)參數(shù)：

console.log('Value:', 10, 'Status:', 'OK'); // 輸出：Value: 10 Status: OK

console.log()是一種常見(jiàn)的編程工具，用于在控制臺(tái)輸出調(diào)試信息和其他信息。它可以幫助開(kāi)發(fā)者理解代碼的執(zhí)行流程、輸出變量的值、調(diào)試代碼并優(yōu)化程序性能。console.log()的用法非常簡(jiǎn)單，可以根據(jù)需要輸出文本、變量、對(duì)象或表達(dá)式的結(jié)果。通過(guò)充分利用console.log()，開(kāi)發(fā)者可以更好地理解和調(diào)試他們的代碼，提高開(kāi)發(fā)效率和代碼質(zhì)量。

一般情況下，我們用來(lái)輸入信息的方法主要是用到如下四個(gè)：

1、console.log 用于輸出普通信息

2、console.info 用于輸出提示性信息

3、console.error 用于輸出錯(cuò)誤信息

4、console.warn 用于輸出警示信息

--------------------------------------------------------------------

5、console.count 統(tǒng)計(jì)代碼被執(zhí)行的次數(shù)。

6、console.time 計(jì)時(shí)開(kāi)始。console.timeEnd 計(jì)時(shí)結(jié)束。

7、console.assert 對(duì)輸入的表達(dá)式進(jìn)行斷言，只有表達(dá)式為false時(shí)，才輸出相應(yīng)的信息到控制臺(tái)。

詳細(xì)用法示例

console.log()

在console.log 中有很多人們意想不到的功能。雖然大多數(shù)人使用 console.log(object) 來(lái)查看對(duì)象，但是你也可以使用 console.log(object, otherObject, string)，它會(huì)把它們都整齊地記錄下來(lái)，偶爾也會(huì)很方便。

不僅如此，還有另一種格式化的： console.log(msg, values)，這很像 C 或 PHP 中的sprintf。

console.log('I like %s but I do not like %s.', 'Skittles', 'pus');

會(huì)像你預(yù)期的那樣輸出：

> I like Skittles but I do not like pus.

常見(jiàn)的占位符 %o (這是字母o，不是0)，它接受對(duì)象，%s 接受字符串，%d 表示小數(shù)或整數(shù)。

另一個(gè)有趣的是 %c，這可能與你所想不太相同，它實(shí)際上是CSS值的占位符。使用%c占位符時(shí)，對(duì)應(yīng)的后面的參數(shù)必須是CSS語(yǔ)句，用來(lái)對(duì)輸出內(nèi)容進(jìn)行CSS渲染。常見(jiàn)的輸出方式有兩種：文字樣式、圖片輸出。

console.log('I am a %cbutton', 'color: white; background-color: orange; padding: 2px 5px; border-radius: 2px')

它并不優(yōu)雅，也不是特別有用。當(dāng)然，這并不是一個(gè)真正的按鈕。

它有用嗎? 恩恩恩。

console.dir()

在大多數(shù)情況下，console.dir() 的函數(shù)非常類似于 log()，盡管它看起來(lái)略有不同。

下拉小箭頭將顯示與上面相同的對(duì)象詳細(xì)信息，這也可以從console.log 版本中看到。當(dāng)你查看元素的結(jié)構(gòu)時(shí)候，你會(huì)發(fā)現(xiàn)它們之間的差異更大，也更有趣。

let element = document.getElementById('2x-container');

使用 console.log 查看：

打開(kāi)了一些元素，這清楚地顯示了 DOM，我們可以在其中導(dǎo)航。但是console.dir(element)給出了更加方便查看 DOM 結(jié)構(gòu)的輸出：

這是一種更客觀地看待元素的方式。有時(shí)候，這可能是您真正想要的，更像是檢查元素。

console.warn()

可能是最明顯的直接替換 log()，你可以以完全相同的方式使用 console.warn()。唯一真正的區(qū)別是輸出字的顏色是黃色的。具體來(lái)說(shuō)，輸出處于警告級(jí)別而不是信息級(jí)別，因此瀏覽器將稍微區(qū)別對(duì)待它。這具有使其在雜亂輸出中更明顯的效果。

不過(guò)，還有一個(gè)更大的優(yōu)勢(shì)，因?yàn)檩敵鍪蔷娑皇切畔?，所以你可以過(guò)濾掉所有console.log并僅保留console.warn。這對(duì)于偶爾會(huì)在瀏覽器中輸出大量無(wú)用廢話的應(yīng)用程序尤其有用。清除一些無(wú)用的信息可以讓你更輕松地看到你想要的輸出。

console.table()

令人驚訝的是，這并不是更為人所知，但是 console.table() 函數(shù)旨在以一種比僅僅轉(zhuǎn)出原始對(duì)象數(shù)組更整潔的方式顯示表格數(shù)據(jù)。

例如，這里有一個(gè)數(shù)據(jù)列表。

const data = [{
  id: "7cb1-e041b126-f3b8",
  seller: "WAL0412",
  buyer: "WAL3023",
  price: 203450,
  time: 1539688433
},
{
  id: "1d4c-31f8f14b-1571",
  seller: "WAL0452",
  buyer: "WAL3023",
  price: 348299,
  time: 1539688433
},
{
  id: "b12c-b3adf58f-809f",
  seller: "WAL0012",
  buyer: "WAL2025",
  price: 59240,
  time: 1539688433
}];

如果我們使用 console.log 來(lái)輸出上面的內(nèi)容，我們會(huì)得到一些非常無(wú)用的輸出:

? (3) [{…}, {…}, {…}]

點(diǎn)擊這個(gè)小箭頭可以展開(kāi)看到對(duì)象的內(nèi)容，但是，它并不是我們想要的“一目了然”。

但是 console.table(data) 的輸出要有用得多。

第二個(gè)可選參數(shù)是所需列的列表。顯然，所有列都是默認(rèn)值，但我們也可以這樣做:

> console.table(data, ["id", "price"]);

這里要注意的是這是亂序的 - 最右邊的列標(biāo)題上的箭頭顯示了原因。我點(diǎn)擊該列進(jìn)行排序。找到列的最大或最小，或者只是對(duì)數(shù)據(jù)進(jìn)行不同的查看非常方便。順便說(shuō)一句，該功能與僅顯示一些列無(wú)關(guān)，它總是可用的。

console.table() 只能處理最多1000行，因此它可能不適合所有數(shù)據(jù)集。

console.assert()

assert() 與 log() 是相同的函數(shù)，assert()是對(duì)輸入的表達(dá)式進(jìn)行斷言，只有表達(dá)式為false時(shí)，才輸出相應(yīng)的信息到控制臺(tái)，示例如下：

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

有時(shí)我們需要更復(fù)雜的條件句。例如，我們已經(jīng)看到了用戶 WAL0412 的數(shù)據(jù)問(wèn)題，并希望僅顯示來(lái)自這些數(shù)據(jù)的事務(wù)，這是直觀的解決方案。

console.assert(tx.buyer === 'WAL0412', tx);

這看起來(lái)不錯(cuò)，但行不通。記住，條件必須為false，斷言才會(huì)執(zhí)行，更改如下：

console.assert(tx.buyer !== 'WAL0412', tx);

與其中一些類似，console.assert() 并不總是特別有用。但在特定的情況下，它可能是一個(gè)優(yōu)雅的解決方案。

console.count()

另一個(gè)具有特殊用途的計(jì)數(shù)器，count只是作為一個(gè)計(jì)數(shù)器，或者作為一個(gè)命名計(jì)數(shù)器，可以統(tǒng)計(jì)代碼被執(zhí)行的次數(shù)。

for(let i = 0; i < 10000; i++) {
  if(i % 2) {
    console.count('odds');
  }
  if(!(i % 5)) {
    console.count('multiplesOfFive');
  }
  if(isPrime(i)) {
    console.count('prime');
  }
}

這不是有用的代碼，而且有點(diǎn)抽象。這邊也不打算演示 isPrime 函數(shù)，假設(shè)它是成立的。

執(zhí)行后我們會(huì)得到一個(gè)列表：

odds: 1
odds: 2
prime: 1
odds: 3
multiplesOfFive: 1
prime: 2
odds: 4
prime: 3
odds: 5
multiplesOfFive: 2
...

還有一個(gè)相關(guān)的 console.countReset()，可以使用它重置計(jì)數(shù)器。

console.trace()

trace() 在簡(jiǎn)單的數(shù)據(jù)中很難演示。當(dāng)您試圖在類或庫(kù)中找出是哪個(gè)實(shí)際調(diào)用者導(dǎo)致了這個(gè)問(wèn)題時(shí)，它的優(yōu)勢(shì)就顯現(xiàn)出來(lái)了。

例如，可能有 12 個(gè)不同的組件調(diào)用一個(gè)服務(wù)，但是其中一個(gè)組件沒(méi)有正確地設(shè)置依賴項(xiàng)。

export default class CupcakeService {


  constructor(dataLib) {
    this.dataLib = dataLib;
    if(typeof dataLib !== 'object') {
      console.log(dataLib);
      console.trace();
    }
  }
  ...
}

這里使用 console.log() 僅告訴我們傳遞數(shù)據(jù)dataLib是什么，而沒(méi)有具體的傳遞的路徑。不過(guò)，console.trace() 會(huì)非常清楚地告訴我們問(wèn)題出在 Dashboard.js，我們可以看到是 new CupcakeService(false) 導(dǎo)致錯(cuò)誤。

console.time()

console.time() 是一個(gè)用于跟蹤操作時(shí)間的專用函數(shù)，它是跟蹤 JavaScript 執(zhí)行時(shí)間的好方法。

function slowFunction(number) {
  var functionTimerStart = new Date().getTime();
  // something slow or complex with the numbers.
  // Factorials, or whatever.
  var functionTime = new Date().getTime() - functionTimerStart;
  console.log(`Function time: ${ functionTime }`);
}
var start = new Date().getTime();


for (i = 0; i < 100000; ++i) {
  slowFunction(i);
}


var time = new Date().getTime() - start;
console.log(`Execution time: ${ time }`);

這是一種老派的做法，我們使用 console.time() 來(lái)簡(jiǎn)化以上代碼。

const slowFunction = number =>  {
  console.time('slowFunction');
  // something slow or complex with the numbers.
  // Factorials, or whatever.
  console.timeEnd('slowFunction');
}
console.time();

for (i = 0; i < 100000; ++i) {
  slowFunction(i);
}
console.timeEnd();

我們現(xiàn)在不再需要做任何計(jì)算或設(shè)置臨時(shí)變量。

console.group()

// this is the global scope
let number = 1;
console.group('OutsideLoop');
console.log(number);
console.group('Loop');
for (let i = 0; i < 5; i++) {
  number = i + number;
  console.log(number);
}
console.groupEnd();
console.log(number);
console.groupEnd();
console.log('All done now');

輸出如下：

并不是很有用，但是您可以看到其中一些是如何組合的。

class MyClass {
  constructor(dataAccess) {
    console.group('Constructor');
    console.log('Constructor executed');
    console.assert(typeof dataAccess === 'object', 
      'Potentially incorrect dataAccess object');
    this.initializeEvents();
    console.groupEnd();
  }
  initializeEvents() {
    console.group('events');
    console.log('Initialising events');
    console.groupEnd();
  }
}
let myClass = new MyClass(false);