配列の要素にアクセス | 配列の定義 | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

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

JavaScriptでは、配列の要素にアクセスするためにインデックスを使用します。インデックスは配列の中の各要素の位置を示す数値で、0から始まることに注意が必要です。これにより、最初の要素にはインデックス0でアクセスし、2番目の要素には1というように順にアクセスできます。

配列の要素にアクセスする例

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

console.log(fruits[0]);  // "apple"
console.log(fruits[1]);  // "banana"
console.log(fruits[2]);  // "cherry"

この例では、fruits配列の各要素にインデックスを使用してアクセスしています。インデックス0は"apple"、1は"banana"、2は"cherry"です。

配列の長さとアクセスの関係

配列の要素にアクセスする際、配列の長さを超えたインデックスを指定すると、undefinedが返されます。これは、指定したインデックスに対応する要素が存在しないためです。

配列の長さを超えたアクセスの例

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

console.log(fruits[3]);  // undefined

この例では、fruits配列に存在しないインデックス3にアクセスしようとしていますが、undefinedが返されます。

配列の要素の変更

インデックスを使って配列の要素を取得するだけでなく、その要素の値を変更することもできます。特定のインデックスを指定して、新しい値を代入することで、配列の要素を更新できます。

配列の要素を変更する例

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

// 2番目の要素を変更
fruits[1] = "orange";

console.log(fruits);  // ["apple", "orange", "cherry"]

この例では、インデックス1の要素("banana")を"orange"に変更しています。結果として、fruits配列は["apple", "orange", "cherry"]となります。

配列の長さを動的に変更する

配列の要素数(長さ)を動的に変更することも可能です。新しい要素を追加したり、既存の要素を削除することで、配列の長さが変わります。配列に要素を追加するためには、pushメソッドを使用し、削除するにはpopメソッドなどを使用します。

要素の追加と削除の例

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

// 要素を追加
fruits.push("cherry");

console.log(fruits);  // ["apple", "banana", "cherry"]

// 最後の要素を削除
fruits.pop();

console.log(fruits);  // ["apple", "banana"]

この例では、pushメソッドを使って"cherry"を配列に追加し、popメソッドで最後の要素を削除しています。

配列の要素にアクセスするメソッド

JavaScriptには、配列の要素にアクセスするためのさまざまなメソッドがあります。例えば、atメソッドを使って特定のインデックスにアクセスしたり、sliceメソッドを使って配列の一部を取得することが可能です。

配列の要素にアクセスするメソッドの比較

メソッド 説明
at() 指定したインデックスにある要素を返す。負の値で後ろから数えることも可能。 fruits.at(-1)で最後の要素にアクセス。
slice() 配列の一部を取得。元の配列は変更されない。 fruits.slice(1, 3)で2番目と3番目の要素を取得。
indexOf() 指定した要素が最初に出現するインデックスを返す。存在しない場合は-1 fruits.indexOf("banana")で"banana"のインデックスを取得。

まとめ

JavaScriptの配列の要素にアクセスする方法は、インデックスを使うシンプルな方法から、atsliceなどのメソッドを使った柔軟なアクセスまで様々です。配列の長さに注意しながら、適切なメソッドを選ぶことで、効率的に配列を操作することができます。