이것은 previous list of javascript one-liners 의 연속입니다. 기사를 확인하지 않았다면 확인하는 것이 좋습니다.

새로운 목록을 확인해보세요!

1. 수면 기능

JavaScript에는 코드의 실행 흐름을 계속하기 전에 주어진 기간 동안 기다리는 내장sleep 기능이 없습니다.

운 좋게도 이 목적을 위한 함수를 생성하는 것은 간단합니다.

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

2. 이전 페이지로 돌아가기

사용자를 원래 페이지로 다시 보내야 합니까? history 구출에 반대하라!

const navigateBack = () => history.back();
// Or
const navigateBack = () => history.go(-1);

3. 객체 비교

Javascript는 객체를 비교할 때 신비한 방식으로 동작합니다. === 연산자를 사용하여 객체를 비교하면 객체의 참조만 확인하므로 다음 코드는 항상 false를 반환합니다.

const obj1 = { a: 1, b: 2 };
const obj2 = { a: 1, b: 2 };
obj1 === obj2; // false

바로 이 문제를 해결하기 위해 심층 비교 함수를 만들 수 있습니다.

const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);

// examples
isEqual({ a: 1, b: 2 }, { a: 1, b: 2 }); // true
isEqual({ a: 1, b: 2 }, { a: 1, b: 3 }); // false

// works with arrays too
isEqual([1, 2, 3], [1, 2, 3]); // true
isEqual([1, 2, 3], [1, 2, 4]); // false

4. 랜덤 아이디 생성

여러 고유 식별자가 필요하지만 uuid 패키지를 추가할 생각이 없으신가요? 다음과 같은 간단한 유틸리티 기능을 사용해 보십시오.

const uuid = () =>
  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
    (
      c ^
      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
    ).toString(16)
  );

참고: 이 함수는 한 줄로 되어 있지만 가독성을 위해 여러 줄에 걸쳐 있습니다.

5. 선택한 텍스트 가져오기

사용자가 선택한 텍스트에 액세스하고 싶으십니까? window 당신을 도울 방법이 있습니다!

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

6. 요소에 초점이 맞춰져 있는지 확인

focus & blur 리스너를 설정하지 않고도 요소가 현재 포커스되어 있는지 쉽게 확인할 수 있습니다.

const hasFocus = (element) => element === document.activeElement;

7. 객체 배열의 속성으로 계산하기

특정property과 일치하는 배열의 항목 수를 계산해야 합니까? 어레이에서 reduce를 사용하면 작업을 쉽게 수행할 수 있습니다!

const countElementsByProp = (arr, prop) =>
  arr.reduce(
    (prev, curr) => ((prev[curr[prop]] = ++prev[curr[prop]] || 1), prev),
    {}
  );

// example
countElementsByProp(
  [
    { manufacturer: "audi", model: "q8", year: "2019" },
    { manufacturer: "audi", model: "rs7", year: "2020" },
    { manufacturer: "ford", model: "mustang", year: "2019" },
    { manufacturer: "ford", model: "explorer", year: "2020" },
    { manufacturer: "bmw", model: "x7", year: "2020" },
  ],
  "manufacturer"
); // { 'audi': 2, 'ford': 2, 'bmw': 1 }

참고: 이것도 한 줄로 되어 있지만 가독성을 위해 여러 줄에 걸쳐 있습니다.

그게 다야!



연구에 따르면 펜과 종이에 목표를 기록하면 목표를 달성할 가능성이 21%에서 39% 더 높아집니다. 당신의 꿈을 이루기 위한 여정을 더 쉽게 만들어줄 이 노트북과 저널을 확인해보세요: https://www.amazon.com/Tapajyoti-Bose/e/B09VGDDHRR

읽어 주셔서 감사합니다

개발 문제를 해결하기 위해 최고 등급의 프론트엔드 개발 프리랜서가 필요하십니까? Upwork로 저에게 연락하십시오

내가 작업하고 있는 것을 보고 싶습니까? 내 Personal Website 및 GitHub 확인

연결하시겠습니까? 나에게 연락

저는 2022년 중반에 디지털 노마드로 시작하는 프리랜서입니다. 여행을 잡고 싶습니까? 나를 따라와

Weekly new Tidbits에 대한 내 블로그를 팔로우하십시오.

자주하는 질문

제가 자주 받는 질문들입니다. 따라서 이 FAQ 섹션에서 문제가 해결되기를 바랍니다.

저는 초보자입니다. Front-End Web Dev는 어떻게 배워야 하나요?
다음 기사를 살펴보십시오.