JavaScript 控制台日志

介绍

在开发中，经常需要查看程序运行时的日志信息，以便快速调试代码。而 JavaScript 控制台日志就是开发者们进行日志输出的便捷工具之一。

使用方法

在 JavaScript 中，可以使用 console 对象的各种方法进行控制台日志输出。以下是常用的几种方法。

• console.log()：输出普通信息，可传入多个参数。
• console.info()：输出普通信息，通常用于信息提示。
• console.warn()：输出警告信息。
• console.error()：输出错误信息。

这些方法都可以接受多个参数，并且可以输出变量值、对象等信息。例如：

const name = 'John';
const age = 20;
console.log('Hello,', name, 'you are', age, 'years old.'); // 输出：Hello, John you are 20 years old.

格式化输出

除了上面介绍的简单输出方式，console 对象还支持格式化输出，使用占位符 %s、%d、%f、%o 等来代表不同类型的数据。例如：

const person = {
  name: 'John',
  age: 20,
  gender: 'male'
};
console.log('%s is a %d-year-old %s.', person.name, person.age, person.gender); // 输出：John is a 20-year-old male.
console.info('The person is', person); // 输出：The person is Object { name: "John", age: 20, gender: "male" }.

进阶技巧

分组输出

使用 console.group() 和 console.groupEnd() 可以将相关信息分组输出，便于查看。例如：

const fruits = ['apple', 'banana', 'orange'];
console.group('Fruits');
fruits.forEach(fruit => {
  console.log(fruit);
});
console.groupEnd('Fruits');

输出：

Fruits
  apple
  banana
  orange

计时输出

使用 console.time() 和 console.timeEnd() 可以计算代码执行时间，方便查找性能问题。例如：

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
console.time('sleep');
await sleep(1000);
console.timeEnd('sleep'); // 输出：sleep: 1001.345ms

条件输出

使用 console.assert() 可以在特定条件下输出信息，便于调试代码。例如：

const sum = (a, b) => a + b;
console.assert(sum(1, 2) === 3, '1 + 2 = 3'); // 无输出
console.assert(sum(1, 2) === 4, '1 + 2 = 4'); // 输出：Assertion failed: 1 + 2 = 4

总结

JavaScript 控制台日志是前端开发中必不可少的工具，掌握它的使用方法和进阶技巧，可以帮助开发者快速定位问题和优化代码。