廢話少說，還是直接上程式碼吧。

1、引數預設值

以前是這麼寫的：

var link = function (height, color, url) {
    var height = height || 50
    var color = color || 'red'
    var url = url || 'http://azat.co'
    ...
}

很顯然以前的寫法有點技巧性，現在則可以這麼寫：

var link = function(height = 50, color = 'red', url = 'http://azat.co') {
  ...
}

很顯然跟我們熟悉的C++寫法一樣了。

2、模板面值

以前跟Java的寫法很像：

var name = 'Your name is ' + first + ' ' + last + '.'
var url = 'http://localhost:3000/api/messages/' + id

現在：

var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`

注意單引號變成了`，裡面的值要用${}包起來。

3、字串多行時的情況

以前用+解決：

var roadPoem = 'Then took the other, as
 
 just as fair,\n\t'
    + 'And having perhaps the better claim\n\t'
    + 'Because it was grassy and wanted wear,\n\t'
    + 'Though as for that the passing there\n\t'
    + 'Had worn them really about the same,\n\t'

var fourAgreements = 'You have the right to be you.\n\
    You can only be you when you do your best.'
 

現在用逗號解決：

var roadPoem = `Then took the other, as just as fair,
    And having perhaps the better claim
    Because it was grassy and wanted wear,
    Though as for that the passing there
    Had worn them really about the same,`

var fourAgreements = `You have the right to be you.
    You can only be you when you do your best.`

注意外面還是用“`”。

4、分解賦值

以前吧就得分開賦值：

var jsonMiddleware = require('body-parser').json

var body = req.body, // body has username and password
var username = body.username,
var password = body.password 

現在用不著了，它自己可以找到對應的值：

var {house, mouse} = $('body').data() // we'll get house and mouse variables
var {json: jsonMiddleware} = require('body-parser')
var {username, password} = req.body

5、箭頭函式

以前的：

var _this = this
$('.btn').click(function(event){
  _this.sendData()
})

現在的：

$('.btn').click((event) =>{
  this.sendData()
})

這裡多看一個例子，以前函式返回必須用return關鍵字，現在如果條件允許的話就可以不用return了：

var ids = ['5632953c4e345e145fdf2df8', '563295464e345e145fdf2df9'];
var messages = ids.map(function (value, index, list) {
  return 'ID of ' + index + ' element is ' + value + ' ' // explicit return
})

現在有了箭頭函式以後是這樣的：

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']
var messages = ids.map((value, index, list) => `ID of ${index} element is ${value} `) // implicit return

6、Promise

下面這個函式很熟悉：

setTimeout(function(){
  console.log('Yay!')
}, 1000)

很顯然是非同步延遲的嘛，那麼現在用promise怎麼寫呢？

var wait1000 =  new Promise(function(resolve, reject) {
  setTimeout(resolve, 1000)
}).then(function() {
  console.log('Yay!')
})

如果再改為箭頭函式的話：

var wait1000 =  new Promise((resolve, reject)=> {
  setTimeout(resolve, 1000)
}).then(()=> {
  console.log('Yay!')
})

let與var的作用範圍

我們知道var一般寫在變數前面，但是這個var所控制變數的生命週期著實讓初學者頭疼，因為跟我們常見的Java或者C++變數定義的範圍不一樣嘛，var的生命週期是在函式範圍內的，也就是說，var一旦定義了，跟函式的生命週期是一致的，所以為了避免這種不必要的麻煩，迴歸到Java或者C++語言變數生命週期的可控性，那麼我們就用let代替var：

function calculateTotalAmount (vip) {
  var amount = 0 // probably should also be let, but you can mix var and let
  if (vip) {
    let amount = 1 // first amount is still 0
  } 
  { // more crazy blocks!
    let amount = 100 // first amount is still 0
    {
      let amount = 1000 // first amount is still 0
      }
  }  
  return amount
}

console.log(calculateTotalAmount(true))

也就是說在一個程式碼塊定義的，生命週期只能在程式碼塊範圍

參考文獻