このシリーズについて
「JavaScript入門」第9回です。今回は、複数の値をまとめて扱う配列を学びます。
配列とは
配列は、複数の値を順番付きでまとめるデータ構造です。
const fruits = ["apple", "banana", "orange"];
配列のインデックスは0から始まります。最初の要素は fruits[0] です。
Step 1: 配列を作る
まずは文字列の配列を作ります。
const fruits = ["apple", "banana", "orange"];
console.log(fruits);
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
存在しない位置を読むと undefined になります。
console.log(fruits[10]);
Step 2: lengthを使う
length で配列の要素数を確認できます。
const scores = [80, 90, 75];
console.log(scores.length);
console.log(scores[scores.length - 1]);
最後の要素を取りたい時は length - 1 を使います。
Step 3: 要素を追加する
末尾に追加する時は push を使います。
const tasks = ["HTML", "CSS"];
tasks.push("JavaScript");
console.log(tasks);
const で宣言した配列でも、配列の中身は変更できます。
ポイント: const は「変数への再代入」を禁止します。配列の中身の変更まで禁止するわけではありません。
Step 4: 要素を削除する
末尾を削除する時は pop を使います。
const tasks = ["HTML", "CSS", "JavaScript"];
const lastTask = tasks.pop();
console.log(lastTask);
console.log(tasks);
pop は、削除した要素を返します。
Step 5: for…ofで取り出す
配列の要素を順番に処理するには for...of が読みやすいです。
const fruits = ["apple", "banana", "orange"];
for (const fruit of fruits) {
console.log(fruit);
}
インデックスが必要ない時は、通常の for よりシンプルです。
練習
arrays.js を作り、点数の合計を計算します。
const scores = [80, 90, 75];
let total = 0;
for (const score of scores) {
total += score;
}
console.log(total);
console.log(total / scores.length);
よくあるエラー
| 困る状態 | よくある原因 | 確認する場所 |
|---|---|---|
| 最初の値が取れない | インデックスを1から数えた | array[0] |
undefined が出る | 存在しない位置を読んだ | length |
constなのに変更できた | 再代入と中身の変更を混同 | push の挙動 |
次のステップ
JavaScript入門 #10 - 配列メソッド で、map、filter、find などを学びます。
まとめ
配列は、複数の値を順番付きで扱う基本のデータ構造です。インデックスが0から始まること、length、push、pop、for...of をまず覚えます。
参考リソース
← 一覧に戻るPR
PR
