2022年能让你早点下班的36个JavaScript实用函数！
之前在掘金写了一篇介绍 JavaScript 小技巧的文章，很受大家欢迎。但是有朋友说还是不够用，于是我决定再写一篇更多更全的文章。
原文：你需要知道的 12 个常用的 JavaScript 函数
原来是 12 个函数，现在直接乘以 3 倍，搞 36 个函数！
JavaScript 是一个很复杂的语言，很多新手在使用它开发应用的时候会发现很多功能无从下手。有了我根据功能分类总结的 36 个 JavaScript 技巧，复制粘贴一键搞定！
帮助你提高开发效率、快速解决问题，早点下班，早点摸鱼！
生成随机颜色
你的网站是否需要生成随机颜色？下面一行代码就可以实现。
const generateRandomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`
console.log(generateRandomHexColor())数组重排序
对数组的元素进行重新排序是一项非常重要的技巧，但是原生 Array 中并没有这项功能。
const shuffle = (arr) => arr.sort(() => Math.random() - 0.5)
const arr = [1, 2, 3, 4, 5]
console.log(shuffle(arr))复制到剪切板
复制到剪切板是一项非常实用且能够提高用户便利性的功能。
const copyToClipboard = (text) => navigator.clipboard && navigator.clipboard.writeText && navigator.clipboard.writeText(text)
copyToClipboard("Hello World!")检测暗色主题
暗色主题日益普及，很多用户都会在设备中启用该模式，我们将应用程序切换到暗色主题可以提高用户体验度。
const isDarkMode = () => window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
console.log(isDarkMode())滚动到顶部
将元素滚动到顶部最简单的方法是使用 scrollIntoView。设置 block 为 start 可以滚动到顶部；设置 behavior 为 smooth 可以开启平滑滚动。
const scrollToTop = (element) =>
element.scrollIntoView({ behavior: "smooth", block: "start" });滚动到底部
与滚动到顶部一样，滚动到底部只需要设置 block 为 end 即可。
const scrollToBottom = (element) =>
element.scrollIntoView({ behavior: "smooth", block: "end" });检测元素是否在屏幕中
检查元素是否在窗口中最好的方法是使用 IntersectionObserver。
const callback = (entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// `entry.target` is the dom element
console.log(`${entry.target.id} is visible`);
}
});
};
const options = {
threshold: 1.0,
};
const observer = new IntersectionObserver(callback, options);
const btn = document.getElementById("btn");
const bottomBtn = document.getElementById("bottom-btn");
observer.observe(btn);
observer.observe(bottomBtn);检测设备
使用 navigator.userAgent 来检测网站运行在哪种平台设备上。
const detectDeviceType = () =>
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent
) ? "Mobile" : "Desktop";
console.log(detectDeviceType());隐藏元素
我们可以将元素的 style.visibility 设置为 hidden，隐藏元素的可见性，但元素的空间仍然会被占用。如果设置元素的 style.display 为 none，会将元素从渲染流中删除。
const hideElement = (el, removeFromFlow = false) => {
removeFromFlow ? (el.style.display = 'none')
: (el.style.visibility = 'hidden')
}从 URL 中获取参数
JavaScript 中有一个 URL 对象，通过它可以非常方便的获取 URL 中的参数。
const getParamByUrl = (key) => {
const url = new URL(location.href)
return url.searchParams.get(key)
}深拷贝对象
深拷贝对象非常简单，先将对象转换为字符串，再转换成对象即可。
const deepCopy = obj => JSON.parse(JSON.stringify(obj))除了利用 JSON 的 API，还有更新的深拷贝对象的 structuredClone API，但并不是在所有的浏览器中都支持。
structuredClone(obj)等待函数
JavaScript 提供了 setTimeout 函数，但是它并不返回 Promise 对象，所以我们没办法使用 async 作用在这个函数上，但是我们可以封装等待函数。
const wait = (ms) => new Promise((resolve)=> setTimeout(resolve, ms))
const asyncFn = async () => {
await wait(1000)
console.log('等待异步函数执行结束')
}
asyncFn()感谢你的阅读，如果本文对你有所帮助，不妨点个赞吧。
DOM 相关
1. 检测某个元素是否聚焦
const hasFocus = el => el === document.activeElement2. 获取某个元素所有的兄弟元素
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';如果你也有一些常用的函数，或者文章中的某些函数有更好的实现方式，也可以进行补充！
