JavaScriptで配列最後の要素をスマートに取得するには

JavaScriptでの配列最後の要素を取り出す方法。

この取得方法には2種類あって、
愚直な方法と少しスマートな方法の2つあります。

それをコード例と一緒にまとめました。

方法1.インデックス(添え字)から取得

1つめはよくあるやり方です。

インデックス(添え字)で取得する方法

一番簡単な例はこういうコードです。

※ インデックスは0から始まる。念のため...

一番簡単でなじみ深い書き方だと思います。

 

ただ、配列名が長いと冗長になのが欠点・・・

▼ 極端な例を出すならこういう感じ

こういうのは少しスマートではありません。

もっと助長性の低い = 無駄のない書き方もあります。

方法2.sliceメソッドを使って取得

2つめは sliceメソッド を使うこと

配列の一部を切り出せる関数ですね。

▼ MDNでのsliceメソッドの説明

slice() メソッドは begin から end まで選択された配列の一部をシャローコピーして、新しい配列オブジェクトを返します (end は含まれません)。元の配列は変更されません。

arr.slice([begin[, end]])

begin Optional
取り出しの開始位置を示す 0 から始まるインデックスです。

end Optional
取り出しを終える直前の位置を示す 0 から始まるインデックスです。 slice は end 自体は含めず、その直前まで取り出します。

引用元 : Array.prototypr.slice() - JavaScript | MDN

このslice関数には負のインデックスも渡せます。

負のインデックスを渡すと配列最後から指定することができ、たとえば slice(-3);  だったら配列の最後から3つの要素を取り出すという処理も可能なんです。

 

これを利用して最後の要素を取り出してみます。

▼ 配列最後の要素を取り出すコード例

上コードの sweets.slice(-1);  で配列1番目を返してくれるけど、これは配列。値として取り出すには sweets.slice(-1)[0]  で要素にアクセスしないとダメです。

それさえ気を付ければOK。

蛇足.配列のマイナス添え字の挙動について

少しだけ関連があるので補足。

今紹介したコードをもう1度見てみます。

もし仮に配列が空っぽだった場合・・・添え字(インデックス)は -1 になってしまいます。その場合の挙動には注意が必要だと思います。

 

なぜならエラーが一切でないからです。

MDNではマイナス添え字はこう説明されてます。

▼ 配列要素へのアクセスより抜粋

JavaScript の配列のインデックスは 0 から始まるので、配列の最初の要素はインデックス 0 にあります。そして、最後の要素のインデックスは length プロパティの値から 1 を引いた値になります。不正なインデックス番号を使った場合は undefined を返します。

引用元 : Array - JavaScript | MDN

マイナス添え字は undefined  になるとのこと

実際に次のコードで確認してみました。

確かに undefine  になってます。

エラーが出ないからマイナス添え字には要注意ですね。

最後要素の取得方法のまとめ

次の2つのどちらか

  • インデックス(添え字)
    たとえば sweets[sweets.length-1];  みたいな感じで。ただし長い配列名だと冗長(=無駄が多い)書き方になってしまうのが欠点。
  • sliceメソッドを使う
    あるいは sweets.slice(-1)[0];  のようにしても取得可能。こちらは少し分かりにくいけど、助長性を限りなく低くできる。

2番目はちょっと分かりにくいのが欠点ですね。

そこは場面に応じて使い分けた方がいいと思います。

以上、JavaScriptでの最後要素取得でした、ではまた(^^)/~~~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください