1.用箭頭函數減少代碼（相信你在Vue已經看到了）

ES5：

function greetings (name) {
 return ‘hello ‘ + name
}


ES6：

const greetings = (name) => {
  return ‘hello $ {name}‘;      
}

主要區別，表現在不需要使用function關鍵字來定義函數。

另一種ES6定義函數的方法：

const greetings = name => ‘hello $ {name}‘;

1.如果你的函數只有一個參數，那麽你可以圍繞參數直接丟掉圓括號“（）”

2.另一件事情就是，不用編寫return關鍵字來返回值，因為在ES6中，如果你不在函數體內寫入函數體，計算表達式會自動返回。

2.在ES6和ES5中操作對象

... 替代 Object.assign

ES5:

var obj1 = {a：1，b：2} 
var obj2 = {a：2，c：3，d：4} 
var obj3 = Object.assign（obj1，obj2）


ES6:

const obj1 = {a：1，b：2} 
const obj2 = {a：2，c：3，d：4} 
const obj3 = {... obj1，... obj2}

ES5我們必須合並使用Object.assign()兩個對象作為輸入的對象並輸出合並的對象。

提取多個值

ES5:

var obj1 = {a：1，b：2，c：3，d：4} 
var a = obj1.a 
var b = obj1.b 
var c = obj1.c 
var d = obj1.d


ES6:

const obj1 = {a：1，b：2，c：3，d：4} 
const { 
  a，
  b，
  c，
  d 
} = obj1

對象引入的新功能

ES5:

var a = 1 
var
 
 b = 2 
var c = 3 
var d = 4
var obj1 = {a：a，b：b，c：c，d：d}


ES6:

var a = 1 
var b = 2 
var c = 3 
var d = 4
var obj1 = {a，b，c，d}


//必須保持參數一致

3.Promises 與 回調

ES5中編寫異步函數

ES5:

function isGreater (a, b, cb) {
  
  var greater = false
  if(a > b) {
    greater = true
  }
  cb(greater)
}
isGreater(1, 2, function (result) {
  if(result) {
    console.log(‘greater‘);
  } else {
    console.log(‘smaller‘)
  }
})

//上面我們定義了一個名為的函數isGreater ，它有三個參數a ，b與cb 。當執行該功能時檢查是否a大於b，並使該greater變量true ，如果不是greater停留false 。之後，isGreater調用回調函數cb並將該greater變量作為參數傳遞給函數。
//在下一段代碼中，我們稱該isGreater函數將它傳遞給我們a並b與我們的回調函數一起傳遞。裏面的回調函數我們檢查結果是否是true，false並根據它顯示消息。


ES6:

const isGreater = (a, b) => {
 return new Promise ((resolve, reject) => {
  if(a > b) {
   resolve(true)
  } else {
   reject(false)
  }
 })
}
isGreater(1, 2)
 .then(result => {
    console.log(‘greater‘)
 })
 .catch(result => {
    console.log(‘smaller‘)
 })

//ES6 Promises 允許我們resolve和reject一個請求。每當我們解決一個請求時，它會調用提供的回調函數，then並且每當我們拒絕一個請求時，它就會調用catch回調函數。
//ES6 Promises 比回調更好，因為它允許我們輕松地區分a 成功了或者是a 失敗了，所以我們不必再次檢查回調函數中的內容。

4.導出和導入模塊（Vue用的很多吧！）

導出模塊

ES5:

var myModule = {
    x: 1,
    y: function() { console.log(‘This is ES5‘) }
}
module.exports = myModule;

ES6:

const myModule = { x: 1, y: () => { console.log(‘This is ES6‘) } }
export default myModule;

ES6相對於ES5，增加了可讀性，更人性化了。

導入模塊

ES5:

var myModule = require(‘./myModule‘);

ES6:

import myModule from ‘./myModule‘;

export default

ES5:

/*使用默認值 export default導出某個模塊時，將導入這樣一個模塊
下面這行代碼意味著類似這樣的內容，我們默認導出了一個模塊，所以我們必須在源文件中導入整個模塊*/

import myModule from ‘./myModule‘;


ES6:

/*
為我們提供了導出多個(import)或單個(export)模塊以及變量的能力
*/
export const x = 1;
export const y = 2;
export const z = ‘String‘;

ES6是這樣的:

import {x, y, z} from ‘./myModule‘;

es5~es6