JS `console` API 高阶：`console.table`, `console.group`, `console.time` 等

各位观众老爷们，早上好/下午好/晚上好！ 今天咱们来聊聊 JavaScript 里那个被你们经常忽略，但其实贼好使的 console API。 别看它叫 console，就以为只能 console.log 一下，打印个 "Hello World"。 实际上，它藏着不少宝贝，能让你的调试效率飞起。

咱们今天就来扒一扒 console 的高阶用法，保证听完之后，以后调试代码的时候，能像开了挂一样。

1. console.table()：让数据一目了然

咱们先从 console.table() 开始。 想象一下，你有一个包含很多对象的数组，每个对象都有很多属性。 如果你用 console.log() 打印出来，那简直就是一场灾难，密密麻麻，眼睛都要瞎了。

这时候，console.table() 就派上用场了。 它可以把你的数据以表格的形式展示出来，瞬间清晰明了。

const users = [
  { id: 1, name: '张三', age: 25, city: '北京' },
  { id: 2, name: '李四', age: 30, city: '上海' },
  { id: 3, name: '王五', age: 28, city: '广州' }
];

console.table(users);

这段代码运行后，控制台会输出一个漂亮的表格，列名就是对象的属性名，每一行就是一个对象的数据。 是不是很方便？

你还可以指定要显示的列。 比如，你只想看用户的姓名和年龄，可以这样：

console.table(users, ['name', 'age']);

这样，表格就只会显示 name 和 age 两列。

2. console.group() 和 console.groupEnd()：让日志更有条理

当你的代码逻辑比较复杂，打印的日志很多的时候，控制台会变得非常混乱。 这时候，console.group() 和 console.groupEnd() 就可以帮你把相关的日志组织在一起，形成一个分组。

function doSomething() {
  console.group('doSomething 开始');
  console.log('第一步：初始化');
  console.log('第二步：处理数据');
  console.log('第三步：完成');
  console.groupEnd();
}

doSomething();

这段代码运行后，控制台会输出一个可折叠的分组，标题是 "doSomething 开始"。 点击标题，就可以展开或折叠分组，查看里面的日志。

你还可以使用 console.groupCollapsed() 来创建默认折叠的分组。 这样，一开始分组就是折叠的，只有当你需要查看的时候，才会展开。

function doSomethingElse() {
  console.groupCollapsed('doSomethingElse 开始');
  console.log('第一步：获取数据');
  console.log('第二步：验证数据');
  console.log('第三步：保存数据');
  console.groupEnd();
}

doSomethingElse();

3. console.time() 和 console.timeEnd()：测量代码执行时间

有时候，你想知道一段代码执行了多长时间，就可以使用 console.time() 和 console.timeEnd()。 它们可以帮你测量代码的执行时间，精确到毫秒。

console.time('循环计时');
for (let i = 0; i < 100000; i++) {
  // 一些操作
}
console.timeEnd('循环计时');

这段代码会测量 for 循环的执行时间，并在控制台输出结果。

4. console.count()：统计代码执行次数

console.count() 可以统计代码被执行的次数。 它可以接受一个可选的标签作为参数，用于区分不同的计数器。

function myFunction() {
  console.count('myFunction 被调用');
}

myFunction(); // myFunction 被调用: 1
myFunction(); // myFunction 被调用: 2
myFunction(); // myFunction 被调用: 3

5. console.assert()：断言测试

console.assert() 接受一个表达式作为参数，如果表达式的值为 false，则会在控制台输出一条错误信息。

const x = 5;
const y = 10;

console.assert(x > y, 'x 应该大于 y'); // Assertion failed: x 应该大于 y

6. console.warn() 和 console.error()：突出显示问题

console.warn() 和 console.error() 可以分别输出警告信息和错误信息。 它们与 console.log() 的区别在于，它们输出的信息在控制台中会以不同的颜色显示，更容易引起你的注意。

console.warn('这是一个警告信息');
console.error('这是一个错误信息');

7. console.dir()：查看对象的详细信息

console.dir() 可以用来查看对象的详细信息，包括对象的属性和方法。 它与 console.log() 的区别在于，console.dir() 会以树形结构展示对象的信息，更易于阅读。

const myObject = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

console.dir(myObject);

8. console.trace()：追踪函数调用栈

console.trace() 可以用来追踪函数的调用栈。 它可以帮助你了解代码的执行流程，找到问题的根源。

function firstFunction() {
  secondFunction();
}

function secondFunction() {
  thirdFunction();
}

function thirdFunction() {
  console.trace();
}

firstFunction();

这段代码会输出一个调用栈，显示 thirdFunction 是被 secondFunction 调用的，而 secondFunction 又是被 firstFunction 调用的。

总结

方法	描述	示例
console.log()	输出普通信息。	console.log("Hello, world!");
console.table()	以表格形式显示数组或对象。	console.table([{name: 'Alice', age: 30}, {name: 'Bob', age: 25}]);
console.group()	创建一个分组，用于组织相关的日志信息。	console.group("My Group"); console.log("Inside group"); console.groupEnd();
console.groupCollapsed()	创建一个默认折叠的分组。	console.groupCollapsed("Hidden Group"); console.log("Hidden message"); console.groupEnd();
console.time()	启动一个计时器，用于测量代码的执行时间。	console.time("My Timer"); // Code to measure console.timeEnd("My Timer");
console.timeEnd()	停止计时器，并输出执行时间。	console.time("My Timer"); // Code to measure console.timeEnd("My Timer");
console.count()	统计代码被执行的次数。	console.count("My Counter");
console.assert()	断言测试，如果表达式为 false，则输出错误信息。	console.assert(1 === 2, "This is an error!");
console.warn()	输出警告信息。	console.warn("This is a warning!");
console.error()	输出错误信息。	console.error("This is an error!");
console.dir()	显示对象的详细信息。	console.dir({name: 'Charlie', age: 40});
console.trace()	追踪函数调用栈。	function a() { b(); } function b() { console.trace(); } a();

怎么样，是不是觉得 console API 比你想象的要强大得多？ 掌握了这些高阶用法，以后调试代码的时候，就能更加高效、更加轻松。

当然，console API 还有一些其他的用法，比如 console.clear() 可以清除控制台的内容，console.profile() 和 console.profileEnd() 可以进行性能分析等等。 有兴趣的同学可以自己去探索一下。

好了，今天的讲座就到这里。 希望大家以后都能善用 console API，写出更棒的代码！ 拜了个拜！