よく使ったES6の新機能

一、constとlet

この前のバッジョンにおいて、varしかないが、es6からconstとletを新規追加されます。
それぞれの機能は下記の通りです。

• const: constを使えば、定数を実現できる。

const a = 1
a = 0 //compile error

• let: 以前はvarで宣言される変数はブロック外でも参照できるので、本番環境で怪しい問題が起こるかもしれません。es6からletで宣言される変数はブロック内しか参照できない。

var x = 'グローバル変数';
{
  let x = 'ブロック変数';
  console.log(x); // ブロック変数
}
console.log(x); // グローバル変数

二、アロー関数

アロー関数とは、もっと簡潔なプログラミング方式の一つです。
アロー関数を使うと、下記のよいポイントをもらえます。

• function というキーワードを書く必要がなくなる。
• returnというキーワードを書く必要がなくなる。
• 直前のthisキーワードを継続する。

例えば、

// ES5
var add = function (a, b) {
    return a + b;
};
// アロー関数
var add = (a, b) => a + b;

三、for...of と for...in

• for...ofで配列などのデータを繰り返す。

let letter = ['a', 'b', 'c'];
letter.size = 3;
for (let letter of letters) {
  console.log(letter);
}
// result: a, b, c

• for...inでオブジェクト中の属性を繰り返す。

let stu = ['Sam', '22', '男'];
stu.size = 3;
for (let stu in stus) {
  console.log(stu);
}
// result: Sam, 22, 男

四、クラス

es6から、クラスを作れますのでオブジェクト指向プログラミング出来ます。

class Student {
  constructor() {
    console.log("I'm a student.");
  }
 
  study() {
    console.log('study!');
  }
 
  static read() {
    console.log("Reading Now.");
  }
}
 
console.log(typeof Student); // function
let stu = new Student(); // "I'm a student."
stu.study(); // "study!"
stu.read(); // "Reading Now."

かつ、es6で親のクラスを継承出来ます。

class Phone {
  constructor() {
    console.log("I'm a phone.");
  }
}
 
class Iphone extends Phone {
  constructor() {
    super();
    console.log("I'm a phone designed by Iphone ");
  }
}
 
let myIphone= new Iphone ();

五、promise

promiseとは、JavaScriptにおいて、非同期処理の操作が完了したときに結果を返すものです。

const promise = new Promise((resolve, reject)=>{
  if (/* success */){
    resolve(value);
  } else {
    reject(error);
  }
});

ここでは、
resolve関数はpromise対象の状態をpendingからfulfilledに変換して処理結果を戻す。
reject関数はpromise対象の状態をpendingからrejectedに変換してエラーをスローする。

promise.then((value)=>{
  // success
  console.log(value)
}, (error)=> {
  // failure
  console.log(error)
});

最終に

最後まで読んでいただき、ありがとうございます。
その他のes6の新機能について、下記のサイトをご参照ください。
ECMAScript 6: New Features
http://es6-features.org