Javascript console.log的一些技巧

发布时间：2023-05-22

一、语法及基础用法

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 开发中最常用的调试和分析方法之一，它可以打印各种类型的参数信息，帮助我们调试程序、分析性能。除此之外，它还支持格式化输出、高级用法等等，是一个非常实用的工具。

推荐文章