이것은 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. 임의 ID 생성

여러 고유 식별자가 필요하지만 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를 어떻게 배워야 합니까?
다음 기사를 살펴보십시오.