ECMAScriptおさらい
ECMAScriptとは
ECMAScriptはJavaScriptの標準仕様で、毎年のように更新されている。
最新版はES2020がリリースしたっぽい。
ES6で仕様が一気に変更されてモダンになった。
ECMAScript - JavaScript Primer
変数宣言
再代入の必要がない場合 → const
再代入の必要がある場合 → let
アロー関数
- 引数が1個のときは、カッコが省略できる
- 中身が
return
だけのときはreturn
が省略できる
// いままでの関数宣言
function increment(n) {
return n + 1;
}
// アロー関数での関数宣言
const increment = (n) => { return n + 1; };
const increment = n => n + 1
スコープの違い
function()
のときは、その上のオブジェクトがthis
にあたるけど、アロー関数のと期のthis
はその関数自身になる。
const obj1 = {
text1: 'hello!',
fnc: function() {
console.log(this.text1);
}
}
const obj2 = {
text1: 'hello!',
fnc: () => {
console.log(this.text1);
}
}
obj1.fn() // hello!
obj2.fn() // undefined
クラス構文
ES6以降
class Car {
constructor(name, weight) {
this.name = name;
this.weight = weight;
}
stop() {
console.log(`${this.name}が止まりました`);
};
static compareWeight(carA, carB) {
return carA.weight - carB.weight;
}
}
let cars = [
new Car('R32', 1500),
new Car('RoadStar', 1000),
new Car('NSX', 1800)
];
cars.sort(Car.compareWeight);
console.log(cars[0].name); // RoadStar
分割代入
const [a, b] = [1, 2];
console.log(a, b) // 1 2
const obj = {name: 'NSX', weight: 1800};
console.log(name, weight) // NSX 1800
スプレッド構文・スプレッド演算子
配列
// 配列
const foo = [1, 2];
const bar = [...foo]; // [1, 2]
const baz = [...foo, 3, 4]; // [1, 2, 3, 4]
const hoge = [...foo, ...bar]; // [1, 2, 1, 2]
オブジェクト
プロパティ名がショートハンドで代入される
const foo = 111;
const bar = {foo, baz: 222}; // { foo: 111, bar: 222 }
// オブジェクト
const foo = { a: 1, b: 2 };
// オブジェクトクローン
const bar = { ...foo }; // { a: 1, b: 2 }
// プロパティ追加しオブジェクト生成
const baz = { ...foo, c: 3 }; // { a: 1, b: 2, c: 3 }
// マージ
const hoge = { ...foo, ...{ c: 3, d: 4 } }; // { a: 1, b: 2, c: 3, d: 4 }
// 置き換え
const fuga = { ...foo, b: 3 }; // { a: 1, b: 3 }
const aaaa = { ...foo, ...{ a: 3, b: 4 } }; // { a: 3, b: 4 }