JavaScript | 配列を作成する方法

JavaScript JavaScript
スポンサーリンク

JavaScript配列の練習問題(レベル別)

「配列の作り方と基本操作」を、レベル別(初級・中級・上級)に分けて、例題+解答+解説をリスト形式でまとめました。


初級(配列の基本を理解する)

例題1:配列を作って取り出す

問題:
果物の名前を3つ入れた配列を作り、2番目の要素を表示してください。

解答:

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits[1]);
JavaScript

解説:

  • 配列は [] で作る。
  • インデックス(位置)は 0から始まる
  • fruits[1] は2番目の要素 → 'banana'

例題2:配列の長さを調べる

問題:
[10, 20, 30, 40] の配列の要素数を表示してください。

解答:

let numbers = [10, 20, 30, 40];
console.log(numbers.length);
JavaScript

解説:

  • .length プロパティで要素数を取得できる。
  • この場合は 4 が出力される。

中級(配列の操作を練習する)

例題3:要素を追加する

問題:
空の配列を作り、push を使って「勉強」「掃除」「運動」を順番に追加してください。

解答:

let tasks = [];
tasks.push('勉強');
tasks.push('掃除');
tasks.push('運動');
console.log(tasks);
JavaScript

解説:

  • push は配列の末尾に要素を追加する。
  • 実行結果は ['勉強', '掃除', '運動']

例題4:要素を書き換える

問題:
['赤', '青', '黄'] の配列の2番目の要素を '緑' に変更してください。

解答:

let colors = ['赤', '青', '黄'];
colors[1] = '緑';
console.log(colors);
JavaScript

解説:

  • インデックスを指定して代入すれば、要素を上書きできる。
  • 実行結果は ['赤', '緑', '黄']

上級(配列の性質を理解する)

例題5:穴あき配列

問題:
[100, , 300] の配列を作り、真ん中の要素を表示してください。

解答:

let data = [100, , 300];
console.log(data[1]);
console.log(data.length);
JavaScript

解説:

  • 真ん中は「空」なので undefined が出力される。
  • .length は「最後の位置+1」なので 3 になる。
  • 注意: 要素数と実際に値が入っている数は一致しないことがある。

例題6:計算結果を入れる

問題:
変数 x = 5 を使って [5, 10, 25] という配列を作ってください。
(ヒント: 2番目は x * 2、3番目は x * x

解答:

let x = 5;
let arr = [x, x * 2, x * x];
console.log(arr);
JavaScript

解説:

  • 配列の要素には変数や計算式も入れられる。
  • 実行結果は [5, 10, 25]

まとめ

  • 初級: 配列の作り方・取り出し・長さ
  • 中級: 追加・変更などの操作
  • 上級: 穴あき配列や式を使った応用
タイトルとURLをコピーしました