能让你早点下班的36个JavaScript实用函数!

简介: 能让你早点下班的36个JavaScript实用函数!

之前写了一篇介绍 JavaScript 小技巧的文章,很受大家欢迎。但是有朋友说还是不够用,于是我决定再写一篇更多更全的文章。


原来是 12 个函数,现在直接乘以 3 倍,搞 36 个函数!

JavaScript 是一个很复杂的语言,很多新手在使用它开发应用的时候会发现很多功能无从下手。有了我根据功能分类总结的 36 个 JavaScript 技巧,复制粘贴一键搞定!

帮助你提高开发效率、快速解决问题,早点下班,早点摸鱼!


DOM 相关

1. 检测某个元素是否聚焦


const hasFocus = el => el === document.activeElement

2. 获取某个元素所有的兄弟元素


const a = el => [].slice.call(el.parentNode.children).filter(child => child !== el)

3. 获取当前选择的文本


const getSelectedText = () => window.getSelection().toString()

4. 返回上一个页面


const goBack = () => history.go(-1)

5. 获取所有 cookie 并转为对象


const getCookies = () => document.cookie
  .split(';')
  .map(item => item.split('='))
  .reduce((acc, [k, v]) => (acc[k.trim().replace('"', '')] =v) && acc, {})

6. 清除所有 cookie


const clearCookies = () => document.cookie
  .split(';')
  .forEach(c => document.cookie = c.splace(/^+/, '')
          .replace(/=.*/,`=;expires=${new Date().toUTCString()};path=/`))
  )

7. 将 URL 参数转换为对象


const getUrlParams = (query) =>Array.from(new URLSearchParams(query)).reduce((p, [k, v]) => Object.assign({}, p, { [k]: p[k] ? (Array.isArray(p[k]) ? p[k] : [p[k]]).concat(v) : v }),{});

8. 检测是否为暗模式


const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

数组相关

9. 比较两个数组


const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);

10. 将数组转为对象


const arrayToObject = (arr, key) => arr.reduce((a, b) => ({ ...a, [b[key]]: b }), {});

11. 将数组按照属性计数


const countBy = (arr, prop) => arr.reduce((prev, curr) => ((prev[curr[prop]] = ++prev[curr[prop]] || 1), prev), {} );


12. 判断数组是否不为空


const arrayIsNotEmpty = (arr) => Array.isArray(arr) && Object.keys(arr).length > 0;

13. 展开多维数组


const flat_entries = arr => [].concat(...arr);

14. 获取数组最后一个元素


const lastItem = arr => arr.slice(-1)[0]

对象相关

15. 检测多个对象是否相等


const isEqual = (...objects) => objects.every((obj) => JSON.stringify(obj) === JSON.stringify(objects[0]));

16. 从对象数组中提取属性值


const pluck = (objs, property) => objs.map((obj) => obj[property]);

17. 反转对象的 key value


const invert = (obj) => Object.keys(obj).reduce((res, k) => Object.assign(res, { [obj[k]]: k }), {});

18. 从对象中删除值为 null 和 undefined 的属性


const removeNullAndUndefined = (obj) => 
Object.entries(obj) 
.reduce((a, [k, v]) => (v == null ? a : ((a[k] = v), a)), {});

19. 按照对象的属性对对象排序


const sort = (obj) => Object
  .keys(obj) 
  .sort() 
  .reduce((p, c) => ((p[c] = obj[c]), p), {});

20. 检测对象是否为数组


const isArray = (obj) => Array.isArray(obj);

21. 检测对象是否为 Promise


const isPromise = (obj) => 
!!obj && (typeof obj === 'object' || typeof obj === 'function') && typeof obj.then === 'function';

22. 交换两个对象


const exchange = (a, b) => [a, b] = [b, a]

字符串相关

23. 检查路径是否是相对路径


const isRelative = (path) => !/^([az]+:)?[\\/]/i.test(path);

24. 将字符串的第一个字符变小写


const lowercaseFirst = (str) => `${str.charAt(0).toLowerCase()}${str.slice(1)}`
;

25. 重复一个字符串


const repeat = (str, numberOfTimes) => str.repeat(numberOfTimes);

26. 生成 IP 地址


const randomIp = () => Array(4).fill(0) 
.map((_, i) => Math.floor(Math.random() * 255) + (i === 0 ? 1 : 0) ) 
.join('.');

27. 生成十六进制颜色字符串


const randomColor = () => `#${Math.random().toString(16).slice(2, 8).padEnd(6, '0')}`;

28. 生成 rgb 颜色字符串


const randomRgbColor = () => `rgb(${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)})`

29. 下划线转驼峰


const toHump = str => str.replace(/\_(\w)/g, (all, letter) => letter.toUpperCase());

30. 驼峰转下划线横线


const toLine = str => str.replace(/([A-Z])/g,"_$1").toLowerCase()

31. 检查字符串是否是十六进制颜色


const isHexColor = (color) => /^#([0-9A-F]{3}|[0-9A-F]{4}|[0-9A-F]{6}|[0-9A-F]{8})$/i.test(color);

32. RGB 字符串转十六进制字符串


const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1) ;

日期相关

33. 两个日期之间相差的天数


const diffDays = (date, otherDate) => Math.ceil(Math.abs(date - otherDate) / (1000 * 60 * 60 * 24));


34. 检查日期是否有效


const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());

其他

35. 检测代码是否处于 Node.js 环境


const isNode = typeof process !== 'undefined' && process.versions != null && process.versions.node != null;

36. 检测代码是否处于浏览器环境


const isBrowser = typeof window === 'object' && typeof document === 'object';

如果你也有一些常用的函数,或者文章中的某些函数有更好的实现方式,也可以进行补充!



相关文章
|
10月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
390 19
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
293 32
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
JavaScript 前端开发
js教程——函数
js教程——函数
370 4
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
361 2
|
存储 JavaScript 前端开发
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
580 0

热门文章

最新文章

下一篇
开通oss服务