JavaScript 功能强大，但重复编写代码费时费力。这十个实用的 JavaScript 代码片段能简化常见任务，显著提升您的开发效率。现在就开始学习吧！
-
判断元素是否在视口中
轻松判断元素是否可见：
const isInViewport = (element) => {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
- 复制文本到剪贴板
快速复制文本到剪贴板，无需第三方库：
const copyToClipboard = (text) => {
navigator.clipboard.writeText(text);
};
- 打乱数组元素
一行代码随机打乱数组元素顺序：
立即学习“Java免费学习笔记（深入）”；
const shuffleArray = (array) => array.sort(() => Math.random() - 0.5);
- 扁平化多维数组
将嵌套数组转换为一维数组：
const flattenArray = (arr) => arr.flat(Infinity);
- 获取数组中唯一值
去除数组中的重复项：
const uniqueValues = (array) => [...new Set(array)];
- 生成随机十六进制颜色
轻松创建随机十六进制颜色代码：
const randomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0')}`;
- 函数防抖
防止函数被频繁调用，特别适用于搜索输入框：
PHP经典实例(第二版)
下载
PHP经典实例（第2版）能够为您节省宝贵的Web开发时间。有了这些针对真实问题的解决方案放在手边，大多数编程难题都会迎刃而解。《PHP经典实例(第2版)》将PHP的特性与经典实例丛书的独特形式组合到一起，足以帮您成功地构建跨浏览器的Web应用程序。在这个修订版中，您可以更加方便地找到各种编程问题的解决方案，《PHP经典实例(第2版)》中内容涵盖了：表单处理；Session管理；数据库交互；使用We
const debounce = (func, delay) => {
let timeoutId;
return (...args) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func(...args), delay);
};
};
- 检测深色模式
判断用户系统是否处于深色模式：
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
- 首字母大写
简单地将字符串首字母大写：
const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
- 生成随机整数
生成指定范围内的随机整数：
const randomInteger = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
总结
这些代码片段能有效节省您的时间和精力。建议您收藏或整合到您的个人工具库中！
了解更多
更多 JavaScript 提示和技巧，请参考原文。
