16 个前端冷知识：用一次就忘不掉的那种

🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣
“这个Bug我调了俩小时！” “早知道有这个属性就好了……”
这种对话，在步伐员之间可以说是太常见了。
很多题目，一旦知道诀窍，三五分钟就能办理；可如果不知道，很大概就必要耗上泰半天的时间行止理。
于是我就决定，把这些平常大概没人专门讲，但又特殊实用的前端冷知识整理了一下，保准你看完有劳绩。
1. CSS中的:hover伪类也可以用于非链接元素

很多人以为:hover只能用在a标签上，着实否则！任何元素都可以利用:hover伪类。

1. /* 不只是链接，div也可以有悬停效果 */
2. div:hover {
3.   background-color: #f0f0f0;
4.   transition: all 0.3s ease;
5. }

复制代码

实用场景：为表格行、卡片组件等添加悬停结果，提拔用户体验。
2. 箭头函数没有本身的this绑定

这是ES6箭头函数的一个告急特性，但经常被忽略：

1. const obj = {
2.   name: "前端小白",
3.   regularFunc: function() {
4.     console.log(this.name); // "前端小白"
5.   },
6.   arrowFunc: () => {
7.     console.log(this.name); // undefined（这里的this是外层作用域的this）
8.   }
9. };

复制代码

原理分析：箭头函数不绑定本身的this，而是继承父级作用域的this值。
3. 快速浮点数转整数

1. // 这三种方式都可以将浮点数转为整数
2. console.log(~~3.14);        // 3
3. console.log(3.14 | 0);      // 3
4. console.log(3.14 >> 0);     // 3

复制代码

留意：这些方法只实用于32位整数，大数情况下大概会出现题目。
4. 利用dataset操纵自界说数据属性

1. [/code]上风：比getAttribute/setAttribute更简便，且主动举行数据范例转换。
2. [size=5]5. 利用navigator.onLine检测网络状态[/size]
4. [code]// 检测用户是否在线
5. if (navigator.onLine) {
6.   // 在线逻辑
7. } else {
8.   // 离线逻辑
9. }
11. // 监听网络状态变化
12. window.addEventListener('online', () => {
13.   console.log('网络已连接');
14. });

复制代码

应用场景：PWA应用、资源加载优化等。
6. 利用contenteditable使元素可编辑

1.   点击我就可以直接编辑内容！

复制代码

实用本领：可以团结localStorage实现简朴的实时预览编辑器。
7. 利用currentScript获取当前实行的script标签

1. [/code]应用场景：在脚本中动态加载依赖资源时非常有用。
2. [size=5]8. 利用passive优化滚动性能[/size]
4. [code]// 不好的做法（可能阻塞滚动）
5. document.addEventListener('touchmove', function(e) {
6.   // 处理逻辑
7. });
9. // 好的做法
10. document.addEventListener('touchmove', function(e) {
11.   // 处理逻辑
12. }, { passive: true });

复制代码

原理：告诉欣赏器事故处置处罚函数不会调用preventDefault()，从而提拔滚动性能。
9. 利用clamp实现相应式字体巨细

1. .text {
2.   font-size: clamp(16px, 4vw, 24px);
3. }
4. /* 字体大小会在16px-24px之间自适应 */

复制代码

上风：比媒体查询更简便，实现真正的流体排版。
10. 利用in操纵符查抄对象属性

1. const obj = { name: '小明', age: 20 };
3. // 检查属性是否存在
4. if ('name' in obj) {
5.   console.log('name属性存在');
6. }

复制代码

与hasOwnProperty的区别：in会查抄原型链上的属性，而hasOwnProperty只查抄自身属性。
11. 利用Array.from将类数组转为真实数组

1. // 将NodeList转为数组
2. const divs = Array.from(document.querySelectorAll('div'));
4. // 将arguments转为数组
5. function example() {
6.   const args = Array.from(arguments);
7.   // 现在可以使用数组方法了
8. }

复制代码

12. 利用performance API举行性能监控

1. // 标记开始时间
2. performance.mark('start');
4. // 执行一些操作
5. for(let i = 0; i < 1000000; i++) {}
7. // 标记结束时间并测量
8. performance.mark('end');
9. performance.measure('操作耗时', 'start', 'end');
11. const measure = performance.getEntriesByName('操作耗时')[0];
12. console.log(`操作耗时: ${measure.duration}毫秒`);

复制代码

13. 利用structuredClone举行深拷贝

1. const obj = { name: "小明", hobbies: ["篮球", "游泳"] };
2. const cloned = structuredClone(obj); // 真正的深拷贝

复制代码

上风：比JSON.parse(JSON.stringify(obj))更可靠，可以处置处罚循环引用。
14. 利用CSS的:where和:is简化选择器

1. /* 传统写法 */
2. header h1, header h2, header h3 {
3.   margin-bottom: 1rem;
4. }
6. /* 简化写法 */
7. header :is(h1, h2, h3) {
8.   margin-bottom: 1rem;
9. }

复制代码

上风：代码更简便，易于维护。
15. 利用requestIdleCallback举行使命调理

1. function processTask(deadline) {
2.   while (deadline.timeRemaining() > 0 && tasks.length > 0) {
3.     // 在空闲时间执行任务
4.     processTask(tasks.shift());
5.   }
6.   
7.   if (tasks.length > 0) {
8.     requestIdleCallback(processTask);
9.   }
10. }
12. requestIdleCallback(processTask);

复制代码

应用场景：大数据渲染、复杂盘算等必要优化性能的场景。
16. 你大概不知道的console.log黑科技

末了一个，你大概不知道console.log尚有这些用法：

1. // 1. 使用CSS样式
2. console.log('%c这是红色大字', 'color: red; font-size: 20px;');
4. // 2. 分组打印
5. console.group('用户信息');
6. console.log('姓名: 小明');
7. console.log('年龄: 20');
8. console.groupEnd();
10. // 3. 条件打印
11. console.assert(1 === 2, '这个条件为false时会打印');

复制代码

总结

说真话，上面这些小本领，我现在也记不全。平常写业务代码，大概80%的时间都用不上它们。
但看上一两遍有点印象之后，在哪天遇到某种题目时，你也会突然想起来：
“似乎有个属性/方法就是干这个的”
如果对您有所资助，欢迎您点个关注，我会定时更新技能文档，各人一起讨论学习，一起进步。

免责声明：如果侵犯了您的权益，请联系站长及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金.