5 JavaScriptユーティリティ関数私は最も大好き❤️

すべての“トレンディな”つぶやきはJavaScriptについて苦情を申し込む😅), JavaScriptは、Web上で素晴らしいものを作成することができる素晴らしい言語です.
時々、我々は我々自身のプロジェクトで何度も何度も同じ涼しいものをしているのを発見しました、それは、使用される現在のブラウザーをチェックするために日付をフォーマットするためにAPIの応答をフォーマットする機能でありえました.
我々は、同じプロジェクト全体で再利用する必要がある機能を持っている場合はどうすればよいですか?ユーティリティ関数を作成します.
この記事では、私のプロジェクトで常に使用しているトップ5のお気に入りJavaScriptユーティリティ関数を共有したいと思います.警告として⚠️, 私のようなメソッドを含んでいないmap , reduce , filter 彼らは標準に組み込まれているので、任意のカスタマイズを必要としない.
二次免責事項⚠️, この記事は非常に独断的です、私はJavaScriptの達人ではない、これは私の個人的な好みに基づいており、それらのいくつかはおそらく、あなたの意見と改善についてコメントすることを躊躇しない場合は、行うには、より良い方法を持っている、建設的なフィードバックがよく受けている.

汚泥

時々、私たちは、以前のポストの1つのようなブログ投稿タイトルを、ドメインURLの最後の文字列にプログラム的にフォーマットする必要があります.

このユニークな識別子ストリングvite-2-a-speed-comparison-in-vue 私たちはSlug
標準として、スラグフォーマットは以下の通りです.

小文字:ケースの問題を避けるために.

-:スペースの使用と複数の'-'を単一の'-'に置き換えてください.

トリム:テキストの先頭から.

< div >
関数は文字列パラメータを受け取ります( JavaScriptのみを使用した場合には).toString() パラメータを文字列に変換することを保証するためにtoLowerCase() すべてのケーシングを取り除いて、Regex 記載されているすべての前の要件を満たすためにp >

モック非同期

この1つは特に多用されていて、文脈に自分自身を入れましょうp >
< tt >残りのAPIへのアクセスがないか、BEチームが容量が低く、前もってチケットのフロント部分を転送する必要があります.私は知っています、それは理想的ではありませんが、このユーティリティはAsyncコードをテストするのに便利になります.p >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/alvarosaburido/3d08cd76482b51c505bd86fcb210a4d6.js//>
< div >
< P >Async === Promises だから我々は基本的にnew Promise とsetTimeout あれresolves or reject booleanパラメータによって異なります.br/>
<> P >
クラスをハイライト表示する

const fakeAPICall = (success, timeout, value) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (success) {
        resolve(value);
      } else {
        reject({ message: 'Error' });
      }
    }, timeout);
  });
};

async function loadPosts() {
   try {
      const { data } = await fakeAPICall(true, 2000, 
      MOCK_POSTS_RESPONSE);

      return data.posts;

   }, catch(error) {
     // Do what you need to do
   }
}

< div >
この関数のもう一つの完全な適合は、コンポーネントのエラー処理のような単体テストでの非同期動作をテストします.p >

ユーティリティ関数

私はここでカンニングをしているかもしれないので、私は事前にお詫び申し上げます.p >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/alvarosaburido/72f9217b47fda741cdf08183eceec219.js//>
< div >
< p >彼らは簡単ですが、まだ日常的なコードにはまだ強力です.関数のパラメータがObject またはArray ? あなたはそれを得たisObject and isArray . もしブラウザがサファリであるかどうかをチェックする必要がありますisSafari .

<高橋潤子>isEmpty 関数使用isObject and isArray 内部p >

2 .ディープクローン

< P >

これはまだ私を非常に神経質にします.私は、深く入れ子になったオブジェクトまたは配列を参照しないで新しいものにコピーするために良い解決策で時間と時間を費やすことを覚えています.p >
JavaScriptはいくつかの浅いコピーオプションを提供しますObject.assign , これらの問題は、元のオブジェクトの正確なコピーを作成しても、プロパティのいずれかがオブジェクトまたは配列である場合、そのオブジェクトへの参照をコピーします.チェックするarticle トピックのより深い理解を得るにはp >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/alvarosaburido/fd3c1c0459a597ef88eb4326b208475a.js//>
< div >
この関数が本質的に何をしているかは再帰的に(入れ子になったオブジェクトの内部で配列内の入れ子になったオブジェクトを持っているかもしれません.無限の可能性)プロパティの値が単純な値であるか、より複雑であるかどうかを調べます.p >
結果は、リファレンスなしでオリジナルのアイテムの正確なコピーです.p >
それは私たちをナンバーワンにもたらします.
< P >

< p >br/>
< br/>
< br/>
< br/>
< p >

1🎉 蛇🐍 to 🐫)

フロントエンドとバックエンドの開発者は、実際には、非常に異なる生き物ですが、私たちを分離する何かがある場合は

How we case our properties.

冗談をしないでくださいhere ), ベンチマーク様々なビジネスの重要なAPIを使用すると、デフォルトでは、彼らはsnake-case の代わりにJSON応答の書式設定camelCase フロントエンドで使用します.p >
< tag > githubのユーザリポジトリ応答を例にとりましょう.あなたが鉱山を得るならばhttps://api.github.com/users/alvarosaburido/repos REPO情報がこのように見える応答を得るでしょう
<> P >
クラスをハイライト表示する

{
    "id": 337852842,
    "node_id": "MDEwOlJlcG9zaXRvcnkzMzc4NTI4NDI=",
    "name": "alvaro-dev-labs-",
    "full_name": "alvarosaburido/alvaro-dev-labs-",
    "private": false,
    "homepage": null,
    "size": 53,
    "stargazers_count": 0,
    "watchers_count": 0,
    "language": "JavaScript",
    "has_issues": true,
    "has_projects": true,
    "has_downloads": true,
    "has_wiki": true,
    "has_pages": false,
    "forks_count": 1,
    "mirror_url": null,
    "archived": false,
    "disabled": false,
    "open_issues_count": 1,
    "license": null,
    "forks": 1,
    "open_issues": 1,
    "watchers": 0,
    "default_branch": "main"
}

< div >
したがって、どのように我々はこれを使用できるようにフォーマットできるかrepo.fullName or repo.defaultBranch ?

あなたはそれをdeconstructして、新しい変数をcamelcaseで割り当てることができました.p >
このペアのユーティリティを使ってオブジェクトを深くフォーマットすることを好む
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/alvarosaburido/50c87cdd04b40b2ff624003ba3f52139.js//>
< div >
< br >バムマジック!(実際には、単に再帰と正規表現ではありません) DTOを安全にフォーマットし、フロントエンド上でオブジェクトを作成することもできます.p >
< P >

< P >…ビューティフル.😭

< P >

ラップアップ.

あなたがここに到達するならば、この記事が何らかの形であなたを助けてくれることを願っています.p >
あなたがコメントや質問、または何を言うべきか、コメントセクションで会いましょう.p >
幸せなコーディング!p >