--- theme: channing-cyan --- 本文从简单到复杂列出了前端常用的一些代码段。善用这些代码可以让你的代码更高雅，别人更难懂。你就是公司的护城河，你就是前端的顶梁柱。 ## 简单部分 1. 数组平铺。这是一个很实用的让复杂的数组快速变成一个常用数组的技巧。arr参数不管是一维数组还是多维数组，经过转变之后最终都会变成一维数组。 ```js const flatArray = [].concat(...arr); ``` 2. 手动延时xx毫秒。在异步请求编程中，有时候要用到让进程等待的情况，用这个函数可以设定等待多少毫秒。 ```js const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); ``` 3. 把数组内容随便换个位置。可以用来生成随机位置的内容，比如洗牌这种场景。 ```js const randomArr = (arr) => arr.sort(() => Math.random() - 0.5); ``` 4. 数组去重。原理就是先转成Set对象，自动去掉重复的部分，再转回数组。 ```js const getSingleArr = (arr) => [...new Set(arr)]; ``` 5. 一键给网页上边框。常用于调试的时候，看一下DOM的框是不是自己要的，其中颜色是随机生成的。也可以自己改一下变成固定颜色的边框。 [].forEach.call($$('*'), function (a) { a.style.outline = '1px solid #' + (~~(Math.random() * (1 << 24))).toString(16); }); 效果如下： ![image-20240914111647280](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/fcb559a07e594885af509fb5a48076a1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rSe56qd5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1757680826&x-signature=17dVb0hR4TmrnttBhXd2VGgfTug%3D) 6. 一键查看密码。同理也可以自己修改，这里用代码的方式来查看。原理是input框虽然是`type=password`的，但是内容并没有加密，只要换成text就会正常显示。 javascript: alert('password：' + document.querySelectorAll('input[type=password]')[0].value); 7\. 一键去掉鼠标的图标，让人摸不着头脑的操作。一般用于防止别人调试自己的网页。 document.body.style.cursor = 'none'; 8\. 检查一个日期是否是在周末。常用于判断当前日期是否是周末，一般场景下还会叠加一个判断是否节假日。 ```js const isWeekend = (date) => date.getDay() === 6 || date.getDay() === 0; ``` 9. 检查一个日期是否在某个年份内。通过获取参数日期的年和需要比较的日期的年来进行比较。如果年的参数比较规范，可以不转一次`Date`对象，直接比较即可。 ```js const isInAYear = (date, year) => date.getUTCFullYear() === new Date(`${year}`).getUTCFullYear(); ``` 10. 检查日期是否是一个有效日期。原理是用参数来创建日期，看日期是否有效。 ```js const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf()); isDateValid('December 14, 2024 11:19:00'); // true ``` 11. 计算两个日期之间的时间间隔。这里计算的是天，也可以自己改成其他的。 ```js const dayDif = (d1, d2) => Math.ceil(Math.abs(d1.getTime() - d2.getTime()) / 86400000); dayDif(new Date('2023-11-3'), new Date('2024-2-1')); // 90 ``` 12. 获取日期从年初到现在入参有多少天。入参是Date对象，通过比较获得时间差，默认是毫秒。这里除以一天的毫秒数获得了天数。 ```js const dayOfYear = (d) => Math.floor((d - new Date(d.getFullYear(), 0, 0)) / 86400000); dayOfYear(new Date()); // 258 ``` 13. 返回日期的时间部分，并设置格式为`hh:mm:ss`的形式。 ```js const getTimeFormat = (date) => date.toTimeString().slice(0, 8); timeFromDate(new Date()); // 返回当前时间 11:26:00 ``` 14. 把字符串的首字母大写。有时候网页展示的时候会用得到。 ```js const strFirstBug = (str) => str.charAt(0).toUpperCase() + str.slice(1); strFirstBug('hello world'); // Hello world ``` 15. 字符串反转。一般没啥用，看看就行。以前面试的时候会用的到。 ```js const reStr = (str) => str.split('').reverse().join(''); reStr('hello world'); // 'dlrow olleh' ``` 16. 生成随机字符串，各种随机基本都是这个原理。 ```js const randomString = () => Math.random().toString(36).slice(2); ``` 17. 按照参数阶段字符串的长度，如果长度不够就不截取。一般代码中自己写也行，但是要多写一个逻辑判断。 ```js const substr = (str, len) => (str.length < len ? str : `${str.slice(0, len - 3)}...`); substr('Hi, I should be truncated because I am too loooong!', 36); // 'Hi, I should be truncated because...' ``` 18. 删除字符串中的HTML内容。一般情况下用来防止富文本内容中注入了js代码、去掉不需要的内容等。 ```js const stripHtml = (html) => new DOMParser().parseFromString(html, 'text/html').body.textContent || ''; ``` 19. 判断一个数组是否为空。这里一方面是判断是否为数组，另一方面是判断数组内容。 ```js const isNotEmpty = (arr) => Array.isArray(arr) && arr.length > 0; isNotEmpty([1, 2, 3]); // true ``` 20. 数组合并，两个数组合并成一个数组。下面是两种方法，都有用，只是用到的语法不同。 ```js const merge = (a, b) => a.concat(b); const merge = (a, b) => [...a, ...b]; ``` 21. 判断数字是奇数还是偶数，同理还可以判断是否可以被3整除之类的。 ```js const isEven = (num) => num % 2 === 0; ``` 22. 计算一组数字的平均值。具体就是所有数字相加再被数量除一次。 ```js const average = (...args) => args.reduce((a, b) => a + b) / args.length; ``` 23. 获得一个随机数。第一个是从0开始到数字之间，第二个是两个数字之间。注意最后的加法是独立算数，修改的时候别改错地方了。 ```js const random = (max) => Math.floor(Math.random() * max); const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min); ``` 24. 按照指定位数四舍五入。如果没有要求，第二种也是很好用的。 ```js // 返回数字形式 const round = (n, d) => Number(Math.round(n + 'e' + d) + 'e-' + d); // 返回字符串形式 const round2 = (n, d) => n.toFixed(d); ``` 25. 获取一个随机颜色。 ```js const randomHex = () => `#${Math.floor(Math.random() * 0xffffff) .toString(16) .padEnd(6, '0')}`; ``` 26. 使用浏览器的原生API复制内容到剪贴板。有的浏览器可能有兼容问题。 ```js const copyToClipboard = (text) => navigator.clipboard.writeText(text); ``` 27. 清除Cookie。老方法了，可以挨个清除cookie的内容。 ```js const clearCookies = document.cookie.split(';').forEach((cookie) => (document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`))); ``` 28. 使用浏览器原生的API获得用户框选的文本内容。 ```js const getSelectedText = () => window.getSelection().toString(); ``` 29. 检查当前环境是否黑暗模式。CSS的检查也是这个原理。 ```js const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; ``` 30.让页面返回浏览器顶部。 ```js const goToTop = () => window.scrollTo(0, 0); ``` 31. 检测当前标签页是否处于激活模式。 ```js const isTabInView = () => !document.hidden; ``` 32. 检测当前设备是否苹果设备。同理还有微信浏览器、支付宝浏览器等。 ```js const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.userAgent); ``` 33. 判断当前页面是否在底部了。 ```js const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight; ``` 34. 打开浏览器的打印模式。 ```js const showPrintDialog = () => window.print(); ``` 35. 检测一个对象是否为空。 ```js const isEmpty = (obj) => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object; ``` ## 有点难度 36. 前端自己生成18位的UUID。用到的时候就用到了，一般情况下用不到，哈哈。 ```js const generateUUID = (a) => (a ? (a ^ ((Math.random() * 16) >> (a / 4))).toString(16) : ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, generateUUID)); ``` 37. RGB形式的颜色转成16进制的颜色。 ```js const rgbToHex = (r, g, b) => '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); ``` 38. HEX形式的颜色转RGB形式的颜色。 ```js const hexToRGB = (hex) => hex .replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (_, r, g, b) => `#${r}${r}${g}${g}${b}${b}`) .substring(1) .match(/.{2}/g) .map((x) => parseInt(x, 16)); ``` 39. 网易音乐的web端启用下载功能（标准音质）。 ```js window.addEventListener( 'hashchange', ((fn) => fn() && function () { setTimeout(fn, 1000); })( () => (document.getElementById('g_iframe').contentWindow.NEJ.P('nm.x').NW = ({ id, type }) => NEJ.P('nej.j').cG('/api/song/enhance/player/url', { type: 'json', query: { ids: JSON.stringify([id]), br: 128000, }, onerror: () => alert('Error'), onload: (obj) => obj.code === 200 && window.open(obj.data[0].url), })) ) ); ``` 40. 前端自己计算内容的SHA256值。 ```js const hashValue = (val) => crypto.subtle.digest('SHA-256', new TextEncoder('utf-8').encode(val)).then((h) => { let hexes = [], view = new DataView(h); for (let i = 0; i < view.byteLength; i += 4) hexes.push(('00000000' + view.getUint32(i).toString(16)).slice(-8)); return hexes.join(''); }); hashValue(JSON.stringify({ a: 'a', b: [1, 2, 3, 4], foo: { c: 'bar' } })).then(console.log); // '04aa106279f5977f59f9067fa9712afc4aedc6f5862a8defc34552d8c7206393' ``` 41. 浅拷贝。简单使用场景下的方式。 ```js const shallowClone = (obj) => Object.assign({}, obj); ``` 42. 深拷贝。多层级下的内容都可以处理到。`function`不行，那个要单独处理。 ```js const deepClone = (obj) => { if (obj === null) return null; let clone = Object.assign({}, obj); Object.keys(clone).forEach((key) => (clone[key] = typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key])); if (Array.isArray(obj)) { clone.length = obj.length; return Array.from(clone); } return clone; }; ``` ## 上强度 43. 自己实现一个单向链表。面试的时候会用到，一般情况下有这个思维就可以了。 ```js class LinkedList { constructor() { this.nodes = []; } get size() { return this.nodes.length; } get head() { return this.size ? this.nodes[0] : null; } get tail() { return this.size ? this.nodes[this.size - 1] : null; } insertAt(index, value) { const previousNode = this.nodes[index - 1] || null; const nextNode = this.nodes[index] || null; const node = { value, next: nextNode }; if (previousNode) previousNode.next = node; this.nodes.splice(index, 0, node); } insertFirst(value) { this.insertAt(0, value); } insertLast(value) { this.insertAt(this.size, value); } getAt(index) { return this.nodes[index]; } removeAt(index) { const previousNode = this.nodes[index - 1]; const nextNode = this.nodes[index + 1] || null; if (previousNode) previousNode.next = nextNode; return this.nodes.splice(index, 1); } clear() { this.nodes = []; } reverse() { this.nodes = this.nodes.reduce((acc, { value }) => [{ value, next: acc[0] || null }, ...acc], []); } *[Symbol.iterator]() { yield* this.nodes; } } ``` 44. 自定义方式的数组排序。 ```js const orderBy = (arr, props, orders) => [...arr].sort((a, b) => props.reduce((acc, prop, i) => { if (acc === 0) { const [p1, p2] = orders && orders[i] <= 0 ? [b[prop], a[prop]] : [a[prop], b[prop]]; acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0; } return acc; }, 0) ); const users = [ { name: 'fred', age: 48 }, { name: 'barney', age: 36 }, { name: 'fred', age: 40 }, ]; orderBy(users, ['name', 'age'], [1, -1]); /* [ { name: 'barney', age: 36 }, { name: 'fred', age: 48 }, { name: 'fred', age: 40 }, ]; */ orderBy(users, ['name', 'age']); /* [ { name: 'barney', age: 36 }, { name: 'fred', age: 40 }, { name: 'fred', age: 48 }, ]; */ ``` ## React相关hooks 45. useMap。实现一个自动处理Map对象的hook。 ```js const useMap = (initialValue) => { const [map, setMap] = React.useState(new Map(initialValue)); const actions = React.useMemo( () => ({ set: (key, value) => setMap((prevMap) => { const nextMap = new Map(prevMap); nextMap.set(key, value); return nextMap; }), remove: (key, value) => setMap((prevMap) => { const nextMap = new Map(prevMap); nextMap.delete(key, value); return nextMap; }), clear: () => setMap(new Map()), }), [setMap] ); return [map, actions]; }; const MyApp = () => { const [map, { set, remove, clear }] = useMap([['apples', 10]]); return (

                {JSON.stringify(
                    [...map.entries()].reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
                    null,
                    2
                )}

); }; ``` 46. useSet。实现一个自动处理内部数据的Set对象。 ```js const useSet = (initialValue) => { const [set, setSet] = React.useState(new Set(initialValue)); const actions = React.useMemo( () => ({ add: (item) => setSet((prevSet) => new Set([...prevSet, item])), remove: (item) => setSet((prevSet) => new Set([...prevSet].filter((i) => i !== item))), clear: () => setSet(new Set()), }), [setSet] ); return [set, actions]; }; const MyApp = () => { const [set, { add, remove, clear }] = useSet(new Set(['apples'])); return (

{JSON.stringify([...set], null, 2)}

); }; ``` 47. useDefault。有内容使用设置的内容，没有内容使用默认的内容。 ```js const useDefault = (defaultState, initialState) => { const [value, setValue] = React.useState(initialState); const isValueEmpty = value === undefined || value === null; return [isValueEmpty ? defaultState : value, setValue]; }; const UserCard = () => { const [user, setUser] = useDefault({ name: 'Adam' }, { name: 'John' }); return ( <>

用户: {user.name}

setUser({ name: e.target.value })} /> ); }; ``` 48. useMergeState。实现一个合并内容的对象，常见对象的自动更新。 ```js const useMergeState = (initialState = {}) => { const [value, setValue] = React.useState(initialState); const mergeState = (newState) => { if (typeof newState === 'function') newState = newState(value); setValue({ ...value, ...newState }); }; return [value, mergeState]; }; const MyApp = () => { const [data, setData] = useMergeState({ name: 'John', age: 20 }); return ( <> setData({ name: e.target.value })} /> {data.age} ); }; ``` 49. useDebounce。实现一个React的防抖。 ```js const useDebounce = (value, delay) => { const [debouncedValue, setDebouncedValue] = React.useState(value); React.useEffect(() => { const handler = setTimeout(() => { setDebouncedValue(value); }, delay); return () => { clearTimeout(handler); }; }, [value]); return debouncedValue; }; const Counter = () => { const [value, setValue] = React.useState(0); const lastValue = useDebounce(value, 500); return (

当前: {value} - 设置: {lastValue}

); }; ``` 50. useForm。实现一个React的Form对象，自动管理Form内容。 ```js const useForm = (initialValues) => { const [values, setValues] = React.useState(initialValues); return [ values, (e) => { setValues({ ...values, [e.target.name]: e.target.value, }); }, ]; }; const Form = () => { const initialState = { email: '', password: '' }; const [values, setValues] = useForm(initialState); const handleSubmit = (e) => { e.preventDefault(); console.log(values); }; return ( ); }; ``` 51. useEventListener。实现一个自动监听函数，可以监听鼠标移动。 ```js const useEventListener = (type, handler, el = window) => { const savedHandler = React.useRef(); React.useEffect(() => { savedHandler.current = handler; }, [handler]); React.useEffect(() => { const listener = (e) => savedHandler.current(e); el.addEventListener(type, listener); return () => { el.removeEventListener(type, listener); }; }, [type, el]); }; const MyApp = () => { const [coords, setCoords] = React.useState({ x: 0, y: 0 }); const updateCoords = React.useCallback( ({ clientX, clientY }) => { setCoords({ x: clientX, y: clientY }); }, [setCoords] ); useEventListener('mousemove', updateCoords); return (

Mouse coordinates: {coords.x}, {coords.y}

); }; ``` 52. useKeyPress。实现一个键盘对应的键的事件监听函数。 ```js const useKeyPress = (targetKey) => { const [keyPressed, setKeyPressed] = React.useState(false); const downHandler = ({ key }) => { if (key === targetKey) setKeyPressed(true); }; const upHandler = ({ key }) => { if (key === targetKey) setKeyPressed(false); }; React.useEffect(() => { window.addEventListener('keydown', downHandler); window.addEventListener('keyup', upHandler); return () => { window.removeEventListener('keydown', downHandler); window.removeEventListener('keyup', upHandler); }; }, []); return keyPressed; }; const MyApp = () => { const wPressed = useKeyPress('w'); return

The "w" key is {!wPressed ? 'not ' : ''}pressed!

; }; ``` 53. useHover。实现一个鼠标悬停事件的监听函数。 ```js const useHover = () => { const [isHovering, setIsHovering] = React.useState(false); const handleMouseOver = React.useCallback(() => setIsHovering(true), []); const handleMouseOut = React.useCallback(() => setIsHovering(false), []); const nodeRef = React.useRef(); const callbackRef = React.useCallback( (node) => { if (nodeRef.current) { nodeRef.current.removeEventListener('mouseover', handleMouseOver); nodeRef.current.removeEventListener('mouseout', handleMouseOut); } nodeRef.current = node; if (nodeRef.current) { nodeRef.current.addEventListener('mouseover', handleMouseOver); nodeRef.current.addEventListener('mouseout', handleMouseOut); } }, [handleMouseOver, handleMouseOut] ); return [callbackRef, isHovering]; }; const MyApp = () => { const [hoverRef, isHovering] = useHover(); return

{isHovering ? 'Hovering' : 'Not hovering'}

; }; ``` 54. useRequestAnimationFrame。实现一个RequestAnimationFrame函数在React中使用的方法。 ```js const useRequestAnimationFrame = (callback) => { const requestRef = React.useRef(); const previousTimeRef = React.useRef(); const animate = (time) => { if (previousTimeRef.current) callback(time - previousTimeRef.current); previousTimeRef.current = time; requestRef.current = requestAnimationFrame(animate); }; React.useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); }; const Counter = () => { const [count, setCount] = React.useState(0); useRequestAnimationFrame((deltaTime) => { setCount((prevCount) => (prevCount + deltaTime * 0.01) % 100); }); return

{Math.round(count)}

; }; ``` 55. useBodyScrollLock。实现一个自动锁定滚动条的函数。一般弹窗会用的上。 ```js const useBodyScrollLock = () => { React.useLayoutEffect(() => { const originalStyle = window.getComputedStyle(document.body).overflow; document.body.style.overflow = 'hidden'; return () => (document.body.style.overflow = originalStyle); }, []); }; const Modal = ({ onClose }) => { useBodyScrollLock(); return (

Scroll locked!
Click me to unlock

); }; const MyApp = () => { const [modalOpen, setModalOpen] = React.useState(false); return (

{modalOpen && setModalOpen(false)} />}

); }; ``` 作者：洞窝-方超