【JS】ES2015(ES6) チートシート

概要

今更ながらES2015(ES6)の文法の確認用メモです。

letとconstによる変数宣言

let:再宣言が不可能な変数宣言です。

let name = 'Mike'
name = 'John'

console.log(name) //=> John//再代入は可能

let name = 'John'

console.log(name)// 再宣言するとエラーになります。

const:再宣言と再代入が不可能な変数宣言です。

const name = 'Mike'
name = 'John' //constの場合は再代入もエラーになります。
const name = 'John'//letと同様に再宣言をするとエラーになります。

constとletはブロックによるスコープが設定されます。

var x = 10;
// ここではx = 10
{ 
    let x = 2;
    // ここではx = 2
}
// ここではx = 10

var x = 10;
// ここではx = 10
{ 
    const x = 2;
    // ここではx = 2
}
// ここではx = 10

文字列の展開

以下の様に文字列を展開できる。

const name = 'Mike'

console.log(`Hello ${name}`) //=> Hello Mike

アロー関数

従来の関数

function greetings (name) {
 console.log('hello ' + name)
}

greetings('Mike')//=> hello Mike

ES6による関数宣言

const greetings =(name) => {
  console.log(`Hello ${name}`)
}

greetings('John')

関数のデフォルト引数

ES6では関数にデフォルト引数を設定できます。

const multiply = (arg1, arg2 = 5) => {
  return arg1 * arg2
}

console.log(multiply(3)) //=> 15

class構文

従来のJSよりも明瞭なクラス定義が可能です。

class Car {
  constructor(name){
    this.name = name //initializer
  }

  display_info(){
    console.log('Car Info')
  }

  getName(){
    console.log(this.name);
  }
}

const car1 = new Car('Honda')

car1.display_info()//=> Car Info
car1.getName() //=> Honda

extendsによるクラス継承

extendsを使用する事でクラスの継承が可能です。

class Car {
  constructor(name){
    this.name = name //initializer
  }

  display_info(){
    console.log('Car Info')
  }

  getName(){
    console.log(this.name);
  }
}


class Track extends Car {
}

track1 = new Track
track1.display_info() //=> Car Info

スプレッド演算子

...を利用する事で配列ライクなオブジェクトを個々の値に展開することができます。

可変長引数

function1 = (...args) => {
  console.log(args)
}

function1(1, 2, 3, 4, 5); // => [1, 2, 3, 4, 5]                    

function1 = (arg, ...args) => {
  console.log(arg)
  console.log(args)
}

function1(1, 2, 3, 4, 5); 
// => 1
// => [2, 3, 4, 5]

配列の展開

const arr = [1,2,3,4,5]

console.log(...arr) // => 1 2 3 4 5 
console.log(Math.min(...arr));// => 1

配列の結合

従来はconcatメソッドを利用して配列の結合を行いましたが、...を利用する事でより簡単に配列の結合を行うことが可能です。

従来の構文

var arr = [1];
var arr2 = arr.concat([2, 3, 4]);

console.log(arr2); // => [1, 2, 3, 4]

ES6の構文

const arr = [1];
const arr2 = [...arr, 2, 3, 4];

console.log(arr2); // => [1, 2, 3, 4]