JavaScript ILL : JavaScriptの機能低下事例

JavaScriptの配列メソッドは非常に便利ですし、それらを使用する方法を学ぶことは本当にあなたのコードの読みやすさを改善することができます.これはJavaScriptの配列関数のシリーズの第2の部分です.そこでは、実際の生産コードベースから例に飛び込みます.今日の機能はreduce , どれが私にとって最も抽象的なものだったのか.しかし、その抽象性のおかげで、それはまた、最も強力です.実際には、他の2つのジョブを行うことが可能ですreduce ひとりぼっち!(たとえあなたがそうしないとしても)、絶対に、絶対にそうしないでください).
多くのmap 機能reduce がコールされ、コールバックと初期値の2つのパラメータを取ります.しかし、コールバックはmap — つのパラメータを取る代わりに、アキュムレータと現在の要素を2つ取ります.これは、非常に心のreduce 関数:初期値から始まると、配列内のすべての要素を反復処理し、コールバック関数の結果をアキュムレータとしてループの次の反復に返します.それが混乱するならば、心配しないでください.それは例が何であるかです!

些細な例
我々がコードに入る前に、私は本当にreduce です.私が本当に役に立つというアナロジーは次のようになります.
人々の列を想像してください.あなたはそれらの年齢の合計を検索しますつまり、あなたの人々の配列を1つの数に削減する-その組み合わせの年齢です.それを行うには、おそらく計算機のアプリを使用して一度に1行の行を下に行くと、あなたの合計に追加します.それはまさにreduce 関数は-初期値は0、アキュムレータはあなたの計算機で実行中の合計であり、現在の要素は、現在のあなたの前にいる人です.
それを念頭に置いて、同じ類推を使った簡単な例を見てみましょう.

      const arrayOfPeople = [
        {
          name: 'John Doe',
          age: 21
        },
        {
          name: 'Mary Sue',
          age: 34
        },
        {
          name: 'Gary Stu',
          age: 43
        }
      ];
      const combinedAge = arrayOfPeople.reduce((acc, curr) => acc + curr.age, 0);

      console.log(combinedAge); // => 98

これがどのように働くかを視覚化するために、人々の類推の同じラインを使用してください.あなたが計算機を想像し、これらの3人の組み合わせの年齢をカウントする必要があります.あなたの計算機で0から始める-それは初期値です.その後、ジョンドゥーに行くだろうし、彼らの年齢を聞いて、あなたの計算機の値に追加します.0プラス21は21を与えるので、これまでのランニング合計です.それから、あなたはマルイスーに行って、彼らの年齢のために彼らに尋ねます.彼らは34を言うので、あなたの計算機に追加;21プラス34は55を与えるので、現在、それはあなたの実行中の合計です.最後に、あなたはゲーリーSTUに行って、彼らに彼らの年齢を尋ねて、それを加えます.55プラス43は98を与えます-そして、それはまさに何ですかreduce 返り値
今、我々のベルトの下で、実際の実例を見てみましょう.

HTMLノードの文字列への変換
この例では、私は私のブログのために機能を書いていましたdev.to . 私は、私のページの上で束要素の束を選択して、それらをポスト正面問題の一部としてコンマで区切られたストリングに変えなければなりませんでした.これは完璧なユースケースですreduce ; これは、オブジェクトやスカッシュの配列を取るか、それらを1つの値に減らす.どうやってやったのか

      const tagString = ` tags:${Array.from(document.querySelectorAll(".tags span.tag")).reduce((acc, curr) => { 
        return acc + (acc == "" ? "" : ", ") + curr.textContent;
      }, "")}` ;

複雑に見える三元演算子にだまされないでください-最初の要素がコンマを持っていないことを確認するためにだけです.さもなければreduce 関数は、すべてのタグのテキスト内容の間にカンマを追加することです.
私たちが移動する前に、良い質問は、私がような機能を使用できない理由ですjoin これを行うには答えはあなたがHTMLノードの配列に参加することができないということですtextContent プロパティを参照してください.私が代わりにやったことはmap 配列の各要素をtextContent それからjoin しかし、1つの方法は2よりずっとよい.したがって、reduce 関数.無関係なノートでは、いくつかの例を見てみたい場合map 使用される関数check out my article .
それでは、別の例を見てみましょう.

書式設定コメント
私は最近、私のコメントセクションを実装しましたblog , そして、その一部として、私はユーザーが彼らのコメントに基本的な書式設定を適用することができたことを望みました.これには、太字、斜体、コード、および改行が含まれます.しかしながら、外部ライブラリやパーサを使いたくなかったので、生のマークダウンデータを安全なHTML要素に変換しなければなりませんでした.これを行うには、入力データを線で区切ったり、HTMLをエスケープしたりして、それぞれの行にカスタムのマークダウンコンバータを走らせる必要がありました.
それは多くのようですが、それは削減のような作業馬のための完璧な仕事です.私はコールバックでHTMLエスケープを実行し、外部関数へのMarkdown構文解析のような有用なコードを抽出できます.これが最後になったことです.

      return body.split('\n').reduce((acc, curr) => {
        let text = document.createTextNode(curr);
        let p = document.createElement('p');
        p.appendChild(text);
        if (curr.trim().length === 0) return acc;
        return acc + (acc === "" ? "" : '</p><p class="comment-body">') + safeMarkdownToHTML(p.innerHTML);
      }, "");

最初のいくつかの行は、ブラウザのビルトインHTMLエスケープを利用する方法ですcreateTextNode 関数.その後、私は三項演算子を使います最初の要素には不要な内容がないことを確認します.最後に、再帰的なマークダウン解析関数の結果を返します.最初は多くのように見えるかもしれませんが、それを粉々に分解することによって、我々は最終的な製品がどのように構築されるかを見ることができます.この場合、reduce この目標を達成するために多くの間の1つのツールとして機能します.ところで、コメントの下で、あなたがMarkdownを解析するポストを見たいならば、それは再帰とストリング操作へのすばらしい導入です.
つの最終的な例を見てみましょう.

JavaScriptエフェクトの作成
私のウェブサイトのいくつかのページでhome page , blog page , and design page , 例えば-私は、タイプライターの効果を少し目のキャンディとして使います.クールに見える(私は効果をかなり誇りに思っている)正直なところ、みんなが同じようにインターネットを見るわけではないことを認識することが重要です.特にこの効果はスクリーン読者を使用する人々に全くアクセスできないので、私は、異なる語の配列を1つの長いフレーズに変換する方法を見つけなければなりませんでしたaria-label 属性.
この連係をするために、私は再び14に達しましたreduce . 機能の性質のために、私は読んで意味をなす論理的、文法的に正しい文を作ることができました.これが何かreduce 関数はコンテキストのように見えます:

      let t = new Typewriter(
        el, 
        el.dataset.speed, 
        el.dataset.pause, 
        JSON.parse(el.dataset.text), 
        [...new Set(JSON.parse(el.dataset.text))]
          .reduce((acc,curr) => acc + ", and " + curr.trim()), "")
      );

スーパーシンプル、スーパースウィート-私がしなければならなかったすべては", and" 配列の各要素の間に.再び、私は使用を終了しませんでしたjoin 電話しなければならなかったからtrim テキストの各部分に.使用reduce このユースケースに最適ですが、収集中に配列が変換され、変異されます.ところで、あなたがウェブ上のアクセシビリティについてもっと学ぶことに興味があるならば、そして、特にJavaScriptで、私のメーリングリストに登録してください.

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