55个JS代码让你轻松当大神

本文从简单到复杂列出了前端常用的一些代码段。善用这些代码可以让你的代码更高雅，别人更难懂。你就是公司的护城河，你就是前端的顶梁柱。

简单部分

1. 数组平铺。这是一个很实用的让复杂的数组快速变成一个常用数组的技巧。arr参数不管是一维数组还是多维数组，经过转变之后最终都会变成一维数组。

const flatArray = [].concat(...arr);

2. 手动延时xx毫秒。在异步请求编程中，有时候要用到让进程等待的情况，用这个函数可以设定等待多少毫秒。

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

3. 把数组内容随便换个位置。可以用来生成随机位置的内容，比如洗牌这种场景。

const randomArr = (arr) => arr.sort(() => Math.random() - 0.5);

4. 数组去重。原理就是先转成Set对象，自动去掉重复的部分，再转回数组。

const getSingleArr = (arr) => [...new Set(arr)];

5. 一键给网页上边框。常用于调试的时候，看一下DOM的框是不是自己要的，其中颜色是随机生成的。也可以自己改一下变成固定颜色的边框。

[].forEach.call($$('*'), function (a) {
    a.style.outline = '1px solid #' + (~~(Math.random() * (1 << 24))).toString(16);
});

效果如下：

6. 一键查看密码。同理也可以自己修改，这里用代码的方式来查看。原理是input框虽然是type=password的，但是内容并没有加密，只要换成text就会正常显示。

javascript: alert('password：' + document.querySelectorAll('input[type=password]')[0].value);

7. 一键去掉鼠标的图标，让人摸不着头脑的操作。一般用于防止别人调试自己的网页。

document.body.style.cursor = 'none';

8. 检查一个日期是否是在周末。常用于判断当前日期是否是周末，一般场景下还会叠加一个判断是否节假日。

const isWeekend = (date) => date.getDay() === 6 || date.getDay() === 0;

9. 检查一个日期是否在某个年份内。通过获取参数日期的年和需要比较的日期的年来进行比较。如果年的参数比较规范，可以不转一次Date对象，直接比较即可。

const isInAYear = (date, year) => date.getUTCFullYear() === new Date(`${year}`).getUTCFullYear();

10. 检查日期是否是一个有效日期。原理是用参数来创建日期，看日期是否有效。

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());
isDateValid('December 14, 2024 11:19:00'); // true

11. 计算两个日期之间的时间间隔。这里计算的是天，也可以自己改成其他的。

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对象，通过比较获得时间差，默认是毫秒。这里除以一天的毫秒数获得了天数。

const dayOfYear = (d) => Math.floor((d - new Date(d.getFullYear(), 0, 0)) / 86400000);
dayOfYear(new Date()); // 258

13. 返回日期的时间部分，并设置格式为hh:mm:ss的形式。

const getTimeFormat = (date) => date.toTimeString().slice(0, 8);
timeFromDate(new Date()); // 返回当前时间 11:26:00

14. 把字符串的首字母大写。有时候网页展示的时候会用得到。

const strFirstBug = (str) => str.charAt(0).toUpperCase() + str.slice(1);
strFirstBug('hello world'); // Hello world

15. 字符串反转。一般没啥用，看看就行。以前面试的时候会用的到。

const reStr = (str) => str.split('').reverse().join('');
reStr('hello world'); // 'dlrow olleh'

16. 生成随机字符串，各种随机基本都是这个原理。

const randomString = () => Math.random().toString(36).slice(2);

17. 按照参数阶段字符串的长度，如果长度不够就不截取。一般代码中自己写也行，但是要多写一个逻辑判断。

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代码、去掉不需要的内容等。

const stripHtml = (html) => new DOMParser().parseFromString(html, 'text/html').body.textContent || '';

19. 判断一个数组是否为空。这里一方面是判断是否为数组，另一方面是判断数组内容。

const isNotEmpty = (arr) => Array.isArray(arr) && arr.length > 0;

isNotEmpty([1, 2, 3]); // true

20. 数组合并，两个数组合并成一个数组。下面是两种方法，都有用，只是用到的语法不同。

const merge = (a, b) => a.concat(b);

const merge = (a, b) => [...a, ...b];

21. 判断数字是奇数还是偶数，同理还可以判断是否可以被3整除之类的。

const isEven = (num) => num % 2 === 0;

22. 计算一组数字的平均值。具体就是所有数字相加再被数量除一次。

const average = (...args) => args.reduce((a, b) => a + b) / args.length;

23. 获得一个随机数。第一个是从0开始到数字之间，第二个是两个数字之间。注意最后的加法是独立算数，修改的时候别改错地方了。

const random = (max) => Math.floor(Math.random() * max);
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

24. 按照指定位数四舍五入。如果没有要求，第二种也是很好用的。

// 返回数字形式
const round = (n, d) => Number(Math.round(n + 'e' + d) + 'e-' + d);
// 返回字符串形式
const round2 = (n, d) => n.toFixed(d);

25. 获取一个随机颜色。

const randomHex = () =>
    `#${Math.floor(Math.random() * 0xffffff)
        .toString(16)
        .padEnd(6, '0')}`;

