ホームページ > 記事 > ウェブフロントエンド > JavaScript でアキュムレータとオブジェクトの各キーに関数を適用するにはどうすればよいですか?
JavaScript でアキュムレータとオブジェクトの各キーに関数を適用するにはどうすればよいですか?
- 王林転載
- 2023-08-25 17:33:061378ブラウズ
JavaScript では、reduce() メソッドを使用して、アキュムレータとオブジェクトの各キーに (左から右に) 関数を適用できます。
reduce() メソッドは、指定された配列を受け取り、最初のパラメータとしてコールバック関数を受け取ります。詳細については、arrayreduce() を参照してください。このメソッドの構文を見てみましょう。
構文
array array.reduce(callback[, initialValue]);
パラメータ
コールバック - 配列内の値ごとに実行される関数。
initialValue - コールバックの最初の呼び出しの最初の引数として使用されるオブジェクト。
Callback この関数は 4 つのパラメータを渡します
最初のパラメータはアキュムレータで、前のコールバック関数です。呼び出しの結果、またはこれが最初の呼び出しの場合は初期値。
2 番目のパラメータは、現在処理されているキーです。
3 番目のパラメータは、現在処理されているキーです。処理中の値。
4 番目のパラメータは、現在処理中のインデックスです。
次に、reduce() メソッドはアキュムレータを返します。
reduce() メソッドの適用
reduce() メソッドがどのように機能するかを理解するために、簡単な例を見てみましょう。
オブジェクトの配列があり、各オブジェクトには名前と値の属性があります。値を合計するには、reduce() メソッドを使用します。
これを実現するには、アキュムレータ (前のコールバック関数呼び出しの結果) と処理する現在の値を受け取るコールバック関数を渡します。その後、コールバック関数はアキュムレータに現在の値を加えた値を返します。
例
<html>
<head>
<title>Examples</title>
</head>
<body>
<div id="result"></div>
<script>
let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
let sum = arr.reduce((acc, cur) => acc + cur.value, 0);
document.getElementById("result").innerHTML = sum;
</script>
</body>
</html>上記のプログラムにはオブジェクトの配列があり、各オブジェクトには名前と値の属性があります。値を合計するには、reduce() メソッドを使用します。
コールバック関数 ((acc, cur) => acc cur.value) を渡します。これは、処理中のアキュムレーター acc (前のコールバック関数呼び出しの結果) を受け入れます。現在値cur.その後、コールバック関数はアキュムレータに現在の値を加えた値を返します。
次に、reduce() メソッドは、すべての値の合計であるアキュムレータを返します。
reduce() を使用する利点reduce() を使用する利点の 1 つは、コードを読みやすくできることです。
たとえば、上記の配列の値を合計したい場合は、for ループを使用することもできます。
例
<html>
<head>
<title>Using for loop</title>
</head>
<body>
<h2> Using for loop to sum the values of objects in an array</h2>
<div id="result"></div>
<script>
let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum += arr[i].value;
}
document.getElementById("result").innerHTML = sum
</script>
</body>
</html>上記の reduce() メソッドと for ループはどちらも同じ結果をもたらします。ただし、reduce() メソッドはより簡潔で読みやすいです。
reduce() を使用するもう 1 つの利点は、データの並列処理に使用できることです。.
たとえば、オブジェクトの配列がある場合、各オブジェクトname と value 属性があり、各オブジェクトを並行して処理したい場合は、map () メソッドを使用できます。
let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
let results = arr.map(obj => { // do something with obj });ただし、データを順次処理したい場合は、reduce() メソッドを使用できます。
let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
let result = arr.reduce((acc, obj) => { // do something with obj and return the result }, initialValue);結論
このチュートリアルでは、reduce() メソッドを使用してアキュムレータとオブジェクトの各キーに関数を適用する方法を説明しました。また、他のメソッドと比較して、reduce() を使用することのいくつかの利点も確認しました。
以上がJavaScript でアキュムレータとオブジェクトの各キーに関数を適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。