console.奇思妙用
添加CSS样式
我一直很好奇vue的dev-tools在控制台的带样式信息是怎么显示的，后来知道可以用%c占位符，恍然大悟。
然后我就尝试自己写了一下，上效果图。
console.log 样式
再上代码（其实就是先写好样式，再传进去）
// 添加CSS样式
console.log('%c vue-devtools %c Detected Vue v2.6.11 ',
`
width: 100px;
height: 18px;
line-height: 18px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
color: white;
background-color: rgb(53,73,94);
`,
`
width: 150px;
height: 18px;
line-height: 18px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: white;
background-color: rgb(65,184,131);
`)
%c 后面应用样式，我写的空格就是懒得写padding了
计时
之前看到一个大佬测试不同方法的数组去重，用的是new Date().getTime()来计算时间间隔。后来我看到
console.time()才发现有这么好用的东西。
// 计算Set方法数组去重的效率
const arr = [1,2,3,4,5,4,3,2,1];
// 开始计时
console.time();
// 数组去重
const newArr = [...new Set(arr)];
console.log(arr,newArr);
// 结束计时
console.timeEnd();
console.time()开始计时，console.timeLog()打印即刻的计时秒数，console.timeEnd()结束并打印计时。
可以传参数代表计时器的名称，若不传默认名称为default。
计时效果
以上两个是我认为很有趣的两个console方法，console还有其他一些很好用的方法，warn、error、table等等，我就不赘述了。想了解更多可以查看文档 - Console - MDN 文档
发表评论 (审核通过后显示评论)：