在工作中,会有很多重复劳动,也会每次花时间去找对应函数,从而影响部分工作效率,以下准备了30组常用函数,可以收藏方便以后使用;
1. 数组去重
function uniqueArray(arr) {
return [...new Set(arr)];
}
2. 深度克隆对象
function deepClone(obj) {
return JSON.parse(JSON.stringify(obj));
}
3. 数组扁平化
function flatten(arr) {
return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val), []);
}
4. 获取URL参数
function getURLParameters(url) {
return (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
(a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),
{}
);
}
5. 防抖函数
function debounce(func, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => func.apply(this, args), delay);
};
}
6. 节流函数
function throttle(func, limit) {
let lastFunc;
let lastRan;
return function() {
const context = this;
const args = arguments;
if (!lastRan) {
func.apply(context, args);
lastRan = Date.now();
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(function() {
if ((Date.now() - lastRan) >= limit) {
func.apply(context, args);
lastRan = Date.now();
}
}, limit - (Date.now() - lastRan));
}
};
}
7. 检查回文字符串
function isPalindrome(str) {
str = str.replace(/\W/g, '').toLowerCase();
return (str == str.split('').reverse().join(''));
}
8. 随机数生成
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
9. 数组求和
function sumArray(arr) {
return arr.reduce((acc, val) => acc + val, 0);
}
10. 最大公约数
function gcd(x, y) {
return !y ? x : gcd(y, x % y);
}
11. 数字格式化
function formatNumber(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
12. 字符串首字母大写
function capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
13. 数组交集
function intersection(a, b) {
const s = new Set(b);
return a.filter(x => s.has(x));
}
14. 数组差集
function difference(a, b) {
const s = new Set(b);
return a.filter(x => !s.has(x));
}
15. 检查数组中是否所有元素都满足条件
function all(arr, fn = Boolean) {
return arr.every(fn);
}
16. 检查数组中是否至少有一个元素满足条件
function any(arr, fn = Boolean) {
return arr.some(fn);
}
17. 休眠函数(延迟执行)
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
18. 数组乱序
function shuffle(arr) {
return arr.sort(() => 0.5 - Math.random());
}
19. 字符串反转
function reverseString(str) {
return str.split('').reverse().join('');
}
20. 获取当前时间戳
function timestamp() {
return Date.now();
}
21. 深度合并对象
function deepMerge(target, ...sources) {
if (!sources.length) return target;
const source = sources.shift();
if (isObject(target) && isObject(source)) {
for (const key in source) {
if (isObject(source[key])) {
if (!target[key]) Object.assign(target, { [key]: {} });
deepMerge(target[key], source[key]);
} else {
Object.assign(target, { [key]: source[key] });
}
}
}
return deepMerge(target, ...sources);
}
function isObject(item) {
return (item && typeof item === 'object' && !Array.isArray(item));
}
22. 检查设备是移动设备还是桌面设备
function detectDeviceType() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop';
}
23. 生成指定范围内的随机十六进制颜色
function randomHexColorCode() {
return `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0')}`;
}
24. 检查给定日期是否为工作日(周一至周五)
function isWeekday(date) {
return date.getDay() % 6 !== 0;
}
25. 检查元素是否在视口中可见
function elementIsVisibleInViewport(el, partiallyVisible = false) {
const { top, left, bottom, right } = el.getBoundingClientRect();
const { innerHeight, innerWidth } = window;
return partiallyVisible
? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
: top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
}
26. 获取两个日期之间的天数差
function daysBetween(date1, date2) {
return Math.abs((date1 - date2) / (24 * 60 * 60 * 1000));
}
27. 获取当前页面的滚动位置
function getScrollPosition(el = window) {
return {
x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
};
}
28. 滚动到页面顶部
function scrollToTop() {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c / 8);
}
}
29. 检查元素是否有指定的类
function elementHasClass(el, className) {
return el.classList.contains(className);
}
30. 切换元素的类
function toggleClass(el, className) {
el.classList.toggle(className);
}