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]。
まとめ
- 初級: 配列の作り方・取り出し・長さ
- 中級: 追加・変更などの操作
- 上級: 穴あき配列や式を使った応用
