JavaScript ILL : JavaScriptの地図機能の実例

JavaScriptの配列メソッドは非常に便利ですし、それらを使用する方法を学ぶことは本当にあなたのコードの読みやすさを改善することができます.しかし、ほとんどの開発者は基本的に起動するのでfor ループとwhile ループ、より抽象的な構造のようなスイッチを作るmap , reduce , and filter かなり難しいことができます.これらの関数を記述し、例を挙げる多くのポストがありますが、実際には実際のコードベースで使用されているこれらのリストをコンパイルすることはほとんどありません.配列のすべての要素をどのようにインクリメントできますかmap , しかし、あなたが実際にコードベースでそれを使用することは、それほどしばしばありません.
これは、私が現実の例の上に行く小さな3部シリーズになるでしょうmap , reduce , and filter . このポストについてあなたが何を考えているか、そして、あなたが次の2つのポストのために何かを変えることを望むならば、私にコメントを知らせてください!さらなるADOなしで、ここの若干の例は、ここにありますmap 実際の生産環境で.
The map 関数は配列で呼び出され、1つのパラメータをとります.このコールバック関数を配列内のすべての要素に対して実行し、同じ長さの新しい配列を返します.新しい配列の各インデックスの値は、元の配列のインデックスの要素のコールバックの結果です.飛び込む前の些細な例を見てみましょう.

些細な例
それで、私はあなたがCodeBaseで2で配列を増やさないと言ったということを知っています後世のために、私はとにかくそれを加えるかもしれないと思った.
ちょっと、それは少し狭い画面にしているように見えます.以下のコードブロックはあまりよく見えないかもしれません、しかし、記事の残りは罰金でなければなりません.あなたが沿って従うことを望む場合は、より広い画面でホップすることができます.どこにも行かない.

      const arr = [1,2,3];
      const newarr = arr.map(el => el + 2);

      console.log(newarr); // => [3,4,5]

この場合、コールバックはel + 2 ; このように新しい配列は古い配列の要素を含んでいますが、2に加えられます.
それでは、実際の実例を見てみましょう.

サービスワーカーとキャッシュの削除
この例では、Webページのサービスワーカーは、時代遅れのキャッシュを削除する必要があります.使っているからPromises と非同期プログラミングでは、戻り値は少し異なります.しかし、その概念map 関数は同じです.

      self.addEventListener('activate', function(event) {
        // Delete all caches that aren't named currentCache.
        event.waitUntil(
          caches.keys().then(cacheNames => {
            return Promise.all(
              cacheNames.map(cacheName => { // map function
                if (cacheName != currentCache) {
                  console.log('Deleting out of date cache:', cacheName);
                  return caches.delete(cacheName); // returns a callback to delete this cache
                }
              })
            );
          })
        );
      });

入れ子にされたコールバックがこれを脅迫させることができる間、我々はそれを見ることができますmap 関数は、実際には超簡単ですcacheName はcurrentCache , キャッシュを削除するコールバックを返します.さもなければ、我々は帰りますnull . Without the map 関数は、forループと一時的な配列を使用しなければならず、すべての要素を一時的な配列にプッシュします.
別の例を見てみましょう.

入れ子オブジェクトのローカルストレージへの保存
あなたが見るものの一部として、あなたが何を得るかは、私が作っていたWYSIWYGエディタです、私はローカル記憶装置で実際のデータを保存することに決めました.あなたがローカルストレージが何であるかについてわからないならば、それはwindow.localStorage 検索のキー値ペアを後で設定できます.これに関する唯一の問題は、私のコンテンツがデータ結合に包まれているということですBinding 私が実際に保存したい内容、および入れ子になったプロパティBinding.boundobj.obj . これは完璧なユースケースですmap :

      const saveToStorage = () => {
        localStorage.setItem(contentName, JSON.stringify(contentobj.map(binding => binding.boundobj.obj)));
      }

これは、超簡単な修正プログラムです:代わりに複雑なfor 入れ子になったプロパティを新しい配列にプッシュするループは、map 各要素の入れ子になったプロパティを返す機能.
つの最終的な例を見てみましょう.

テーブルを作成する
このコードスニペットは、見出しの行を持つカスタムテーブルを作成するように設計された反応コンポーネントから取得されます.あなたの行動でそれを見ることができますTerraling ; プロパティテーブルのいずれかにスクロールして、どのようにヘッダーがテーブルデータから視覚的に異なっているかを確認します.これらのテーブルを生成するコードのいくつかは次のようになります.

      <div className={`headers row row-${keys.length}`}>
        {
          headers.map((header, i) => {
            return (
              <span key={i} className="header name">{header}</span>
            )
          })
        }
      </div>

ヘッダーデータが配列を通してコンポーネントに渡されるのでheaders , 各要素を文字列から全体に変換する必要がありましたspan 要素.これはfor ループを使用するmap 建設は、より読みやすくて簡潔なコードを考慮に入れます.コードを読む人は誰でも、その中の各要素に何が起こるかを理解することができますheaders 配列.

包み上げる
私は、これらの例があなたに方法を与えたことを望みますmap 関数は、コードベースで実際に使用され、どのようにコードをより読みやすく簡潔にすることができます.それは本当に多才な建設です、そして、私は非常にあなた自身のコードでそれを使用することに慣れていることを勧めます.あなたが何かおもしろい用途を持っているならば、コメントで私に知らせてくださいmap 機能は、シリーズの次の2つのポストに目を離さない!
いつものように、私はこのようなコンテンツのために従うことを忘れないでください.現在書いていますdev.to and Medium , そして、どちらかのプラットフォームでのあなたのサポートは非常に有り難いです.私もmembership 設定は、ここでは、記事やリソースの全体の束に排他的なアクセスの早期プレビューを得ることができます.また、あなたが特にこのポストを楽しんだならばbuying me a coffee . 次回まで!