Javascript の削減: 基本をマスターする

今日は、reduce Javascript 配列メソッドと、それを使用して配列を単一の値に縮小する方法について説明します。記述されたすべてのコード スニペットは Javascript 言語で書かれています。この記事を理解し、メソッドを効果的に実装するには、言語の基本的な知識が必要です。

reduce Javascript メソッドとは何ですか?

reduce Javascript 配列メソッドは、配列を取り、それを単なる値に縮小する関数型プログラミングの重要なコンポーネントです。これは、配列の各要素に対して順番にコールバック関数を実行し、その前に要素の計算結果を渡すことによって実現されます。

 const array1 = [1, 2, 3, 4]; // 0 + 1 + 2 + 3 + 4 const initialValue = 0; const sumWithInitial = array1.reduce((accumulator, currentValue) => accumulator + currentValue, initialValue) console.log(sumWithInitial); // expected output: 10

上記のコード スニペットは数値の配列です。 reduce メソッドを呼び出すと、配列全体が取得され、10 という値が返されます。

「reduce」Javascript パラメーターと引数を理解する

メソッドを適切に使用する必要がある場合は、Javascript の「reduce」パラメーターが何であるかを具体的に理解することが重要です。以下に、これらのパラメーターを強調表示しました。それらを次々と取り上げ、最後にすべてをまとめて意味を理解します。

1. コールバック関数
2. 初期値

コールバック関数

この関数は、配列内の各項目に対して実行されます。後続のコールバック Fn の実行時に、その戻り値はアキュムレータ引数の値に変更されます。戻り値は、最後の呼び出しの reduce() に変わります。

関数を呼び出すときに、次のパラメーターが提供されます。

1. アキュムレータ
2. 現在の価値
3. 現在のインデックス
4. 配列

アキュムレータ

これはコールバック Fn への最後の呼び出しの結果であり、値です。指定されている場合、initialValue は最初の呼び出しで使用されます。そうでない場合は、array[0] が使用されます。

現在の価値

これは現在の要素の値です。 initialValue が指定された場合、インデックス 0 (array[0]) の配列の値が最初の呼び出しで返されます。そうでない場合は、インデックス 1 (array[1]) が返されます。

現在のインデックス

これは、配列の currentValue のインデックス位置です。最初の呼び出しで initialValue が指定された場合、その位置はインデックス 0 になります。それ以外の場合は、インデックス 1 になります。

配列

これは単に reduce() メソッドが使用された配列です。

初期値

最初のコールバックでアキュムレータを初期化するために使用される値。 initialValue が指定されている場合、callbackFn は配列の最初の要素に設定された currentValue で実行を開始します。 initialValue が省略された場合、accumulator は配列の最初の値に設定され、callbackFn は配列の 2 番目の値に設定された currentValue で実行を開始します。このシナリオで配列が空の場合 (つまり、アキュムレータとして返す初期項目がない場合)、エラーが発生します。

すべてをまとめる

reduce(Function (accumulator, currentValue, currentIndex, array) { /* … */ }, initialValue)

これらすべてのパラメーターの組み合わせは、上記のコード スニペットのようになります。

「reduce」Javascript メソッドはどのように機能しますか?

この簡略化された Javascript メソッドをさらに深く掘り下げて、舞台裏で何が起こっているかを見てみましょう。

 const array1 = [1, 2, 3, 4]; // 0 + 1 + 2 + 3 + 4 const initialValue = 0; const sumWithInitial = array1.reduce( (accumulator, currentValue) => accumulator + currentValue, initialValue );

Javascript の reduce メソッドが行うことは、アイテムをループすることだけです。ループするたびに、個々のアイテムが返され、reduce() から返された前の値が取得されます。これが reduce() の最初の項目である場合、ゼロが返されます。これがデフォルト値だからです。たとえば、デフォルトを 50 に変更すると、配列に影響します。

ゼロまたはデフォルトの数値を取得して、最初の項目に追加します。前のコードでは合計が 1 になります。次の項目 2 についても同じことを行います。1 + 2 を足して 3 を取得します。最終項目に到達するまで、このプロセスを続けます。

上の表は、この方法を使用するたびに何が起こるかをより明確に示しています。この結果は、initialValue によって異なることに注意してください。

結論

最後に、reduce Javascript は反復的な方法です。インデックスの昇順で各要素に「リデューサー」コールバック関数を適用することにより、配列のすべての項目を単一の値に収集します。 callbackFn が再度呼び出されると、callbackFn の戻り値は常にアキュムレータとして提供されます。 Reduce は、アキュムレータの最後の値から戻り値を返します。これは、配列の最後の反復でコールバック Fn から返された値です ()。

callback-Fn として提供される関数は変更できますが、それが呼び出される配列である reduce() は変更できません。ただし、最初のコールバック Fn の実行前に、配列の長さが保持されることに注意してください。