JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで配列の中央値を計算する方法をわかりやすく解説

中央値（メジアン）とは、数値データを小さい順に並べたときにちょうど中央に位置する値のことです。JavaScriptで配列の中央値を求めるには、まず配列をソートし、その後要素数に応じて処理を分けます。要素数が奇数の場合は中央の1つの要素を、偶数の場合は中央に近い2つの要素の平均値を中央値として返します。

中央値の計算手順

  1. 配列をソートする － 数値配列の場合、sort() メソッドに比較関数 (a, b) => a - b を渡して正しく昇順ソートします。
  2. 中央のインデックスを求める － Math.floor(arr.length / 2) で中央位置を整数として取得します。
  3. 要素数の判定を行う － 要素数が奇数なら中央の要素をそのまま表示し、偶数なら中央の2つの要素の平均を計算します。

サンプルコード

以下は、「Calculate」ボタンをクリックすると配列の中央値を計算して画面に表示する、完全なHTMLのサンプルです。

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,
    .sample {
        font-size: 18px;
        font-weight: 500;
        color: blueviolet;
    }
    .sample {
        color: red;
    }
</style>
</head>
<body>
<h1>Calculating median of an array</h1>
<div><pre class="sample"></pre></div>
<div class="result"></div>
<button class="Btn">Calculate</button>
<h3>Click on the above button to calculate the median of the above array</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let sampleEle = document.querySelector(".sample");
    let arr = [1, 5, 6, 99, 12, 11, 22];
    sampleEle.innerHTML = arr;
    BtnEle.addEventListener("click", () => {
        let middle = Math.floor(arr.length / 2);
        arr = [...arr].sort((a, b) => a - b);
        if (arr.length % 2 !== 0) {
            resEle.innerHTML = "Median = " + arr[middle];
        } else {
            resEle.innerHTML = "Median = " + (arr[middle - 1] + arr[middle]) / 2;
        }
    });
</script>
</body>
</html>

実行結果

JavaScriptで配列の中央値を計算する方法をわかりやすく解説

「Calculate」ボタンをクリックすると －

JavaScriptで配列の中央値を計算する方法をわかりやすく解説

コードのポイント

  • スプレッド構文 [...arr] を使うことで、元の配列を変更せずにコピーした配列をソートしています。元データを保持したい場合に便利なテクニックです。
  • sort() に比較関数を指定しないと配列が文字列としてソートされてしまうため、数値配列では必ず (a, b) => a - b を指定しましょう。
  • Math.floor() によって小数点以下を切り捨て、中央のインデックスを整数で求めています。
  1. JavaScriptにおける配列の分割代入（Destructuring）の基本と使い方

    分割代入（Destructuring）とは、配列から値を取り出して個別の変数に展開するための構文です。ES2015（ES6）で導入されたこの機能を使うと、配列の各要素を簡潔かつ読みやすく変数に割り当てることができます。 配列の分割代入のサンプルコード 以下は、JavaScriptで配列の分割代入を行うコード例です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport&quo

  2. JavaScriptで配列の平均値を計算する方法

    JavaScriptで配列の平均値を求めるには、配列内のすべての要素を合計し、その合計を配列の長さ（要素数）で割ります。要素の合計を求めるには、forEach()メソッドやreduce()メソッドを使うと簡単に実装できます。コード例<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initia