More than 1 year has passed since last update.

配列の最後の要素を取得する方法【JavaScript】

Posted at 2022-04-19

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

lengthプロパティを使う方法

const array = ["りんご", "みかん", "ぶどう"];

const last1 = array[array.length - 1];

console.log(array, last1);

// 結果
// ["りんご", "みかん", "ぶどう"]"ぶどう"

１つ目はlengthプロパティを使う方法です。

array.length - 1を指定することで、最後の要素を取得します。

シンプルですが、記述が長くなりがちです。

const array = ["りんご", "みかん", "ぶどう"];

const last2 = array.pop();

console.log(array, last2);

// 結果
// ["りんご", "みかん"]"ぶどう"

2つ目はpop()メソッドを使う方法です。

pop()メソッドは配列の最後の要素を取り除きます。

lengthプロパティを使う方法より短い記述で済みますが、元の配列を直接操作するので注意が必要です。

JavaScriptの配列を操作するメソッドには、「破壊的」なメソッドが存在します。
「破壊的」なメソッドは、元の配列を直接操作（破壊）します。
一方「非破壊的」なメソッドは、元の配列を直接操作せず、配列をコピーしたものに対して操作します。

const array = ["りんご", "みかん", "ぶどう"];

const last3 = array.slice(-1)[0];

console.log(array, last3);

// 結果
// ["りんご", "みかん", "ぶどう"]"ぶどう"

3つ目はslice()メソッドを使う方法です。

slice()メソッドは配列の一部をコピーし、新しい配列を返します。

マイナスのインデックスを指定した場合は末尾からコピーするため、array.slice(-1)は「最後の要素をコピーした配列」となります。
（配列なので最後に[0]を付け足すことで、要素を取得できます）

元の配列を直接操作せず、記述もそこそこわかりやすく書くことができます。

const array = ["りんご", "みかん", "ぶどう"];

const last4 = array.at(-1);

console.log(array, last4);

// 結果
// ["りんご", "みかん", "ぶどう"]"ぶどう"

最後はat()メソッドを使う方法です。

at()メソッドはECMAScript2022から導入されました。

マイナスのインデックスを指定することで、末尾の要素を取得できます。

元の配列を破壊せず、記述も短くわかりやすいです。