JavaScriptで配列の最後の要素を取得・表示する方法
配列の最後の要素を取得して画面に表示するには、pop()メソッドを利用するのが手軽です。以下に、ボタンをクリックすると配列の最後の要素を表示するサンプルコードを示します。
コード例
<!DOCTYPE html>
<html lang="ja">
<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: rebeccapurple;
}
.result {
color: red;
}
</style>
</head>
<body>
<h1>配列の最後の要素を出力するJavaScriptコード</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">ここをクリック</button>
<h3>上のボタンをクリックすると、配列の最後の要素が表示されます</h3>
<script>
let resEle = document.querySelector(".result");
let sampeEle = document.querySelector(".sample");
let arr = ["A", 1, 2, 3, "B", "D"];
sampeEle.innerHTML = 'arr = '+arr;
document.querySelector(".Btn").addEventListener("click", () => {
resEle.innerHTML = "配列arrの最後の要素 = " + arr.pop();
});
</script>
</body>
</html>
出力結果
上記のコードを実行すると、次のような画面が表示されます。
「ここをクリック」ボタンをクリックすると −
コードの解説
このサンプルでは、ボタンがクリックされるとイベントリスナー内でarr.pop()が実行されます。pop()メソッドは、配列の末尾の要素を取り除いたうえで、その要素を戻り値として返します。この戻り値をそのまま画面に表示することで、配列の最後の要素を出力しています。
なお、pop()は呼び出すと元の配列から要素が削除される点に注意してください。元の配列を変更せずに最後の要素だけを取得したい場合は、arr[arr.length - 1]や、ES2022で追加されたarr.at(-1)を使う方法が便利です。
-
JavaScriptで配列の各要素に二次関数f(x)を適用してソートする方法
問題次のような二次関数が与えられています。f(x) = ax² + bx + cここで、a、b、c は3つの定数です。この課題では、ソート済みの整数配列 arr を第1引数に、a、b、c をそれぞれ第2、第3、第4引数として受け取るJavaScript関数を作成します。この関数は、配列 arr の各要素に関数 f(x) を適用し、その結果を昇順にソートした配列を返す必要があります。例えば、関数への入力が次のようであった場合を考えます。const arr = [-8, -3, -1, 5, 7, 9]; const a = 1; const b = 4; const c = 7;この場合、期待さ
-
ソート済み配列から25%超出現する要素をJavaScriptで効率的に見つける方法
問題概要本記事では、昇順にソートされた整数配列を受け取り、全体の4分の1（25%）を超える回数出現している整数を返すJavaScript関数を実装します。このような特別な出現頻度を持つ要素は、配列内にちょうど1つだけ存在することが保証されているため、工夫された探索戦略によって高速に答えを導き出せます。入力例と出力例たとえば、関数に次の配列を渡した場合を考えてみましょう。const arr = [3, 5, 5, 7, 7, 7, 7, 8, 9];期待される出力は以下の通りです。const output = 7;配列の長さは9なので、その4分の1は2.25です。7は合計4回出現しており、2.2