30组常用函数

在工作中,会有很多重复劳动,也会每次花时间去找对应函数,从而影响部分工作效率,以下准备了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);
}

  • 7
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值