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

Shraddha Paghdar 2023年10月12日
  1. JavaScript で find() を使用して最初の配列要素を取得する
  2. JavaScript で array[index] を使用して最初の配列要素を取得する
  3. JavaScript で shift() を使用して最初の配列要素を取得する
  4. JavaScript で filter() を使用して最初の配列要素を取得する
  5. JavaScript で破壊的代入を使用して最初の配列要素を取得する
JavaScript で配列の最初の要素を取得する

配列は、順序付けられた方法で多くの要素を保持するため、プログラミング言語の重要な部分です。それらの要素はすべて、インデックスを介してアクセスされます。JavaScript では、配列は特定のキー(数字キー)の値を保持する通常のオブジェクトです。この記事では、JavaScript で配列の最初の要素を取得する方法を紹介します。

JavaScript は、最初の要素を取得するためのさまざまなメソッドを提供します。それらの方法を学びましょう。

JavaScript で find() を使用して最初の配列要素を取得する

これは JavaScript が提供する組み込みの配列メソッドであり、指定された条件に値が一致する要素を検索します。

JavaScript での find() の構文

Array.prototype.find(element => $condition)

パラメーター

  • $condition:これは必須パラメーターです。ユーザーは配列要素に関連する任意の条件を渡すことができ、条件を満たす最初の一致する要素を見つけようとします。

戻り値

指定された条件に一致する最初の値を返します。一致する条件がない場合は、undefined が返されます。

コード例:

const arrayElements = [5, 10, 0, 20, 45];
const firstElement = arrayElements.find(element => element != undefined);
console.log(firstElement);

出力:

5

JavaScript で array[index] を使用して最初の配列要素を取得する

前に説明したように、各配列要素には一意のインデックスが割り当てられています。配列内の数字の key/index は、0 で始まります。このインデックスを使用すると、JavaScript で配列の最初の要素を取得できます。

JavaScript での array[index] の構文

Array.prototype[$index]

パラメーター

  • $index:取得する要素のインデックスを指定する整数値のみを受け入れる必須パラメーターです。

戻り値

インデックスが指定されている要素を返します。

コード例:

const arrayElements = [5, 10, 0, 20, 45];
const firstElement = arrayElements[0];
console.log(firstElement);

出力:

5

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

これは JavaScript によって提供される組み込みの配列メソッドであり、配列の最初の要素を削除し、削除された要素を返します。この配列メソッドの唯一の問題は、元の配列を変更/変更することです。

JavaScript での shift() の構文

Array.prototype.shift()

戻り値

元の配列から削除された配列の最初の要素を返します。配列が空の配列の場合、undefined を返します。

コード例:

const arrayElements = [5, 10, 0, 20, 45];
const firstElement = arrayElements.shift(0);
console.log(firstElement);
console.log(arrayElements);

出力:

5
Array [10, 0, 20, 45]

JavaScript で filter() を使用して最初の配列要素を取得する

これは、JavaScript に組み込まれている配列メソッドであり、指定された条件を満たすすべての要素を除外します。一致する要素の配列のコピーが作成されます。find()filter() の唯一の違いは、最初に一致する要素が見つかるとすぐにトラバースを停止し、後で配列の最後の要素まで続行することです。トラバーサルプロパティのため、配列サイズが大きい場合は効率が低下します。

JavaScript での filter() の構文

Array.prototype.filter(element => $condition)

パラメーター

  • $condition:これは必須パラメーターです。ユーザーは配列要素に関連する任意の条件を渡すことができ、条件を満たすすべての一致する要素を見つけようとします。

戻り値

指定された条件に一致する要素を含む新しい配列を返します。

コード例:

const arrayElements = [5, 10, 0, 20, 45];
const firstElement =
    arrayElements.filter(element => element != undefined).shift();
console.log(firstElement);
console.log(arrayElements);

出力:

5
Array [5, 10, 0, 20, 45]

JavaScript で破壊的代入を使用して最初の配列要素を取得する

割り当ての破棄は、JavaScript で使用できる非常に強力な構文であり、配列の要素またはオブジェクトのプロパティをアンパックして、個別の変数に取り込むことができます。

JavaScript でのデストラクション割り当ての構文

[$variable1, $variable2, ...$restVariables] = [10, 20, 30, 40];
{$variable1} = {key: value};

戻り値

配列またはオブジェクトの値にアクセスするための新しい変数を返します。

コード例:

const arrayElements = [5, 10, 0, 20, 45];
let [firstElement] = arrayElements;
console.log(firstElement);

出力:

5
Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

関連記事 - JavaScript Array