在现代Web开发中，JavaScript作为一门强大的编程语言，被广泛应用于网页交互、数据处理和动态效果实现等方面。为了帮助开发者更高效地完成任务，下面整理了一些常用的经典JavaScript代码片段，希望能为你的项目提供一些灵感。
1. 判断浏览器类型和版本
```javascript
function getBrowser() {
var userAgent = navigator.userAgent;
if (userAgent.indexOf("Chrome") > -1) {
return "Chrome";
} else if (userAgent.indexOf("Safari") > -1) {
return "Safari";
} else if (userAgent.indexOf("Firefox") > -1) {
return "Firefox";
} else if (userAgent.indexOf("MSIE") > -1 || userAgent.indexOf("Trident/") > -1) {
return "Internet Explorer";
} else {
return "Unknown Browser";
}
}
console.log(getBrowser());
```
这段代码可以帮助你检测用户当前使用的浏览器类型和版本，这对于兼容性测试非常有用。
2. 检测用户是否在线
```javascript
var onlineStatus = navigator.onLine;
console.log(onlineStatus ? 'Online' : 'Offline');
window.addEventListener('online', function() {
console.log('Online');
});
window.addEventListener('offline', function() {
console.log('Offline');
});
```
通过监听`online`和`offline`事件，你可以轻松判断用户的网络状态。
3. 防抖函数（Debounce）
```javascript
function debounce(func, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => func.apply(this, args), delay);
};
}
// 示例：限制输入框实时搜索频率
const handleSearch = debounce(function(query) {
console.log('Searching for:', query);
}, 300);
document.getElementById('searchInput').addEventListener('input', function(event) {
handleSearch(event.target.value);
});
```
防抖函数可以有效减少高频触发事件对性能的影响，比如滚动事件或输入框实时搜索。
4. 节流函数（Throttle）
```javascript
function throttle(func, limit) {
let lastFunc;
let lastRan;
return function(...args) {
const context = this;
const now = +new Date();
if (!lastRan || now - lastRan >= limit) {
lastRan = now;
return func.apply(context, args);
}
};
}
// 示例：限制按钮点击频率
const handleClick = throttle(function() {
console.log('Button clicked!');
}, 1000);
document.getElementById('myButton').addEventListener('click', handleClick);
```
节流函数确保某个函数在指定的时间间隔内只执行一次，适用于需要控制执行频率的场景。
5. 数组去重
```javascript
function uniqueArray(arr) {
return Array.from(new Set(arr));
}
const arr = [1, 2, 2, 3, 4, 4, 5];
console.log(uniqueArray(arr)); // 输出: [1, 2, 3, 4, 5]
```
利用`Set`对象可以轻松实现数组去重。
6. 获取URL参数
```javascript
function getUrlParams(url) {
const paramsString = url.split('?')[1];
const params = {};
if (paramsString) {
paramsString.split('&').forEach(item => {
const [key, value] = item.split('=');
params[key] = decodeURIComponent(value);
});
}
return params;
}
const url = 'https://example.com?name=John&age=25';
console.log(getUrlParams(url)); // 输出: { name: 'John', age: '25' }
```
这个函数可以从URL中提取查询参数并返回一个对象。
7. 深度克隆对象
```javascript
function deepClone(obj) {
return JSON.parse(JSON.stringify(obj));
}
const obj = { a: 1, b: { c: 2 } };
const cloneObj = deepClone(obj);
console.log(cloneObj); // 输出: { a: 1, b: { c: 2 } }
```
虽然JSON方法简单易用，但它无法处理函数或`undefined`等特殊值。
8. 滚动到页面顶部
```javascript
function scrollToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
document.getElementById('topBtn').addEventListener('click', scrollToTop);
```
这个函数可以让用户点击按钮后平滑滚动到页面顶部。
以上就是一些常用的JavaScript代码片段，希望对你有所帮助！如果你有其他需求或者想了解更多实用技巧，请随时告诉我。
