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

JavaScript の配列はインデックスが 0 から始まるため、array[0] で配列を変更せずに最初の要素を読み取れます。条件に一致する最初の要素を探す場合は find() を使い、最初の要素を削除する場合に限って shift() を使います。

JavaScript で array[0] を使って配列の最初の要素を取得する

配列の最初の位置のインデックスは 0、2 番目は 1 というように続きます。この例では最初の要素を読み取り、その後に配列を出力します。元の配列が変更されていないことを確認できます。

const fruits = ["apple", "banana", "cherry"];
const firstFruit = fruits[0];
console.log(firstFruit);
console.log(fruits);

この例の出力は次のとおりです。

apple
[ 'apple', 'banana', 'cherry' ]

配列が空の場合、array[0] の評価結果は undefined です。値を使う処理では、要素が存在することを確認してください。条件に基づいて要素を探す場合は、すべての要素を自分で調べる代わりに、配列の find() メソッドを使います。

JavaScript で分割代入を使って配列の最初の要素を取得する

配列の分割代入を使うと、最初の要素を変数に割り当てられます。たとえば const [firstFruit] = fruits; は fruits[0] と同じ値を読み取り、fruits は変更しません。配列に要素がない場合、firstFruit は undefined になります。先頭の要素を 1 つ以上変数に割り当てると周囲のコードが読みやすくなる場合に、この書き方を使います。

JavaScript で find() を使って条件に一致する最初の配列要素を取得する

条件関数で目的の要素を定義できる場合は find() を使います。配列を先頭から調べ、条件関数の評価結果が真となる最初の要素を返します。一致する要素がない場合、結果は undefined です。結果を使う前に、その可能性を処理してください。

たとえば、const firstLongWord = words.find(word => word.length > 5); は 5 文字を超える最初の単語を取得します。値に関係なく最初の要素が必要なだけなら、array[0] のほうが簡潔です。詳しくはJavaScript の配列 find リファレンスを参照してください。このリンク先は英語版です。日本語版のリファレンスはありません。

JavaScript で shift() を使って配列の最初の要素を取得して削除する

引数を指定せずに shift() を呼び出すと、最初の要素を取得して削除できます。削除した値を返し、元の配列を変更します。配列に要素がない場合は undefined を返します。配列を変更する意図がある場合に限って使ってください。元の配列を変更せずに読み取るには、array[0] または分割代入を使います。

最初の一致を取得する方法として filter() が通常適さない理由

filter() は、条件関数を通過したすべての要素を含む新しい配列を返します。一致する要素を集めるために配列全体を調べるので、結果を 1 つだけ必要とする場合には余分な処理が発生し、新しい配列も作られます。最初の一致を探すなら、見つかった時点で処理を止め、その要素を直接返す find() のほうが適しています。

絞り込んだ配列の最初の要素は matches[0] で読み取れますが、一致する要素が 1 つだけ必要なら、その配列を作る必要はありません。絞り込んだ配列に対して shift() を呼び出しても、その配列から要素が削除されるだけで、元の配列は変わりません。一致する要素をすべて取得する場合は filter() を使います。