시간을 절약할 수 있는 16개 이상의 JavaScript 스니펫

시간을 절약하기 위해 일부JavaScript 스니펫을 만들었습니다. 아래에서 그들을 보고 당신의 생각을 알려주십시오!

어두운 모드인지 감지

이 스니펫은 사용자가 어두운 모드에 있는지 감지합니다. 그렇다면 true를 반환합니다.

const isDarkMode = () =>
    globalThis.matchMedia?.("(prefers-color-scheme:dark)").matches ?? false;

// Usage
isDarkMode();

클립 보드에 복사

이 스니펫은 주어진 텍스트를 클립보드에 복사합니다.

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

// Usage
copyToClipboard("Hello World!");

배열의 항목을 고유하게 만들기

이 스니펫은 배열의 항목을 고유하게 만듭니다.

const uniqueArray = (array) => [...new Set(array)];

// Usage
uniqueArray([1, 2, 3, 4, 5, 1, 2, 3, 4, 5]); // [1, 2, 3, 4, 5]

난수 얻기

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

// Usage
getRandomNumber(1, 10); // Random number between 1 and 10

임의의 16진수 색상 가져오기

이 스니펫은 임의의 16진수 색상을 반환합니다. 먼저 0에서 255 사이의 난수를 생성한 다음 이를 16진수로 변환합니다.

const getRandomHexColor = () =>
    "#" + ((Math.random() * 0xffffff) << 0).toString(16);

// Usage
getRandomHexColor(); // Random hex color

셔플 배열

이 스니펫은 배열을 섞습니다.

const shuffleArray = (array) => array.sort(() => Math.random() - 0.5);

// Usage
shuffleArray([1, 2, 3, 4, 5]); // Randomly shuffled array

함수를 x번 반복

이 스니펫은 함수를 x번 반복합니다. 루프가 많은 경우에 유용합니다.

const loop = (x, fn) => [...Array(x)].forEach(fn);

// Usage
loop(10, () => console.log("Hello World!"));

배열에서 임의의 요소 가져오기

이 조각은 배열에서 임의의 요소를 반환합니다.

const getRandomElement = (array) => array[~~(Math.random() * array.length)];

// Usage
getRandomElement([1, 2, 3, 4, 5]); // Random element from array

임의의 문자열 가져오기

이 스니펫은 임의의 문자열을 반환합니다.

const getRandomString = (length) =>
    [...Array(length)]
        .map(() => String.fromCharCode(~~(Math.random() * 26) + 97))
        .join("");

// Usage
getRandomString(10); // Random string with 10 characters

임의 부울 가져오기

이 스니펫은 임의의 부울을 반환합니다.

const getRandomBoolean = () => Math.random() >= 0.5;

// Usage
getRandomBoolean(); // Random boolean

두 숫자 사이의 난수 얻기

이 조각은 두 숫자 사이의 난수를 반환합니다.

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

// Usage
getRandomNumberBetween(1, 10); // Random number between 1 and 10

쿠키 가져오기

이 스니펫은 쿠키 값을 반환합니다.

const getCookie = (name) =>
    ("; " + document.cookie).split(`; ${name}=`).pop().split(";")[0];

// Usage
getCookie("name"); // Value of cookie "name"

모든 쿠키 지우기

const clearCookies = () =>
    document.cookie
        .split(";")
        .forEach(
            (c) =>
                (document.cookie = c
                    .replace(/^ +/, "")
                    .replace(/=.*/, "=;expires=Thu, 01 Jan 1970 00:00:00 UTC"))
        );

// Usage
clearCookies(); // Clear all cookies

요소의 맨 위로 스크롤

const scrollToTop = (element) => element.scrollIntoView({ behavior: "smooth" });

// Usage
scrollToTop(document.querySelector("#element"));

숫자의 평균 구하기

const avg = (...numbers) => numbers.reduce((a, b) => a + b, 0) / numbers.length;

// Usage
avg(1, 2, 3, 4, 5); // 3

유효한 이메일

이 스니펫은 정규식을 사용하여 이메일의 유효성을 검사합니다.

const validateEmail = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

// Usage
validateEmail("[email protected]"); // true

개체 유효성 검사

이 스니펫은 규칙 객체를 사용하여 객체의 유효성을 검사합니다.

const validateObject = (object, rules) =>
    Object.keys(rules).every((key) => rules[key](object[key]));

// Usage
const rules = {
    name: (name) => name.length > 0,
    email: (email) => validateEmail(email),
    password: (password) => password.length > 0,
};

validateObject({ name: "", email: "", password: "" }, rules); // false

청크 배열

배열을 x 길이 청크로 청크합니다.

const chunkArray = (array, chunkSize) =>
    [...Array(Math.ceil(array.length / chunkSize))].map((_, index) =>
        array.slice(index * chunkSize, (index + 1) * chunkSize)
    );

// Usage
chunkArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 3); // [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10]]

RGB 에서 HEX

const rgbToHex = (r, g, b) =>
    "#" + ((r << 16) + (g << 8) + b).toString(16).padStart(6, "0");

// Usage
rgbToHex(255, 0, 0); // #ff0000

원시 문자열을 일반 문자열로

다음과 같은 상황에 처한 경우에 유용합니다.

formatFn("string") + formatFn("string");

그렇게 하는 대신 ES6의 원시 문자열 구문을 사용할 수 있습니다.

const f = (...args) => String.raw(...args); // This returns a normal string

formatFn(f`string` + f`string`);

두 개체 비교

const compareObjects = (obj1, obj2) => {
    const c = Object.keys(obj1),
        n = Object.keys(obj2);
    return c.length === n.length && c.every((c) => obj1[c] === obj2[c]);
};

// Usage
compareObjects({ a: 1, b: 2 }, { a: 1, b: 2 }); // true

선택한 텍스트 가져오기

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

// Usage
getSelectedText(); // Selected text

URL에서 쿼리 매개변수의 개체 가져오기

const getQueryParams = (url) => new URLSearchParams(url.split("?")[1]);

// Usage
getQueryParams("https://example.com?a=1&b=2"); // { a: "1", b: "2" }

숫자를 단어로 변환

1000000 와 같은 큰 숫자를 "1M" 로 변환합니다.

const numToWord = (number) =>
    number.toLocaleString("en-US", { notation: "compact" });

// Usage
numToWord(1000000); // "1M"

배열의 중복 수 계산

배열의 중복 수와 함께 객체를 반환합니다.

const countDuplicates = (c) => {
    const t = {};
    return c.forEach((c) => (t[c] = (t[c] || 0) + 1)), t;
};

// Usage
countDuplicates([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); // { 1: 1, 2: 1, 3: 1, 4: 1, 5: 1, 6: 1, 7: 1, 8: 1, 9: 1, 10: 1 }

깊이에서 트리 생성

일부 테스트 JSON이 필요한 경우 이 스니펫을 사용하여 깊이 트리depth를 생성할 수 있습니다.

const generateTree = (depth) =>
    [...Array(depth)].map(() => ({ tree: generateTree(depth - 1) }));

// Usage
generateTree(3); // [{ tree: [{ tree: [{ tree: [] }, { tree: [] }] }, { tree: [{ tree: [] }, { tree: [] }] }] }, { tree: [{ tree: [] }, { tree: [] }] }]

결론

그게 다야! 이 정보가 도움이 되었기를 바랍니다.

GitHub 및 에서 저를 찾으십시오.