JavaScriptのatメソッドの使い方！配列要素にアクセス

JavaScriptで配列の要素にアクセスするatメソッドについて解説します。
atメソッドを使うことで、正のインデックスだけでなく負のインデックスを使って配列の要素にアクセスできるようになり、コードがより簡潔になります。

実際に動くサンプルを使って、以下の操作を解説します。

at()メソッドの基本的な使い方

at()メソッドは、配列から特定のインデックスにある要素を取得するために使用します。
基本的な構文は以下のとおりです。

array.at(index)

indexには、取得したい要素のインデックスを指定します。

正のインデックス

正のインデックスを指定すると、配列の先頭から数えて指定された位置の要素を取得します。

const fruits = ['apple', 'banana', 'orange', 'grape'];

console.log(fruits.at(0)); // 結果：apple
console.log(fruits.at(2)); // 結果：orange

fruitsという配列を作成し、at()メソッドを使ってインデックス0と2の要素を取得しています。
結果として、それぞれ’apple’と’orange’が出力されます。

これは従来のブラケット記法fruits[0]、fruits[2]と同じ動作です。

負のインデックス

at()メソッドの特徴は、負のインデックスを指定できることです。
負のインデックスを指定すると、配列の末尾から数えて指定された位置の要素を取得します。

const fruits = ['apple', 'banana', 'orange', 'grape'];

console.log(fruits.at(-1)); // 結果：grape
console.log(fruits.at(-3)); // 結果：banana

at(-1)は配列の最後の要素（’grape’）を、at(-3)は最後から3番目の要素（’banana’）を取得しています。
これは従来のブラケット記法では実現が難しかった操作です。

従来のブラケット記法との違い

従来のブラケット記法[]でも配列の要素にアクセスできますが、負のインデックスは使用できません。
配列の最後の要素にアクセスする場合は、array[array.length - 1]のように記述する必要がありました。

const fruits = ['apple', 'banana', 'orange', 'grape'];

console.log(fruits[fruits.length - 1]); // 結果：grape

上記のように、ブラケット記法で最後の要素にアクセスするには、lengthプロパティを使ってインデックスを計算する必要があります。
at()メソッドを使えば、fruits.at(-1)と簡潔に記述できます。

at()メソッドを使うメリット

at()メソッドを使う主なメリットは、簡潔にコードが書けて可読性が向上することです。

負のインデックスが使えることで、配列の末尾からのアクセスが非常に簡潔に記述できます。
例えば、最後の要素を取得する場合、array[array.length – 1]と記述する代わりにarray.at(-1)と簡潔に記述できます。

JavaScriptのatメソッドの使い方まとめ

今回はJavaScriptのat()メソッドの使い方について解説しました。
記事の内容をまとめます。