このプログラムでは、Math.min()とMath.max()メソッドを使用して指定された数値の配列から最小値と最大値を求める方法を紹介します。
最小値、最大値を求めるプログラム
以下のコードでは、数値の配列[10, 5, 20, 8, 15]から最小値と最大値を計算し、その結果を表示しています。
HTMLとJavaScriptコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>指定範囲内で最小値、最大値を求める方法</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
}
pre {
background: #f4f4f4;
border-left: 3px solid #ccc;
padding: 10px;
margin: 20px 0;
}
</style>
<script>
window.onload = function() {
// 最小値と最大値を求める関数
function findMinMax(values) {
const min = Math.min(...values); // 配列から最小値を求める
const max = Math.max(...values); // 配列から最大値を求める
return { min, max };
}
// テスト用の数値の配列
const numbers = [10, 5, 20, 8, 15];
// 最小値と最大値を求める
const result = findMinMax(numbers);
// 結果をHTMLに表示
document.getElementById('minValue').textContent = `最小値: ${result.min}`;
document.getElementById('maxValue').textContent = `最大値: ${result.max}`;
}
</script>
</head>
<body>
<h1>指定範囲内で最小値、最大値を求める方法</h1>
<div id="minValue"></div>
<div id="maxValue"></div>
</body>
</html>プログラムの解説
このプログラムでは、Math.min()およびMath.max()メソッドを使用して数値の配列から最小値と最大値を計算しています。両メソッドとも、与えられた数値のリストの中から最小値または最大値を返します。
以下はMath.min()とMath.max()メソッドの注意点です。
- 両メソッドは複数の引数を受け取ることができ、それらの中から最小値または最大値を返します。
- 配列を渡す場合、スプレッド構文
...を使用して展開する必要があります。例えば、Math.min(...[10, 5, 20])とすることで配列を展開できます。 - 引数に数値以外のものが含まれる場合、
NaNが返されますので、数値のみを渡すことが重要です。 - 引数が渡されない場合は、
Math.min()はInfinityを、Math.max()は-Infinityを返します。