关于javascript:10个很少使用的JavaScript-Console-方法

大家好，我是大冶，一个酷爱前端开发和分享的工程师。我有一个专一于前端技术的公众号【大迁世界】，心愿能与更多同行或者感兴趣的敌人们一起提高。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

你肯定据说过 console.log()，而且可能始终在应用它。它十分风行，在集成开发环境中键入时，Visual Studio Intellicode 等工具通常会在其余控制台办法之前举荐应用它。

在本文中，咱们将探讨一些最有用的控制台办法，以及它们在数据可视化、调试等方面的用处。

当你须要在代码中以表格模式（如对象数组）显示一组对象时，console.table() 办法就会派上用场。以汽车列表为例：

const cars = [
  {
    color: 'red',
    age: 4,
    maxSpeed: 120,
  },
  {
    color: 'blue',
    age: 2,
    maxSpeed: 100,
  },
  {
    color: 'yellow',
    age: 3,
    maxSpeed: 160,
  },
];

如何在控制台中查看它们？console.log() 是一种典型的办法：

console.log(cars);

在 Chrome 浏览器开发者控制台中，咱们能够查看咱们记录的对象的各种属性，档次不限。

咱们能够在 Node.js 终端中查看属性，还能够取得色调：

这是一种能够承受的办法，但 console.table() 办法提供了一种更优雅的代替办法：

console.table(cars);

console.table() 在 Chrome 浏览器控制台中:

console.table() in Node.js Node.js 中的

顾名思义，它以易于了解的表格模式出现数据，就像电子表格一样。它也实用于数组阵列。

const arr = [[1, 3, 5],
  [2, 4, 6],
  [10, 20, 30],
];
console.table(arr);

console.assert() 非常适合调试目标，它接管断言，并在断言为 false 时向控制台写入错误信息。但如果是 true，则不会产生任何事件:

const num = 13;
console.assert(num > 10, 'Number must be greater than 10');
console.assert(num > 20, 'Number must be greater than 20');

第一个断言通过是因为 num 大于 10，所以控制台只显示第二个断言：

console.trace() 能够帮忙您在调用它的地位输入以后堆栈跟踪。例如

function a() {b();
}

function b() {c();
}

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

a();

error() 可能是第二种最罕用的 Console 办法。在 Chrome 浏览器控制台中，它会以独特的红色显示错误信息。

console.error('This is an error message.');
console.log('This is a log message.');

不过，在 Node.js 中不会有这种色彩拆散：

不过，信息在外部被写入不同的地位。console.error() 写入 stderr 流，而 console.log() 写入 stdout 流。你能够应用 process.stderr 和 process.stdout 拜访这些流。这对于将错误信息和信息重定向到不同的文件十分有用，就像咱们在上面的代码示例中所做的那样。

const fs = require('fs');

const errorFs = fs.createWriteStream('./error-log.txt');
process.stderr.write = errorFs.write.bind(errorFs);

const infoFs = fs.createWriteStream('./info-log.txt');
process.stdout.write = infoFs.write.bind(infoFs);

console.error('This is an error message.');
console.log('This is a log message.');

运行此代码时，传递给 error() 和 log() 的信息将输入到相应的文件，而不是控制台。

console.warn() 在 Chrome 浏览器控制台中输入黄色信息，示意正告。

console.warn('This is a warning message');

在 Node.js 中，信息会像 console.error() 一样写入 stderr 流。

console.count() 记录以后调用 count() 的执行次数。这是另一个有用的调试工具。

function shout(message) {console.count();
  return message.toUpperCase() + '!!!';}

shout('hey');
shout('hi');
shout('hello');

因为咱们没有指定标签，因而显示的标签是 default。咱们能够通过为 count() 传递一个字符串参数来做到这一点

function shout(message) {console.count(message);
  return message.toUpperCase() + '!!!';}

shout('hey');
shout('hi');
shout('hello');
shout('hi');
shout('hi');
shout('hello');

当初，每条信息都有不同的计数。countReset() 办法将标签的计数设回零。

function shout(message) {console.count(message);
  return message.toUpperCase() + '!!!';}

shout('hi');
shout('hello');
shout('hi');
shout('hi');
shout('hello');
console.countReset('hi');
shout('hi');

咱们能够同时应用这些办法来测量程序中某一特定操作所需的工夫。

const arr = [...Array(10)];

const doubles1 = [];
console.time('for of');
let i = 0;
for (; i < 1000; i++) {for (const item of arr);
}
console.timeLog('for of');
for (; i < 1000000; i++) {for (const item of arr);
}
console.timeEnd('for of');

console.time('forEach');
i = 0;
for (; i < 1000; i++) {arr.forEach(() => {});
}
console.timeLog('forEach');
for (; i < 1000000; i++) {arr.forEach(() => {});
}
console.timeEnd('forEach');

在此，咱们将对 for of 和 forEach 循环进行性能比拟。time() 启动定时器，执行向其传递的标签所指定的操作。timeLog() 在不进行计时器的状况下记录以后持续时间，咱们用它来显示迭代一千次后的工夫。timeEnd() 记录以后持续时间并进行计时器。咱们在一百万次迭代后调用它。

看起来 forEach() 比 for of 快。

console.clear() 通过革除日志来革除控制台中的芜杂信息。

console.log('A log message.');
console.clear();

console.group() 为其后的控制台信息增加一级缩进。console.groupEnd() 会将缩进水平重置为调用后面的 console.group() 之前的缩进水平。

console.log('This is the outer level');
console.group();
console.log('Level 2');
console.group();
console.log('Level 3');
console.warn('More of level 3');
console.groupEnd();
console.log('Back to level 2');
console.groupEnd();
console.log('Back to the outer level');

console.groupCollapsed() 创立了一个相似 console.group() 的组，但该组是折叠的，直到用户应用旁边的 “ 披露 “ 按钮将其开展。

console.log('This is the outer level');
console.group();
console.log('Level 2');
console.groupCollapsed();
console.log('Level 3');
console.warn('More of level 3');
console.groupEnd();
console.log('Back to level 2');
console.groupEnd();
console.log('Back to the outer level');

console.log() 将 HTMLElement 记录为 HTML，咱们能够在控制台中浏览：

然而，console.dir() 会将其记录为一个对象，并显示一个交互式属性列表：

正如你在本文中所看到的，除了 console.log() 之外，还有许多控制台办法。其中一些只是在控制台 UI 中用色彩和更好的可视化来装点，而另一些则能够作为调试和性能测试的弱小工具。

搜寻公众号：[大迁世界]，一起学习，一起提高！ 📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑难？我来答复

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

关于javascript:10个很少使用的JavaScript-Console-方法

1. table()

2. assert()

3. trace()

4. error()

5. warn()

6. count() 和 countReset()

7. time(), timeEnd(), and timeLog()

8. clear()

9. group(), groupCollapsed(), and groupEnd()

10. dir()

总结

交换