【徹底解説】JavaScript 配列の最初の要素を取得する 5 つの方法とサンプルコード

JavaScript 配列から最初の N 個の要素を取得する方法

スライスを使う

最も簡単な方法は、slice() メソッドを使うことです。slice() メソッドは、配列の一部を抽出して新しい配列を作成します。

const arr = [1, 2, 3, 4, 5];
const firstTwoElements = arr.slice(0, 2); // [1, 2]

console.log(firstTwoElements); // [1, 2]

この例では、arr 配列の最初の 2 個の要素を取得しています。slice() メソッドの最初の引数は、抽出する開始位置を指定します。2 番目の引数は、抽出する要素の数を指定します。

ループを使う

slice() メソッド以外にも、ループを使って最初の N 個の要素を取得することができます。

const arr = [1, 2, 3, 4, 5];
const firstTwoElements = [];

for (let i = 0; i < 2; i++) {
  firstTwoElements.push(arr[i]);
}

console.log(firstTwoElements); // [1, 2]

この例では、for ループを使って最初の 2 個の要素を firstTwoElements 配列に追加しています。

Array.prototype.filter メソッドを使って、最初の N 個の要素を取得することもできます。

const arr = [1, 2, 3, 4, 5];
const firstTwoElements = arr.filter((element, index) => index < 2);

console.log(firstTwoElements); // [1, 2]

この例では、filter メソッドを使って、インデックスが 2 未満の要素のみを抽出しています。

JavaScript 配列から最初の N 個の要素を取得するには、いくつかの方法があります。それぞれ的方法にはメリットとデメリットがあるので、状況に合わせて最適な方法を選択する必要があります。

• スライスを使う方法は、シンプルで分かりやすいです。
• ループを使う方法は、柔軟性がありますが、コードが冗長になる可能性があります。
• Array.prototype.filter を使う方法は、関数型プログラミング的な書き方ができますが、コードが分かりにくくなる可能性があります。

// スライスを使う方法
const arr = [1, 2, 3, 4, 5];
const firstTwoElements = arr.slice(0, 2);

console.log(firstTwoElements); // [1, 2]

// ループを使う方法
const arr = [1, 2, 3, 4, 5];
const firstTwoElements = [];

for (let i = 0; i < 2; i++) {
  firstTwoElements.push(arr[i]);
}

console.log(firstTwoElements); // [1, 2]

// Array.prototype.filter を使う方法
const arr = [1, 2, 3, 4, 5];
const firstTwoElements = arr.filter((element, index) => index < 2);

console.log(firstTwoElements); // [1, 2]

このコードを実行すると、以下の結果が出力されます。

[1, 2]
[1, 2]
[1, 2]

実行方法

1. コードをテキストファイルに保存します。
2. ファイルを HTML ファイルとして保存します。
3. ブラウザでファイルを開きます。

ブラウザのコンソールに、最初の N 個の要素が出力されます。

JavaScript 配列から最初の N 個の要素を取得する他の方法

Array.from() メソッドを使って、イテレータから新しい配列を作成することができます。

const arr = [1, 2, 3, 4, 5];
const firstTwoElements = Array.from(arr, (_, index) => index < 2);

console.log(firstTwoElements); // [1, 2]

スプレッド構文を使って、配列の一部を抽出することができます。

const arr = [1, 2, 3, 4, 5];
const firstTwoElements = [...arr.slice(0, 2)];

console.log(firstTwoElements); // [1, 2]

この例では、スプレッド構文を使って、arr 配列の最初の 2 個の要素を新しい配列に展開しています。

ジェネレータを使って、最初の N 個の要素を生成することができます。

function* firstNElements(arr, n) {
  for (let i = 0; i < n; i++) {
    yield arr[i];
  }
}

const arr = [1, 2, 3, 4, 5];
const firstTwoElements = [...firstNElements(arr, 2)];

console.log(firstTwoElements); // [1, 2]