26. 使用浏览器的原生API复制内容到剪贴板。有的浏览器可能有兼容问题。

const copyToClipboard = (text) => navigator.clipboard.writeText(text);

27. 清除Cookie。老方法了，可以挨个清除cookie的内容。

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

28. 使用浏览器原生的API获得用户框选的文本内容。

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

29. 检查当前环境是否黑暗模式。CSS的检查也是这个原理。

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

30.让页面返回浏览器顶部。

const goToTop = () => window.scrollTo(0, 0);

31. 检测当前标签页是否处于激活模式。

const isTabInView = () => !document.hidden;

32. 检测当前设备是否苹果设备。同理还有微信浏览器、支付宝浏览器等。

const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.userAgent);

33. 判断当前页面是否在底部了。

const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;

34. 打开浏览器的打印模式。

const showPrintDialog = () => window.print();

35. 检测一个对象是否为空。

const isEmpty = (obj) => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;

有点难度

36. 前端自己生成18位的UUID。用到的时候就用到了，一般情况下用不到，哈哈。

const generateUUID = (a) => (a ? (a ^ ((Math.random() * 16) >> (a / 4))).toString(16) : ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, generateUUID));

37. RGB形式的颜色转成16进制的颜色。

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

38. HEX形式的颜色转RGB形式的颜色。

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端启用下载功能（标准音质）。

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值。

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. 浅拷贝。简单使用场景下的方式。

const shallowClone = (obj) => Object.assign({}, obj);

42. 深拷贝。多层级下的内容都可以处理到。function不行，那个要单独处理。

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. 自己实现一个单向链表。面试的时候会用到，一般情况下有这个思维就可以了。

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. 自定义方式的数组排序。

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。

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 (
        <div>
            <button onClick={() => set(Date.now(), new Date().toJSON())}>添加</button>
            <button onClick={() => clear()}>清空</button>
            <button onClick={() => remove('apples')} disabled={!map.has('apples')}>
                删除内容
            </button>
            <pre>
                {JSON.stringify(
                    [...map.entries()].reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
                    null,
                    2
                )}
            </pre>
        </div>
    );
};

46. useSet。实现一个自动处理内部数据的Set对象。

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 (
        <div>
            <button onClick={() => add(String(Date.now()))}>添加</button>
            <button onClick={() => clear()}>清除</button>
            <button onClick={() => remove('apples')} disabled={!set.has('apples')}>
                删除
            </button>
            <pre>{JSON.stringify([...set], null, 2)}</pre>
        </div>
    );
};

47. useDefault。有内容使用设置的内容，没有内容使用默认的内容。

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 (
        <>
            <div>用户: {user.name}</div>
            <input onChange={(e) => setUser({ name: e.target.value })} />
            <button onClick={() => setUser(null)}>清除</button>
        </>
    );
};

48. useMergeState。实现一个合并内容的对象，常见对象的自动更新。

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 (
        <>
            <input value={data.name} onChange={(e) => setData({ name: e.target.value })} />
            <button onClick={() => setData(({ age }) => ({ age: age - 1 }))}>-</button>
            {data.age}
            <button onClick={() => setData(({ age }) => ({ age: age + 1 }))}>+</button>
        </>
    );
};

49. useDebounce。实现一个React的防抖。

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 (
        <div>
            <p>
                当前: {value} - 设置: {lastValue}
            </p>
            <button onClick={() => setValue(value + 1)}>加一</button>
        </div>
    );
};

50. useForm。实现一个React的Form对象，自动管理Form内容。

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 (
        <form onSubmit={handleSubmit}>
            <input type="email" name="email" onChange={setValues} />
            <input type="password" name="password" onChange={setValues} />
            <button type="submit">Submit</button>
        </form>
    );
};

51. useEventListener。实现一个自动监听函数，可以监听鼠标移动。

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 (
        <p>
            Mouse coordinates: {coords.x}, {coords.y}
        </p>
    );
};

52. useKeyPress。实现一个键盘对应的键的事件监听函数。

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 <p>The "w" key is {!wPressed ? 'not ' : ''}pressed!</p>;
};

53. useHover。实现一个鼠标悬停事件的监听函数。

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 <div ref={hoverRef}>{isHovering ? 'Hovering' : 'Not hovering'}</div>;
};

54. useRequestAnimationFrame。实现一个RequestAnimationFrame函数在React中使用的方法。

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 <p>{Math.round(count)}</p>;
};

55. useBodyScrollLock。实现一个自动锁定滚动条的函数。一般弹窗会用的上。

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 (
        <div
            style={{
                zIndex: 100,
                background: 'rgba(0,0,0,0.25)',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
            }}
        >
            <p style={{ padding: 8, borderRadius: 8, background: '#fff' }} onClick={onClose}>
                Scroll locked! <br /> Click me to unlock
            </p>
        </div>
    );
};

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

    return (
        <div
            style={{
                height: '400vh',
                textAlign: 'center',
                paddingTop: 100,
                background: 'linear-gradient(to bottom, #1fa2ff, #12d8fa, #a6ffcb)',
            }}
        >
            <button onClick={() => setModalOpen(true)}>Open modal</button>
            {modalOpen && <Modal onClose={() => setModalOpen(false)} />}
        </div>
    );
};