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

JavaScriptで配列の最後の要素を取得する方法【slice()ほか複数の手法を解説】

JavaScriptで配列の最後の要素を取得したい場合、slice()メソッドを使うのが簡単で確実な方法の一つです。負のインデックスを指定することで、配列の末尾から要素を取り出せます。

slice()メソッドを使った基本的な例

以下のコードでは、slice(-1)によって配列の最後の要素だけを含む新しい配列を作成し、[0]でその値を取り出しています。

<html>
<body>
  <script>
    var array = [30, 40, 50, 60];
    document.write(array.slice(-1)[0]); // 結果: 60
  </script>
</body>
</html>

ポイント

  • slice(-1)は「末尾から1つ目の要素」を意味し、元の配列は変更されません（非破壊的）。
  • 戻り値は配列なので、値そのものを得るには[0]でアクセスします。

その他の取得方法

1. lengthプロパティを使う方法

最も古典的な方法です。配列の長さから1を引いたインデックスにアクセスします。

var array = [30, 40, 50, 60];
console.log(array[array.length - 1]); // 結果: 60

2. at()メソッドを使う方法（ES2022以降）

比較的新しいブラウザ環境では、at()メソッドが便利です。負のインデックスを直接サポートしており、コードがすっきりします。

const array = [30, 40, 50, 60];
console.log(array.at(-1)); // 結果: 60

3. pop()メソッドを使う方法

pop()でも最後の要素を取得できますが、こちらは元の配列から要素を削除してしまう点に注意が必要です。配列を変更しても問題ない場合のみ使用しましょう。

const array = [30, 40, 50, 60];
const last = array.pop();
console.log(last);  // 結果: 60
console.log(array); // 結果: [30, 40, 50]（元の配列が変更される）

まとめ

方法元の配列への影響備考
slice(-1)[0]なし古い環境でも動作する定番の方法
array[array.length - 1]なしシンプルで互換性が高い
at(-1)なしES2022以降。最も読みやすい
pop()あり（要素が削除される）配列を変更してよい場合のみ

用途や対応ブラウザに応じて適切な方法を選択してください。一般的には、元の配列を保持したまま安全に取得できるslice(-1)[0]やat(-1)がおすすめです。

  1. JavaScriptで親要素の子要素を取得する方法【サンプルコード付き】

    JavaScriptでは、親要素が持つchildrenプロパティを参照することで、その直下にある子要素をまとめて取得できます。本記事では、実際に動作するサンプルコードを使いながら、具体的な手順をわかりやすく解説します。 サンプルコード 以下は、JavaScriptを使って親要素（parent1）の子要素を取得し、ボタンのクリックで一括表示させる例です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta nam

  2. Pythonでリストの最後の要素を取得する3つの方法

    このチュートリアルでは、Pythonのリストから最後の要素を取得するさまざまな方法を解説します。代表的な3つの手法を、コード例と実行結果とともに順番に見ていきましょう。1. インデックスを使う方法リストの長さを利用して、最後の要素のインデックス（リストの長さ - 1）を計算することで、最後の要素にアクセスできます。以下のコードを見てみましょう。コード例# リストの初期化 numbers = [1, 2, 3, 4, 5] # 最後の要素を出力 print(fLast element:- {numbers[len(numbers) - 1]})実行結果上記のプログラムを実行すると、次の出力が得ら