ECMAScriptおさらい

2020/07/29(水)

ECMAScriptとは

ECMAScriptはJavaScriptの標準仕様で、毎年のように更新されている。
最新版はES2020がリリースしたっぽい。
ES6で仕様が一気に変更されてモダンになった。

変数宣言

再代入の必要がない場合 → 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 }