クラスの作成
クラスの書き方
親クラスHumanと、親クラスを継承した子クラスPerson。
# 親クラス
class Human {
gender = 'male';
printGender = () => {
console.log(this.gender);
}
}
# 子クラス
class Person extends Human {
name = 'Tom';
gender = 'male';
printMyName = () => {
console.log(this.name);
}
}
const person = new Person();
person.printMyName();
person.printGender();
Console
"Tom"
"male"
親クラスを継承した子クラスでは、親クラスのメソッドやプロパティをそのまま使える。
アロー関数
上記は、ES6（ES2015）で新たに定義されたアロー関数（=>）を使った記法。
従来の記法
function sayHi(name) {
console.log('Hi ' + name);
}
# こうも書ける
const sayHi = function(name) {
console.log('Hi ' + name);
}
アロー関数を使うと
const sayHi = name => {
console.log('Hi ' + name);
}
functionも書かなくてOK。
引数が１つであれば（）も不要。引数が複数であれば（param1, param2）のように今までどおり（）が必要でカンマ区切り。
リターンで返すのであればより簡潔
従来の記法
const returnName = name => {
return name;
}
アロー関数を使うと
const returnName = name => name
オペレーターを使ったスプレッド構文
オペレーターとは ... 3つのドットのこと。
スプレッド構文は、オペレーターを用いて配列やオブジェクトの要素を展開する。
配列の結合やオブジェクトのコピーが簡単にできる。
配列の結合
const numbers = [1, 2, 3];
const newNumbers = […numbers, 4, 5];
console.log(newNumbers);
Console
[1, 2, 3, 4, 5]
配列の要素がその場で展開され、受け渡されている。
オブジェクトのコピー
const Person = {
name: 'Tom'
};
const newPerson = {
…Person,
age: 18
}
console.log(newPerson);
Console
{
name: 'Tom',
age: 18
}
データ型による違い【コピーと参照】
基本型（数値や文字列）はコピー
数値型（number）, 文字列型（string）, 真偽型（boolean）の値を変数に代入すると、値はそのままコピーされる。
let number = 1;
let number2 = number;
# 再代入
nember = 3;
console.log(number2);
Console
1
nember に 3 を再代入しているが、代入時の値 1 は変わらない。
オブジェクトや配列は参照型
オブジェクトや配列、関数を代入した場合、それは参照値のコピーなので、参照先の値を変更すると結果も変わる。
const person = {
name: 'Tom'
}
const person2 = person;
# 再代入
person.name = 'Karly';
console.log(person2);
Console
[object Object] {
name: "Karly"
}
値をコピーしたい場合は、オペレーターを使う
配列やオブジェクトの値をそのままコピーしたい場合に便利なのが、上記のオペレーターを使ったスプレッド構文。
変数 person2には、personの値そのものを渡しているため、値を再代入してもperson2の値は変わらない。
const person = {
name: 'Tom'
}
const person2 = {
…person
};
# 再代入
person.name = 'Karly';
console.log(person2);
Console
[object Object] {
name: "Tom"
}
配列処理に便利なmapメソッド
各要素にアクセスする便利なmapメソッド。
配列の各要素に対して、コールバック関数を実行する。結果は配列を返す。
const numbers = [1, 2, 3];
const doubleNumArray = numbers.map((num) => {
return num * 2;
});
console.log(numbers);
console.log(doubleNumArray);
Console
[1, 2, 3]
[2, 4, 6]
参照
- React – The Complete Guide (incl Hooks, React Router, Redux)
（現在こちらUdemyコースで勉強してます。）
コメント