27 / 27100%

LESSON 27 ・ クラス

クラスとコレクション

オブジェクトを配列で管理する

class Student {
  constructor(name, score) {
    this.name = name;
    this.score = score;
  }

  show() {
    console.log(`${this.name}: ${this.score}点`);
  }
}

let students = [
  new Student("Mary", 65),
  new Student("Mike", 90),
  new Student("Tom", 85)
];
for (const student of students) {
  student.show();
}

クラスを使うことで、複数の生徒の情報を一つの配列で管理することができます。

配列のメソッド

let a = [2, 1, 7, 5];
console.log(a);

a.push(3);
console.log(a);

a.splice(a.indexOf(1), 1);
console.log(a);

a.sort((x, y) => x - y);
console.log(a);

JavaScriptの配列もオブジェクトなのでメソッドを持っています。

要素を追加したり、指定した要素を削除したり、小さい順に並べ替えたりすることができます。使うメソッド名は言語によって異なります。

文字列のメソッド

let a = "2,3,5,7";
let b = a.split(",");
let c = b.map(Number);
console.log(c);

JavaScriptの文字列もオブジェクトのようにメソッドを使えます。

たとえば、splitメソッドを使えば文字列を分割することができます。

ここでは、"2,3,5,7"という文字列を,で分割しています。しかし、分割して得られた配列の要素は["2", "3", "5", "7"]のように文字列になっているので、これをさらにNumber関数を使って整数に変換しています。

PRACTICE

演習問題

コードを自分で書いて実行してから、答えと解説を確認しましょう。

問題1

名前と点数を作成時に受け取り、showメソッドで表示できるStudentクラスを定義してください。二人分のオブジェクトを一つの配列にまとめ、すべての生徒のshowを呼び出してください。

答えと解説を見る

模範解答

class Student {
  constructor(name, score) {
    this.name = name;
    this.score = score;
  }

  show() {
    console.log(`${this.name}: ${this.score}点`);
  }
}

let students = [
  new Student("Mary", 65),
  new Student("Mike", 90)
];
for (const student of students) {
  student.show();
}

オブジェクトも配列の要素にできます。ループで一つずつ取り出すと、それぞれのオブジェクトに対してメソッドを呼び出せます。

問題2

[4, 1, 7, 3]5を追加し、1を削除してから、小さい順に並べ替えて表示してください。

答えと解説を見る

模範解答

let numbers = [4, 1, 7, 3];
numbers.push(5);
numbers.splice(numbers.indexOf(1), 1);
numbers.sort((x, y) => x - y);
console.log(numbers);

追加、削除、並べ替えを順番に行います。最後に表示される内容は[3, 4, 5, 7]です。

問題3

文字列"10,20,30,40",で分割し、すべての要素を整数に変換してください。変換した整数の合計を求めて表示してください。

答えと解説を見る

模範解答

let text = "10,20,30,40";
let parts = text.split(",");
let numbers = parts.map(Number);

let total = 0;
for (const number of numbers) {
  total += number;
}

console.log(total);

splitの結果は文字列なので、整数へ変換してから足します。4個の整数の合計である100が表示されます。