开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 8 天，点击查看活动详情
大家好，我是林家少爷，是一位专注于前端技术，立志成为前端技术专家的热血青年。
从2023年1月17日开始，我决定开辟一个新的专栏【刷爆LeetCode】，每天至少刷一道LeetCode原题，并且使用Typescript和原生JS来编写代码。
今天是第4天ヾ(◍°∇°◍)ﾉﾞ
昨天因为收拾房间，沉浸于心流状态，导致错过了一天的输出。
看到掘金的二月更文活动，连续更新21天有鼠标垫送，我看了这个鼠标垫，实在太喜欢了，而且从那天开始到3月5日更文结束，刚好21天。
现在看来如意算盘算是打错了，看在我一片诚心的份上，希望掘金官方能不能破例给我送一个鼠标垫，在连续更文20天的前提下o(╥﹏╥)o
今天分享一下我日常工作中常用的15个JS函数，希望对于你的日常开发有帮助：
当前浏览器名称
function getExplorer() { const ua = window.navigator.userAgent const isExplorer = (exp) => { return ua.indexOf(exp) > -1 } if (isExplorer('MSIE')) return 'IE' else if (isExplorer('Firefox')) return 'Firefox' else if (isExplorer('Chrome')) return 'Chrome' else if (isExplorer('Opera')) return 'Opera' else if (isExplorer('Safari')) return 'Safari' } const arr = getExplorer() console.log(arr) //Chrome
Object是否相同
/** * @param {*} obj1 对象 * @param {*} obj2 对象 * @description 判断两个对象是否相等，这两个对象的值只能是数字或字符串 */ function objEqual(obj1, obj2) { const keysArr1 = Object.keys(obj1) const keysArr2 = Object.keys(obj2) if (keysArr1.length !== keysArr2.length) return false else if (keysArr1.length === 0 && keysArr2.length === 0) return true else return !keysArr1.some((key) => obj1[key] != obj2[key]) }
localStore的常用方法
// 存储localStorage setStore = (params) => { let name = params.name, content = params.content, type = params.type, datetime = params.datetime name = `${process.env.VUE_APP_NAME}-${name}` const obj = { dataType: typeof content, content: content, datetime: new Date().getTime(), } if (type) obj.type = type try { if (type) { window.sessionStorage.setItem(name, JSON.stringify(obj)) } else { // localforage.setItem(name, JSON.stringify(obj)) store.set(name, JSON.stringify(obj)) } } catch (e) { console.log(e) } } // 获取localStorage getStore = (params) => { let { name, type } = params let obj = {} let content name = `${process.env.VUE_APP_NAME}-${name}` obj = store.get(name) if (validatenull(obj)) obj = window.sessionStorage.getItem(name) if (validatenull(obj)) return obj = obj ? JSON.parse(obj) : {} if (obj.dataType === 'string') { content = obj.content } else if (obj.dataType === 'number') { content = Number(obj.content) } else if (obj.dataType === 'boolean') { content = eval(obj.content) } else if (obj.dataType === 'object') { content = obj.content } return content } // 删除localStorage removeStore = (name) => { name = `${process.env.VUE_APP_NAME}-${name}` store.remove(name) window.sessionStorage.removeItem(name) }
生成随机颜色
const generateRandomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`
console.log(generateRandomHexColor())
数组重排序
const shuffle = (arr) => arr.sort(() => Math.random() - 0.5)
const arr = [1, 2, 3, 4, 5]
console.log(shuffle(arr))//[3,2,4,5,1]
重排序是有问题的，因为sort快排的原因导致并不是每一个元素都是被交换的，所以不是完全公平的重排。
建议使用洗牌算法。
复制到剪贴板
const copyToClipboard = (text) => navigator.clipboard && navigator.clipboard.writeText && navigator.clipboard.writeText(text)
copyToClipboard("Hello World!")
滚动到顶部
敲黑板！！
const scrollToTop = (element) =>
element.scrollIntoView({ behavior: "smooth", block: "start" });
将元素滚动到顶部最简单的方法是使用 scrollIntoView。设置 block 为 start 可以滚动到顶部；设置 behavior 为 smooth 可以开启平滑滚动。
滚动到底部
与滚动到顶部一样，滚动到底部只需要设置 block 为 end 即可。
const scrollToBottom = (element) =>
element.scrollIntoView({ behavior: "smooth", block: "end" });
检测元素是否在屏幕中
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)
PS：深拷贝遇到正则或者undefined是不会被拷贝的，JSON API 只能拷贝 Array 和 Object 这两种复合类型，其他的复合类型都会丢失。
省事的话建议使用 lodash 的cloneDeep 函数。
等待函数
疯狂敲黑板，重要高频知识点！！
JavaScript 提供了 setTimeout 函数，但是它并不返回 Promise 对象，所以我们没办法使用 async 作用在这个函数上，但是我们可以封装等待函数。
const wait = (ms) => new Promise((resolve)=> setTimeout(resolve, ms))
const asyncFn = async () => {
await wait(1000)
console.log('等待异步函数执行结束')
}
asyncFn()
检测暗色主题
我们将页面主题切换成暗色主题，主要是为了提高用户体验。
const isDarkMode = () => window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
console.log(isDarkMode())// false
说了那么久，我的【老林故事汇】还是没有动工，我艹我的执行力！
下一期，就在【老林故事汇】，讲一讲我妹的故事，还有我买房的规划。
配上一张我和我妹的合照，我妹还单身哦！
