JavaScript/TypeScript: 配列の最後の要素を賢く操作！豊富な7つの方法と比較

2024-05-20

TypeScript配列の最後の要素にアクセスする方法

array[array.length - 1]

これは最もシンプルな方法で、配列の長さを取得し、1を引いたインデックスを使って最後の要素にアクセスします。

const numbers = [1, 2, 3, 4, 5];
const lastNumber = numbers[numbers.length - 1];
console.log(lastNumber); // 5を出力

利点:

シンプルで分かりやすい

配列の長さを取得する必要があるため、パフォーマンス的にわずかに非効率
空の配列に対してアクセスするとエラーが発生する

array.at(-1)

これはES2020で導入された新しい方法で、array.length - 1 と同じように最後の要素にアクセスできますが、より簡潔で分かりやすい書き方です。

const numbers = [1, 2, 3, 4, 5];
const lastNumber = numbers.at(-1);
console.log(lastNumber); // 5を出力

array.length - 1 よりも簡潔で分かりやすい
空の配列に対して undefined を返すため、エラーが発生しない

比較的新しく導入された方法なので、古いブラウザではサポートされていない可能性がある

array.slice(-1)[0]

これは、slice メソッドを使用して配列の最後の要素のみを含む新しい配列を作成し、その先頭の要素にアクセスする方法です。

const numbers = [1, 2, 3, 4, 5];
const lastNumber = numbers.slice(-1)[0];
console.log(lastNumber); // 5を出力

最後の要素だけでなく、配列の最後のn個の要素にアクセスできる

他の方法と比べて冗長な書き方

pop メソッド

これは、配列の最後の要素を削除して返すメソッドです。最後の要素にアクセスしたいだけの場合、この方法はあまり適切ではありませんが、要素を削除して同時にアクセスしたい場合は有用です。

const numbers = [1, 2, 3, 4, 5];
const lastNumber = numbers.pop();
console.log(lastNumber); // 5を出力
console.log(numbers); // [1, 2, 3, 4]を出力

最後の要素を削除して同時にアクセスできる

配列を実際に変更してしまう

上記のように、TypeScriptで配列の最後の要素にアクセスするにはいくつかの方法があります。状況に応じて適切な方法を選択してください。

シンプルで分かりやすい方法を求める場合は array[array.length - 1] または array.at(-1) を使用します。
空の配列に対してエラーが発生したくない場合は array.at(-1) を使用します。
最後の要素だけでなく、配列の最後のn個の要素にアクセスしたい場合は array.slice(-1)[0] を使用します。
要素を削除して同時にアクセスしたい場合は pop メソッドを使用します。

上記以外にも、以下のような方法で最後の要素にアクセスすることもできます。

forループを使って最後の要素にたどり着く
配列を反転させて最初の要素にアクセスする

これらの方法は、上記の方法よりも効率が悪かったり、コードが冗長になったりする可能性があるため、あまり一般的ではありません。

// サンプルコード

const numbers = [1, 2, 3, 4, 5];

// 方法 1: array[array.length - 1]
const lastNumber1 = numbers[numbers.length - 1];
console.log(lastNumber1); // 5を出力

// 方法 2: array.at(-1)
const lastNumber2 = numbers.at(-1);
console.log(lastNumber2); // 5を出力

// 方法 3: array.slice(-1)[0]
const lastNumber3 = numbers.slice(-1)[0];
console.log(lastNumber3); // 5を出力

// 方法 4: pop()
const lastNumber4 = numbers.pop();
console.log(lastNumber4); // 5を出力
console.log(numbers); // [1, 2, 3, 4]を出力

array[array.length - 1]：この方法は、配列の長さを取得し、1を引いたインデックスを使って最後の要素にアクセスします。
array.at(-1)：この方法は、ES2020で導入された新しい方法で、より簡潔に最後の要素にアクセスできます。
pop メソッド：この方法は、配列の最後の要素を削除して返すメソッドです。

各方法の詳細については、上記の解説を参照してください。

TypeScriptで配列の最後の要素にアクセスするその他の方法

forループを使う

const numbers = [1, 2, 3, 4, 5];

for (let i = numbers.length - 1; i >= 0; i--) {
  if (i === 0) {
    console.log(numbers[i]); // 5を出力
  }
}

このコードでは、for ループを使用して配列を反復処理し、最後の要素にたどり着いたらその要素を出力します。

const numbers = [1, 2, 3, 4, 5];
numbers.reverse();
const lastNumber = numbers[0];
console.log(lastNumber); // 5を出力

このコードでは、reverse メソッドを使用して配列を反転させ、最初の要素が最後の要素になるようにします。その後、最初の要素にアクセスして出力します。

ジェネレータを使う

const numbers = [1, 2, 3, 4, 5];

function* lastElementGenerator(numbers: number[]) {
  for (const number of numbers) {
    yield number;
  }
}

const lastElement = [...lastElementGenerator(numbers)][-1];
console.log(lastNumber); // 5を出力