Javascript console.log的一些技巧

一、語法及基礎用法

console.log() 是開發中最常用的調試方法之一，它可以列印在終端或瀏覽器控制台中顯示的參數信息。參數可以是任何類型的數據，包括字元串、數字、對象、數組等。

語法如下：

console.log(obj1 [, obj2, ..., objN]);

console.log() 可以接受任意數量的參數，每個參數可以是任何類型的數據，例如：

console.log('Hello World');  // 字元串
console.log(3.14);  // 數字
console.log(true);  // 布爾值
console.log(null);  // 空值
console.log(undefined);  // 未定義值
console.log(['apple', 'banana', 'orange']);  // 數組
console.log({name: 'Tom', age: 18});  // 對象

二、console.log() 用於調試

在開發過程中，我們經常需要查看程序運行時的狀態、調試程序，這時候就可以使用 console.log() 方法。

console.log() 可以列印程序的運行狀態，排除一些錯誤信息，例如：

function add(a, b) {
  console.log('a: ', a);
  console.log('b: ', b);
  return a + b;
}

console.log(add(1, 2));  // 列印 a: 1, b: 2, 返回 3

通過這種方法，我們可以輕鬆地定位到程序中的錯誤和問題。

三、console.log() 用於性能分析

console.log() 不僅可以用來調試程序，還可以用來對程序的性能進行分析。

使用 console.time() 和 console.timeEnd() 可以方便地計算代碼片段的執行時間，例如：

console.time('test');
for(let i = 0; i < 1000000; i++) {
  console.log(i);
}
console.timeEnd('test');  // 執行時間

執行這段代碼可以輕鬆地得到程序執行的時間，方便我們對程序進行優化和改進，提高程序的性能。

四、console.log() 的格式化輸出

console.log() 還支持 %s、%d、%f、%o、%c 等格式化輸出方法。

例如，使用 %s 輸出字元串，%d 輸出數字，%f 輸出浮點數，%o 輸出對象，%c 輸出帶樣式的信息：

console.log('Hello, %s', 'World');  // 輸出 "Hello, World"
console.log('Count: %d', 3);  // 輸出 "Count: 3"
console.log('Price: %f', 3.14);  // 輸出 "Price: 3.14"
console.log('Object: %o', {name: 'Tom', age: 18});  // 輸出 {name: 'Tom', age: 18}
console.log('%c This text is styled!', 'color: blue;font-size: 20px;');  // 輸出一個藍色、20px大小的文字

五、console.log() 高級用法

console.log() 還可以通過傳入函數的方式進行高級用法。

我們可以使用 console.log() 列印一些複雜的數據結構，例如：

const tree = {
  value: 1,
  left: {
    value: 2,
    left: null,
    right: null
  },
  right: {
    value: 3,
    left: {
      value: 4,
      left: null,
      right: null
    },
    right: {
      value: 5,
      left: null,
      right: null
    }
  }
};

console.log(JSON.stringify(tree, null, 2));

這裡使用了 JSON.stringify() 將 JavaScript 對象轉換成字元串，然後使用 console.log() 列印出來。

另外，我們還可以使用 console.dir() 列印一個對象的詳細信息，例如：

console.dir(document.body);

這將輸出 document.body 的各個屬性和方法。

總結

console.log() 是 JavaScript 開發中最常用的調試和分析方法之一，它可以列印各種類型的參數信息，幫助我們調試程序、分析性能。除此之外，它還支持格式化輸出、高級用法等等，是一個非常實用的工具。