코딩 시간을 절약해 주는 JavaScript 스니펫

JavaScript는 강력한 언어이지만 반복적인 코드를 작성하면 시간이 많이 소모될 수 있습니다. 이 10가지 편리한 JavaScript 스니펫은 일반적인 작업을 단순화하고 생산성을 높여줍니다. 뛰어들어 보세요!

---

1. 요소가 뷰포트에 있는지 확인

뷰포트 내에 요소가 표시되는지 쉽게 확인:

const isInViewport = (element) => {
  const rect = element.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};

2. 클립보드에 복사

외부 라이브러리를 사용하지 않고도 텍스트를 클립보드에 빠르게 복사:

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

---

3. 배열 섞기

다음 한 줄로 배열 요소의 순서를 무작위로 지정하세요.

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

---

4. 다차원 배열을 평면화

중첩 배열을 단일 수준 배열로 변환:

const flattenArray = (arr) => arr.flat(Infinity);

---

5. 배열에서 고유한 값 얻기

배열에서 중복 항목 제거:

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

---

6. 임의의 16진수 색상 생성

쉽게 임의의 16진수 색상 만들기:

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

---

7. 함수 디바운스

함수가 너무 자주 실행되는 것을 방지합니다. 검색 입력에 적합합니다.

const debounce = (func, delay) => {  let timeoutId;  return (...args) => {    clearTimeout(timeoutId);    timeoutId = setTimeout(() => func(...args), delay);  }; };

---

8. 다크 모드 감지

사용자 시스템이 어두운 모드인지 확인하세요.

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

---

9. 문자열의 첫 글자를 대문자로 사용하세요

첫 글자를 대문자로 만드는 간단한 스니펫:

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

---

10. 무작위 정수 생성

범위 내에서 난수 생성:

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

---

결론

이 스니펫은 JavaScript 프로젝트에서 시간과 노력을 절약할 수 있는 좋은 방법입니다. 북마크에 추가하거나 개인 유틸리티 라이브러리에 통합하세요!

자세히 알아보기

더 많은 JavaScript 팁과 요령을 보려면 Script Binary의 원본 기사를 확인하세요.

위 내용은 코딩 시간을 절약해 주는 JavaScript 스니펫의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!