日间学习 JavaScript API：控制台 API

JavaScript 有大量内置 API，使编程变得有趣。但说实话，您真正充分发挥了其中的多少潜力？在接下来的 30 天，我们将深入研究这些 API，介绍它们是什么以及您可能错过的很酷的东西。从基础知识到更高级的东西，您将一路学到新的技巧。

对 JavaScript API 感到不知所措吗？或者也许您只是来这里学习新东西？无论哪种方式，这个系列都适合您。

今天，我们从一个一直默默帮助您调试的 API 开始：控制台 API。当然，您以前使用过 console.log()，但它还有更多的功能。让我们来揭开它的一些隐藏技巧吧！

什么是控制台 API？

控制台 API 是超级有用的方法的集合，可以使调试、记录和可视化数据变得更加容易。

但是让我们面对现实吧——你可能一直坚持使用 console.log() 来处理所有事情。是时候改掉这个习惯了，因为这个 API 的功能还有很多。

这里有一些你错过的很酷的东西：

使用控制台 API 可以做的很酷的事情

1. 在表格中显示数据

是否曾经感觉您的日志只是一堆无法理解的文本？ console.table() 为您提供支持。

这是您的日志现在可能的样子：

const fruits = [
  { name: "Apple", color: "Red" },
  { name: "Banana", color: "Yellow" },
  { name: "Grapes", color: "Green" },
];
console.log(fruits);

结果：

现在让我们清理一下：

console.table(fruits);

结果：

好多了，对吧？它更容易阅读，现在您的数据实际上一目了然。

2. 停止使用 console.assert() 编写冗余的 If 语句

如果您编写了十几个 if 语句只是为了记录错误，请举手。好吧，别再这样做了！ console.assert() 是为了拯救这一天。

而不是这个：

const isLoggedIn = false;

if (!isLoggedIn) {
  console.log("User is not logged in");
}

试试这个：

const isLoggedIn = false;

console.assert(isLoggedIn, "User is not logged in");

如果条件为假，消息将被记录。就这么简单吧？

3. 衡量代码性能

想知道一段代码需要多长时间才能执行？向 console.time() 和 console.timeEnd() 打个招呼。

以下是衡量性能的方法：

console.time("Loop Timer");
for (let i = 0; i < 1_000_000; i++) {}
console.timeEnd("Loop Timer");

结果：

现在您可以找出是什么拖慢了您的应用程序！

4. 计算一个区块运行了多少次

有没有想过一段代码的执行频率是多少？手动跟踪可能很棘手，尤其是当您的代码变得越来越复杂时。这就是 console.count() 派上用场的地方。

想象一下这个场景：

const fruits = [
  { name: "Apple", color: "Red" },
  { name: "Banana", color: "Yellow" },
  { name: "Grapes", color: "Green" },
];
console.log(fruits);

乍一看，可能很容易算出以“A”开头的名字的问候语运行了多少次。但随着你的逻辑扩展，你可能会迷失方向。

现在让我们用 console.count() 来简化事情：

console.table(fruits);

这是发生的事情：

• 每次问候以“A”开头的名字时，console.count() 都会增加计数并将其标记为“问候以 A 开头的用户”。
• 使用console.countReset()重置后，计数重新开始。

不再需要在代码中猜测或添加打印语句。只需一行，即可完成！

5. 使用 CSS 设置日志样式

有时，您需要弹出日志。使用 %c 通过 CSS 设置日志样式并使其脱颖而出。

示例：

const isLoggedIn = false;

if (!isLoggedIn) {
  console.log("User is not logged in");
}

结果：

突出显示错误、警告，或者只是享受日志带来的乐趣。

6. 将相关日志分组在一起

厌倦了滚动浏览无尽的日志？使用 console.group() 将相关日志分组在一起。

这是一个例子：

const isLoggedIn = false;

console.assert(isLoggedIn, "User is not logged in");

输出：

console.time("Loop Timer");
for (let i = 0; i < 1_000_000; i++) {}
console.timeEnd("Loop Timer");

您还可以使用 console.groupCollapsed() 让组默认处于折叠状态。

总结

控制台 API 比您想象的要强大得多。从表格到性能测量、计数器、样式和分组，几乎所有调试场景都有一个工具。

这只是我们JavaScript API 30 天系列的第一天。如果您发现这对您有帮助，请为本文添加书签以供日后使用，并且一定要坚持下去——还有很多东西需要学习！

嘿，如果您有任何疑问，请随时在 Twitter 上给我发消息：@sprucekhalifa。不要忘记关注我以获取更多见解和更新。快乐编码！

以上是日间学习 JavaScript API：控制台 API的详细内容。更多信息请关注PHP中文网其他相关文章！