開発に役立つ、収集する価値のある 11 の JS ヒント

青灯夜游
リリース: 2021-03-02 09:41:38
転載
1480 人が閲覧しました

この記事では、開発に役立つ 11 の JS のヒントを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

開発に役立つ、収集する価値のある 11 の JS ヒント

#関連する推奨事項:

JavaScript ビデオ チュートリアル

1. 乱数を含むリストを生成する#
Array.from({ length: 1000 }, Math.random)
// [ 0.6163093133259432, 0.8877401276499153, 0.4094354756035987, ...] - 1000 items
ログイン後にコピー

2. 数値のリストを生成

Array.from({ length: 1000 }, (v, i) => i)
// [0, 1, 2, 3, 4, 5, 6....999]
ログイン後にコピー

3. RGB→16 進数に変換

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

rgb2hex([76, 11, 181]);
// #4c0bb5
ログイン後にコピー

4. 変換16 進数 → RGB

それを元に変換するにはどうすればよいですか?これはその目標を達成するための素晴らしい方法です。

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

hex2rgb("#4c0bb5");
// [76, 11, 181]
ログイン後にコピー

5. 奇数または偶数

#ビット単位の演算を使用します:
const value = 232;  

if (value & 1) console.log("odd");
else console.log("even");
// even
ログイン後にコピー

6. 有効な URL を確認します

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

isValidURL(&#39;https://segmentfault.com/u/minnanitkong/articles&#39;)
// true

isValidURL("https//invalidto");
// false
ログイン後にコピー
7. 過去から現在までの時間の表現

6 分前の日付を出力する必要がある場合がありますが、大規模なライブラリでそれを完了する必要はありません。これを行うための小さなスニペットを次に示します:
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;
ログイン後にコピー

8. パラメータを使用したルートの生成

ルート/パスを扱うとき、私たちは常に多くの作業を行います。対処する必要があります。ブラウザをそこにプッシュするためのパラメータを含むパスを生成する必要がある場合、generatePath

が役に立ちます。

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
ログイン後にコピー
9. パスからパラメータを取得

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: &#39;products&#39;, id: &#39;123&#39; }

getPathParams("/items/2/id/8583212", "/items/:category/id/:id", {
  category: v => [&#39;Car&#39;, &#39;Mobile&#39;, &#39;Home&#39;][v],
  id: v => +v
});
// { category: &#39;Home&#39;, id: 8583212 }
ログイン後にコピー
10. クエリ文字列を使用してパスを生成

const getQueryParams = url =>
  url.match(/([^?=&]+)(=([^&]*))/g).reduce((total, crr) => {
    const [key, value] = crr.split("=");
    total[key] = value;
    return total;
  }, {});

getQueryParams("/user?name=Orkhan&age=30");
// { name: &#39;Orkhan&#39;, age: &#39;30&#39; }
ログイン後にコピー
オリジナルアドレス: https://dev.to/11-javascript-tips-and-tricks-to-code-like-a-superhero-vol-2-mp6

著者: Orkhan Jafarov

翻訳アドレス: https://segmentfault.com/a/1190000039122988

プログラミング関連の知識については、

プログラミング ビデオ
をご覧ください。 !

以上が開発に役立つ、収集する価値のある 11 の JS ヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:segmentfault.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート