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が表示されます。