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

JavaScriptで配列の最初の要素と最後の要素を取得する方法

配列とは、複数の要素をひとまとめにして管理するデータ構造です。各要素にはそれぞれ固有のインデックス番号が割り当てられており、このインデックスを使うことで任意の要素へアクセスできます。ただし、最後の要素に関しては、配列に含まれる要素数が分からなければインデックスも確定しないため、少し工夫が必要です。本記事では、これらの方法をわかりやすく解説します。

最初の要素へのアクセス

JavaScriptでは配列のインデックスは「0」から始まるため、最初の要素の位置は常に分かっています。そのため、値の取得は非常に簡単です。配列を arr とすると、最初の要素の値は arr[0] で表されます。

サンプルコード

次の例では、array1 と array2 という2つの配列を用意しています。どちらも「4」つの要素を持ち、最初の要素のインデックスは「0」なので、array1[0] および array2[0] を参照することで先頭の値を取得できます。

<html>
<body>
<script>
    var array1 = ["Tutorix","Tutorialspoint","Javascript","Java"];
    document.write(array1[0]);
    document.write("</br>");
    var array2 = ["Elon musk","Bilgates","Larry page","slim helu"];
    document.write(array2[0]);
</script>
</body>
</html>

実行結果

Tutorix
Elon musk

最後の要素へのアクセス

配列の要素数が事前に分かっている場合は、インデックスを直接指定すれば最後の要素を取得できます。例えば、arr という配列に5つの要素があるなら、最後の要素は arr[4] です。

しかし、実際の開発では要素数が不定の場合も多く、その際にはロジックで対応する必要があります。ポイントは、「配列の長さ（length）から1を引いた値」が最後の要素のインデックスになるという点です。length が「4」であれば、最後の要素は arr[3] となります。

サンプルコード

次の例では、array1 と array2 のそれぞれの最後の要素を取得し、結果を出力しています。前者の配列では通常のインデックス指定を使用し、後者の配列では配列のlengthプロパティを利用した方法を採用しています。

<html>
<body>
<script>
   var array1 = ["Javascript","Java","Spring","springboot"];
   document.write(array1[3]);
   document.write("</br>");
   var array2 = ["Elon musk", "Bilgates", "Larry page", "slim helu", "jackma", "Ambani"];
   document.write(array2[array2.length-1]);
</script>
</body>
</html>

実行結果

springboot
Ambani

補足：at()メソッドを使うモダンな書き方（ES2022以降）

比較的新しいブラウザ環境やNode.jsでは、ES2022で導入された at() メソッドを使うとさらに直感的に記述できます。at() は負のインデックスをサポートしているため、arr.at(-1) と書くだけで末尾の要素を取得できます。

var array = ["Elon musk", "Bilgates", "Larry page"];
document.write(array.at(-1)); // "Larry page" が出力される

length - 1 を使う従来の方法との違いは、可読性の高さにあります。要素数を意識せずに「最後から1番目」という意図をそのままコードに反映できるため、モダンな開発現場では at(-1) が好まれる傾向にあります。ただし、古いブラウザへの対応が必要な場合は、引き続き arr[arr.length - 1] を使用しましょう。

  1. JavaScriptで特定のノードの最初・最後の子ノードを取得する方法

    JavaScriptでは、特定のノードの最初の子ノードと最後の子ノードを取得するために、それぞれ firstChild と lastChild プロパティが用意されています。この記事では、両者の基本的な使い方をサンプルコードと出力結果付きでわかりやすく解説します。 firstChild とは firstChild は、指定したノードの最初の子ノードを返すプロパティです。なお、テキストノードやコメントノードも「子ノード」に含まれるため、HTMLの書き方によっては意図しないノードが返ることがあります（詳細は後述の注意点を参照）。 構文 node.firstChild; 使用例 次の例では、u

  2. JavaScriptで配列の最後の要素を取得・表示する方法

    配列の最後の要素を取得して画面に表示するには、pop()メソッドを利用するのが手軽です。以下に、ボタンをクリックすると配列の最後の要素を表示するサンプルコードを示します。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &