ブラウザ対応情報付き：JavaScriptで配列の最後の要素を取得する

2024-04-02

JavaScriptで配列の最後の要素を取得する

at() メソッドを使う（推奨）

ES2022で導入された at() メソッドは、配列の要素を取得する最もモダンな方法です。負のインデックスを渡すことで、末尾から要素を取得することができます。

const fruits = ["apple", "banana", "orange"];

// 末尾の要素を取得
const lastFruit = fruits.at(-1); // "orange"

console.log(lastFruit); // "orange"

at() メソッドは、以下の利点があります。

簡潔で分かりやすいコード
負のインデックスにも対応
配列の長さを変更しない

欠点は、ES2022以前のブラウザではサポートされていないことです。

length プロパティと減算を使う

従来の方法として、length プロパティと減算演算子を使って、最後の要素のインデックスを取得する方法があります。

const fruits = ["apple", "banana", "orange"];

// 配列の長さを取得
const length = fruits.length;

// 末尾の要素のインデックスを取得
const lastIndex = length - 1;

// 末尾の要素を取得
const lastFruit = fruits[lastIndex]; // "orange"

console.log(lastFruit); // "orange"

この方法は、以下の利点があります。

すべてのブラウザで動作する

欠点は、コードが冗長になることと、length プロパティの値を直接変更してしまう可能性があることです。

slice() メソッドを使って、最後の要素だけを含む新しい配列を作成し、その配列の最初の要素を取得する方法もあります。

const fruits = ["apple", "banana", "orange"];

// 末尾の要素だけを含む新しい配列を作成
const lastFruitArray = fruits.slice(-1);

// 末尾の要素を取得
const lastFruit = lastFruitArray[0]; // "orange"

console.log(lastFruit); // "orange"

欠点は、コードが冗長になることと、新しい配列を作成するため、パフォーマンスが少し悪くなる可能性があることです。

その他の方法

上記以外にも、pop() メソッドや reduce() メソッドを使って最後の要素を取得する方法もあります。

pop() メソッド

const fruits = ["apple", "banana", "orange"];

// 末尾の要素を取得して削除
const lastFruit = fruits.pop(); // "orange"

console.log(lastFruit); // "orange"

reduce() メソッド

const fruits = ["apple", "banana", "orange"];

// 末尾の要素を取得
const lastFruit = fruits.reduce((acc, fruit) => acc = fruit, undefined); // "orange"

console.log(lastFruit); // "orange"

これらの方法は、特殊なケースで役立つ可能性がありますが、一般的には上記の3つの方法の方が使い勝手が良いです。

JavaScriptで配列の最後の要素を取得するには、いくつかの方法があります。どの方法を使うかは、状況やブラウザの対応状況によって異なります。

推奨される方法は、at() メソッドを使うことです。

ES2022以前のブラウザでは、length プロパティと減算を使う方法や slice() メソッドを使う方法など、他の方法を使う必要があります。

// ES2022
const fruits = ["apple", "banana", "orange"];

// at() メソッドを使う
const lastFruitAt = fruits.at(-1); // "orange"

// length プロパティと減算を使う
const lastFruitLength = fruits[fruits.length - 1]; // "orange"

// slice() メソッドを使う
const lastFruitSlice = fruits.slice(-1)[0]; // "orange"

// pop() メソッドを使う
const lastFruitPop = fruits.pop(); // "orange"

// reduce() メソッドを使う
const lastFruitReduce = fruits.reduce((acc, fruit) => acc = fruit, undefined); // "orange"

console.log(`at(): ${lastFruitAt}`);
console.log(`length: ${lastFruitLength}`);
console.log(`slice(): ${lastFruitSlice}`);
console.log(`pop(): ${lastFruitPop}`);
console.log(`reduce(): ${lastFruitReduce}`);

at(): orange
length: orange
slice(): orange
pop(): orange
reduce(): orange

実行環境

このコードは、ES2022に対応したブラウザで実行できます。

注意事項

pop() メソッドを使うと、配列から要素が削除されます。
reduce() メソッドを使う方法は、少し複雑なコードになります。

配列の最後の要素を取得するその他の方法

forループを使う

const fruits = ["apple", "banana", "orange"];

let lastFruit;

for (let i = fruits.length - 1; i >= 0; i--) {
  lastFruit = fruits[i];
  break;
}

console.log(lastFruit); // "orange"

この方法は、すべてのブラウザで動作しますが、コードが冗長になるという欠点があります。

whileループを使う

const fruits = ["apple", "banana", "orange"];

let i = fruits.length - 1;
let lastFruit;

while (i >= 0) {
  lastFruit = fruits[i];
  i--;
}

console.log(lastFruit); // "orange"

この方法は、forループを使う方法と似ていますが、コードが少し短くなります。

配列を逆順に並べ替える

const fruits = ["apple", "banana", "orange"];

fruits.reverse();

const lastFruit = fruits[0];

console.log(lastFruit); // "orange"

この方法は、配列を逆順に並べ替えてから、最初の要素を取得する方法です。ただし、元の配列の順序が変更されてしまうという欠点があります。

ユーティリティ関数を使う

function getLastItem(array) {
  return array[array.length - 1];
}

const fruits = ["apple", "banana", "orange"];

const lastFruit = getLastItem(fruits);

console.log(lastFruit); // "orange"