登录
16 个前端冷知识：用一次就忘不掉的那种
“这个Bug我调了俩小时！” “早知道有这个属性就好了……”
这种对话，在程序员之间可以说是太常见了。
很多问题，一旦知道诀窍，三五分钟就能解决；可如果不知道，很可能就需要耗上大半天的时间去处理。
于是我就决定，把这些平时可能没人专门讲，但又特别实用的前端冷知识整理了一下，保准你看完有收获。
1. CSS中的:hover伪类也可以用于非链接元素
很多人以为:hover只能用在a标签上，其实不然！任何元素都可以使用:hover伪类。
/* 不只是链接，div也可以有悬停效果 */
div:hover {
background-color: #f0f0f0;
transition: all 0.3s ease;
}
实用场景：为表格行、卡片组件等添加悬停效果，提升用户体验。
2. 箭头函数没有自己的this绑定
这是ES6箭头函数的一个重要特性，但经常被忽略：
const obj = {
name: "前端小白",
regularFunc: function() {
console.log(this.name); // "前端小白"
},
arrowFunc: () => {
console.log(this.name); // undefined（这里的this是外层作用域的this）
}
};
原理分析：箭头函数不绑定自己的this，而是继承父级作用域的this值。
3. 快速浮点数转整数
// 这三种方式都可以将浮点数转为整数
console.log(~~3.14); // 3
console.log(3.14 | 0); // 3
console.log(3.14 >> 0); // 3
注意：这些方法只适用于32位整数，大数情况下可能会出现问题。
4. 使用dataset操作自定义数据属性
<div id="user" data-id="123" data-user-name="小明"></div>
<script>
const user = document.getElementById('user');
console.log(user.dataset.id); // "123"
console.log(user.dataset.userName); // "小明"（注意驼峰命名）
</script>
优势：比getAttribute/setAttribute更简洁，且自动进行数据类型转换。
5. 使用navigator.onLine检测网络状态
// 检测用户是否在线
if (navigator.onLine) {
// 在线逻辑
} else {
// 离线逻辑
}
// 监听网络状态变化
window.addEventListener('online', () => {
console.log('网络已连接');
});
应用场景：PWA应用、资源加载优化等。
6. 使用contenteditable使元素可编辑
<div contenteditable="true">
点击我就可以直接编辑内容！
</div>
实用技巧：可以结合localStorage实现简单的实时预览编辑器。
7. 使用currentScript获取当前执行的script标签
<script>
console.log('当前脚本:', document.currentScript.src);
</script>
应用场景：在脚本中动态加载依赖资源时非常有用。
8. 使用passive优化滚动性能
// 不好的做法（可能阻塞滚动）
document.addEventListener('touchmove', function(e) {
// 处理逻辑
});
// 好的做法
document.addEventListener('touchmove', function(e) {
// 处理逻辑
}, { passive: true });
原理：告诉浏览器事件处理函数不会调用preventDefault()，从而提升滚动性能。
9. 使用clamp实现响应式字体大小
.text {
font-size: clamp(16px, 4vw, 24px);
}
/* 字体大小会在16px-24px之间自适应 */
优势：比媒体查询更简洁，实现真正的流体排版。
10. 使用in操作符检查对象属性
const obj = { name: '小明', age: 20 };
// 检查属性是否存在
if ('name' in obj) {
console.log('name属性存在');
}
与hasOwnProperty的区别：in会检查原型链上的属性，而hasOwnProperty只检查自身属性。
11. 使用Array.from将类数组转为真实数组
// 将NodeList转为数组
const divs = Array.from(document.querySelectorAll('div'));
// 将arguments转为数组
function example() {
const args = Array.from(arguments);
// 现在可以使用数组方法了
}
12. 使用performance API进行性能监控
// 标记开始时间
performance.mark('start');
// 执行一些操作
for(let i = 0; i < 1000000; i++) {}
// 标记结束时间并测量
performance.mark('end');
performance.measure('操作耗时', 'start', 'end');
const measure = performance.getEntriesByName('操作耗时')[0];
console.log(`操作耗时: ${measure.duration}毫秒`);
13. 使用structuredClone进行深拷贝
const obj = { name: "小明", hobbies: ["篮球", "游泳"] };
const cloned = structuredClone(obj); // 真正的深拷贝
优势：比JSON.parse(JSON.stringify(obj))更可靠，可以处理循环引用。
14. 使用CSS的:where和:is简化选择器
/* 传统写法 */
header h1, header h2, header h3 {
margin-bottom: 1rem;
}
/* 简化写法 */
header :is(h1, h2, h3) {
margin-bottom: 1rem;
}
优势：代码更简洁，易于维护。
15. 使用requestIdleCallback进行任务调度
function processTask(deadline) {
while (deadline.timeRemaining() > 0 && tasks.length > 0) {
// 在空闲时间执行任务
processTask(tasks.shift());
}
if (tasks.length > 0) {
requestIdleCallback(processTask);
}
}
requestIdleCallback(processTask);
应用场景：大数据渲染、复杂计算等需要优化性能的场景。
16. 你可能不知道的console.log黑科技
最后一个，你可能不知道console.log还有这些用法：
// 1. 使用CSS样式
console.log('%c这是红色大字', 'color: red; font-size: 20px;');
// 2. 分组打印
console.group('用户信息');
console.log('姓名: 小明');
console.log('年龄: 20');
console.groupEnd();
// 3. 条件打印
console.assert(1 === 2, '这个条件为false时会打印');
总结
说实话，上面这些小技巧，我现在也记不全。平时写业务代码，可能80%的时间都用不上它们。
但看上一两遍有点印象之后，在哪天碰到某种问题时，你也会突然想起来：
“好像有个属性/方法就是干这个的”
本文首发于公众号：程序员大华，专注分享前后端开发的实战笔记。关注我，少走弯路，一起进步！
