十个很少使用的 JavaScript Console 方法( 二 ) _JavaScript

文章插图
图片
由于我们没有指定标签，因此显示的标签是 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');

文章插图
图片
7. time(), timeEnd(), and timeLog()我们可以同时使用这些方法来测量程序中某一特定操作所需的时间。

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 快。
8. clear()console.clear() 通过清除日志来清除控制台中的杂乱信息。
console.log('A log message.');console.clear();

文章插图
图片
9. group(), groupCollapsed(), and groupEnd()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');