개발에 도움이 되고 수집할 가치가 있는 11가지 JS 팁

이 기사에서는 개발에 도움이 되는 11가지 JS 팁을 공유합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

관련 권장 사항: JavaScript 비디오 튜토리얼

1. 임의의 숫자로 목록 생성

Array.from({ length: 1000 }, Math.random)
// [ 0.6163093133259432, 0.8877401276499153, 0.4094354756035987, ...] - 1000 items

2. RGB → 16진수로 변환

Array.from({ length: 1000 }, (v, i) => i)
// [0, 1, 2, 3, 4, 5, 6....999]

4.16진수→RGB

다시 변환하는 방법은 무엇인가요? 이는 그 목표를 달성하는 좋은 방법입니다.

const rgb2hex = ([r, g, b]) =>
  `#${(1 << 24) + (r << 16) + (g << 8) + b}`.toString(16).substr(1);

rgb2hex([76, 11, 181]);
// #4c0bb5

5. 홀수 또는 짝수

비트 연산 사용:

const hex2rgb = hex =>
  [1, 3, 5].map((h) => parseInt(hex.substring(h, h + 2), 16));

hex2rgb("#4c0bb5");
// [76, 11, 181]

6. 유효한 URL을 확인하세요

const value = 232;  

if (value & 1) console.log("odd");
else console.log("even");
// even

7. 과거에서 현재 시간 표현까지의 거리

날짜 이전이지만 큰 도서관이 완성되는 것을 원하지 않습니다. 다음은 이를 수행하는 작은 조각입니다.

const isValidURL = (url) => {
  try {
    new URL(url);
    return true;
  } catch (error) {
    return false;
  }
}

isValidURL('https://segmentfault.com/u/minnanitkong/articles')
// true

isValidURL("https//invalidto");
// false

8. 매개변수를 사용하여 경로 생성

우리는 경로/경로를 처리할 때 종종 많은 작업을 수행하며 항상 이를 조작해야 합니다. 브라우저를 거기로 푸시하기 위해 매개변수가 있는 경로를 생성해야 할 때 가 도움이 될 수 있습니다!

const fromAgo = (date) => {
  const ms = Date.now() - date.getTime();
  const seconds = Math.round(ms / 1000);
  const minutes = Math.round(ms / 60000);
  const hours = Math.round(ms / 3600000);
  const days = Math.round(ms / 86400000);
  const months = Math.round(ms / 2592000000);
  const years = Math.round(ms / 31104000000);

  switch (true) {
    case seconds < 60:
      return `${seconds} second(s) ago"`;
    case minutes < 60:
      return `${minutes} minute(s) ago"`;
    case hours < 24:
      return `${hours} hour(s) ago"`;
    case days < 30:
      return `${days} day(s) ago`;
    case months < 12:
      return `${months} month(s) ago`;
    default:
      return `${years} year(s) ago`;
  }
};

const createdAt = new Date(2021, 0, 5);
fromAgo(createdAt); // 14 day(s) ago;

9. pathgeneratePath

const generatePath = (path, obj) =>
    path.replace(/(:[a-z]+)/g, (v) => obj[v.substr(1)]);

const route = "/app/:page/:id";
generatePath(route, {
  page: "products",
  id: 85,
});
// /app/products/123

10에서 매개변수를 가져옵니다. 쿼리 문자열을 사용하여 경로를 생성합니다.

const getPathParams = (path, pathMap, serializer) => {
  path = path.split("/");
  pathMap = pathMap.split("/");
  return pathMap.reduce((acc, crr, i) => {
    if (crr[0] === ":") {
      const param = crr.substr(1);
      acc[param] = serializer && serializer[param]
        ? serializer[param](path[i])
        : path[i];
    }
    return acc;
  }, {});
};

getPathParams("/app/products/123", "/app/:page/:id");
// { page: 'products', id: '123' }

getPathParams("/items/2/id/8583212", "/items/:category/id/:id", {
  category: v => ['Car', 'Mobile', 'Home'][v],
  id: v => +v
});
// { category: 'Home', id: 8583212 }

원본 주소: https://dev.to/11-javascript-tips-and-tricks-to - code-like-a-superhero-vol-2-mp6

저자: Orkhan Jafarov

번역 주소: https://segmentfault.com/a/1190000039122988

더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요:

Programming 영상

! !

위 내용은 개발에 도움이 되고 수집할 가치가 있는 11가지 JS 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!