JavaScriptで配列の合計値を計算する方法：forループ、reduce、jQuery、その他
JavaScript、jQuery、および配列を使用して数値の合計を見つける方法
前提条件
このチュートリアルを理解するには、以下の知識が必要です。
- JavaScript の基本的な構文
- 配列の操作方法
- jQuery の基本的な構文 (オプション)
方法
数値の合計を見つける方法はいくつかあります。ここでは、最も一般的な方法をいくつか紹介します。
for ループを使用して配列の各要素を繰り返し、合計値を累積していく方法です。
// 配列を定義
const numbers = [1, 2, 3, 4, 5];
// 合計値を初期化
let sum = 0;
// 配列の各要素をループ
for (let i = 0; i < numbers.length; i++) {
// 合計値に現在の要素を加算
sum += numbers[i];
}
// 合計値を出力
console.log(sum); // 15
reduce メソッドを使用して、配列の要素を単一の値に減らすことができます。
// 配列を定義
const numbers = [1, 2, 3, 4, 5];
// 合計値を計算
const sum = numbers.reduce((a, b) => a + b, 0);
// 合計値を出力
console.log(sum); // 15
jQuery を使用している場合は、$.sum() メソッドを使用して配列の合計値を簡単に計算できます。
// jQuery ライブラリを読み込む
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
// 配列を定義
const numbers = [1, 2, 3, 4, 5];
// 合計値を計算
const sum = $.sum(numbers);
// 合計値を出力
console.log(sum); // 15
このチュートリアルでは、JavaScript、jQuery、および配列を使用して数値の合計を見つける方法を説明しました。
どの方法を使用するかは、状況によって異なります。 for ループは最も汎用性の高い方法ですが、reduce メソッドはより簡潔に記述できます。 jQuery を使用している場合は、$.sum() メソッドを使用するとさらに簡単に計算できます。
// 配列を定義
const numbers = [1, 2, 3, 4, 5];
// 合計値を初期化
let sum = 0;
// 配列の各要素をループ
for (let i = 0; i < numbers.length; i++) {
// 合計値に現在の要素を加算
sum += numbers[i];
}
// 合計値を出力
console.log(sum); // 15
reduce メソッドを使用する
// 配列を定義
const numbers = [1, 2, 3, 4, 5];
// 合計値を計算
const sum = numbers.reduce((a, b) => a + b, 0);
// 合計値を出力
console.log(sum); // 15
jQueryを使用する
// jQuery ライブラリを読み込む
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
// 配列を定義
const numbers = [1, 2, 3, 4, 5];
// 合計値を計算
const sum = $.sum(numbers);
// 合計値を出力
console.log(sum); // 15
説明
上記のコードは、すべて同じ結果を出力します。
for ループを使用する
numbers変数は、数値の配列を定義します。sum変数は、合計値を格納するために使用されます。forループは、numbers配列のすべての要素をループします。- ループの各反復で、現在の要素の値が
sum変数に加算されます。 - ループが完了したら、
sum変数は配列の合計値を格納します。 - 最後に、
console.log()関数を使用して、合計値を出力します。
reduceメソッドは、2 つの引数を受け取ります。- 最初の引数は、累積値を計算するための関数です。
- 2 番目の引数は、初期値です。
- 関数は、2 つの引数を受け取ります。
- 最初の引数は、前の累積値です。
- 関数は、2 つの引数を合計して、新しい累積値を返します。
reduceメソッドは、配列のすべての要素を処理し、最終的な累積値を返します。
このコードでは、jQuery の $.sum() メソッドを使用して配列の合計値を計算します。
$.sum()メソッドは、配列を単一の引数として受け取ります。
数値の合計を見つける他の方法
// 配列を定義
const numbers = [1, 2, 3, 4, 5];
// 合計値を計算
const sum = numbers.reduce((a, b) => a + b);
// 合計値を出力
console.log(sum); // 15
このコードは、上記の例 2 と同じように動作します。
for...of ループは、配列の各要素をループするために使用できます。
// 配列を定義
const numbers = [1, 2, 3, 4, 5];
// 合計値を初期化
let sum = 0;
// 配列の各要素をループ
for (const number of numbers) {
// 合計値に現在の要素を加算
sum += number;
}
// 合計値を出力
console.log(sum); // 15
forEach メソッドは、配列の各要素に対して関数を呼び出すために使用できます。
// 配列を定義
const numbers = [1, 2, 3, 4, 5];
// 合計値を初期化
let sum = 0;
// 配列の各要素に対して関数を呼び出す
numbers.forEach(number => {
// 合計値に現在の要素を加算
sum += number;
});
// 合計値を出力
console.log(sum); // 15
スプレッド構文を使用して、配列の要素を個別の引数として関数に渡すことができます。
// 配列を定義
const numbers = [1, 2, 3, 4, 5];
// 合計値を計算
const sum = Math.max(...numbers);
// 合計値を出力
console.log(sum); // 15
このコードは、Math.max() 関数を使用して、配列の最大値を計算します。最大値は配列の合計値と同じであるため、このコードを使用して合計値を取得できます。
数値の合計を見つける方法はいくつかあります。どの方法を使用するかは、状況によって異なります。
- 最も汎用性の高い方法は、
forループを使用する方法です。 - 最も簡潔な方法は、
reduceメソッドを使用する方法です。
上記以外にも、スプレッド構文など、さまざまな方法があります。
どの方法を使用しても、同じ結果を得ることができます。
javascript jquery arrays
