我们知道 console.log(message)用法很简单,表示将参数message 打印到控制台上。
console.log('前端小智')
// 前端小智
const myAge = 28
console.log(myAge) // 28
本文主要介绍5个有用的技巧,可帮助你在使用console.log()时提高工作效率。
如果在控制台打印多个变量,是数量比较多的情况下,我们很难区别哪个变量对应哪个值。
function sum(a, b) {
console.log(b);
return a + b;
}
sum(1, 2);
sum(4, 5);
执行上述代码后,我们只会看到一系列数字
要表示值和变量之间关系,可以用花括号把变量包起来:{b}:
将某些东西打印到控制台最常见方法是简单地使用一个参数调用console.log():
console.log('前端小智') // 前端小智
有时我们可能想要一条包含多个变量的信息。 幸运的是,console.log()可以使用%s,%i等说明符以sprintf()的方式格式化字符串。
const user = '前端小智';
const attempts = 5;
console.log('%s 登录失败了 %i 次', user, attempts);
// 前端小智 登录失败了 5 次
%s和%i被user和attempts的值替换。 说明符%s转换为字符串,而%i转换为数字。
以下是可用说明符的列表:
说明符 | 作用 |
---|---|
%s | 元素转换为字符串 |
%d 或 %i | 元素转换为整数 |
%f | 元素转换为浮点数 |
%o | 元素以最有效的格式显示 |
%O | 元素以最有效的格式显示 |
%c | 应用提供的css |
浏览器控制台允许我们将样式应用于打印的消息,我们可以通过将%c说明符与相应的CSS样式一起使用来实现,如下所示:
console.log('%c Big message', 'font-size: 36px; font-weight: bold');
说明符%c应用CSS样式'font-size: 36px; font-weight: bold'
日志样式化依赖于主机的控制台实现。像Chrome和Firefox这样的浏览器提供对象和数组的交互展示,而 Node 控制台输出为文本。
来看看Chrome如何打印普通对象,数组和dom树,可以通过展开和折叠与这些元素进行交互。
const myObject = {
name: 'John Smith',
profession: 'agent'
};
console.log(myObject);
可以展开和折叠对象属性列表,也可以看到对象的原型。
const characters = ['Neo', 'Morpheus', 'John Smith'];
console.log(characters);
我们可以直接与控制台中显示的DOM元素进行交互。
console.log(document.getElementById('root'));
在Chrome控制台中,可以扩展DOM元素
%o说明符(为值关联了正确的打印格式)可以在文本消息中插入数组,对象,DOM元素和常规文本,而不会失去交互性。
const myObject = {
name: 'John Smith',
profession: 'agent'
};
console.log('Neo, be aware of %o', myObject);
从控制台看,myObject数组不会转换为字符串,而是保持交互性。
在 Node 控制台中打印大对象
Node中的log以纯文本形式输出。 但是,Node 中的console.log()不会显示具有深层嵌套的对象:第3级的对象显示为[Object]。
const myObject = {
propA: {
propB: {
propC: {
propD: 'hello'
}
}
}
};
console.log(myObject);
运行脚本时,propC的对象打印为[Object]:
要查看完整的对象结构,可以使用JSON.stringify():
const myObject = {
propA: {
propB: {
propC: {
propD: 'hello'
}
}
}
};
console.log(JSON.stringify(myObject, null, 2));
JSON.stringify(myObject, null, 2)返回该对象的JSON表示形式,第三个参数2在空格中设置缩进大小。
希望这5个技巧可以使你使用 console.log() 体验更加高效。
原文:https://dmitripavlutin.com/
jQuery简洁通用的方法集把编码者从繁重的工作中解脱出来,也拉低了进入javascript的门槛,初学者对浏览器兼容性一无所知的情况下,几行代码就可以写出超炫的特效。
编程容易产生挫折,即使作为一种业余爱好也可能是这样。建立一个网页,手机APP或桌面应用都是个很大的工程,好的记笔记技能是让这个工程井然有序的关键,也是克服压力、绝望和倦怠的好方法。
不知大家有没类似这样的经历:一天忙到晚,一会被PM叫去确认需求,一会被设计拉去确认UI是否能实现,一会又被测试叫去确认bug,然后貌似做了很多事,但好像工作进度也没什么进展。然后,只能晚上加班,在夜深人静时还得敲代码,苦逼
属性选择器非常神奇。它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题。但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用。在本文中,我们将讨论它们是如何运行的,并给出一些如何使用它们的想法。
近年来,远程工作愈来愈流行。远程工作能够帮助雇主能够降低运营成本,同时员工有机会实现工作与生活之间的平衡并避免通勤。下面我们就为大家推荐13个有用的工具
MySQL count(1) 真的比 count(*) 快么? 反正同事们都是这么说的,我也姑且觉得对吧,那么没有自己研究一下究竟?如果我告诉你他们一样,你信么?
vue 提供了组件功能,组件又可以分为全局组件和非全局组件。区别是全局组件你可以直接在 .vue 文件中直接使用自定义的 html 即可。非全局组件必须在 Vue 的对象中定义 components 引入这个组件
传说程序员打字速度要快,很多人仍然会以这样一个标准来片面判断技术水平.拜托,你是一个程序员,不是一个打字员,打字快可以代表一些,但也并不代表什么.互联网行业还在纠结打字速度的,不是外行,就是一个没有独立思考的人.
编程容易产生挫折,即使作为一种业余爱好也可能是这样。建立一个网页,手机APP或桌面应用都是个很大的工程,好的记笔记技能是让这个工程井然有序的关键,也是克服压力、绝望和倦怠的好方法
因为代码对于性能的优化还是有实际性的价值的,并不是冰山哪一张,代码的编写实际对性能就起到了很大占比,就比如:一个常用common类,如果每一次使用都实例化那么这个类在内存中就会用很多个实例
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!