實用的幾個JS新特性(es 2016)

在Chrome 55下測試，可用。

1.箭頭函數(arrow function)

以前寫的匿名函數是這樣的 function(){}，

現在可以簡單寫成這樣()=>{}

如果直接return，沒有復雜的過程，甚至可以寫成 x=>x+1，實際上相當於 

function (x){
  return x+1
}

箭頭函數有一個特點，就是this無法更改，箭頭函數的this就是當前上下文的this不會變，比如以前setTimeout，需要用外面的this，各種不方便，需要自己去想辦法改變this，現在不用了，用箭頭函數，this就是setTimeout的上下文的this。

var a={b:function(){setTimeout(()=>{console.log(this)},100)}}

a.b()  //{b:func}

var a={b:function(){setTimeout(function(){console.log(this)},100)}}

a.b() // window

 

 

2.數組的includes，filter

['a','b'].includes('a') // true

['a','b'].includes('c') // false

C#的Linq，查詢數據非常方便，現在有了箭頭函數，JS也能看起來有點linq的影子了，比如下面這個例子

var a = [1,2,3,4,5,6,7,8]
var b = a.filter(s=>s>5)
console.log(b)  //[6,7,8]

 

 

3.冪運算的簡化寫法

Math.pow(x,y)可以簡寫成 x**y

Math.pow(3,3) // 27

3**3 //27

 

4.async和await可以試用了（從chrome 55開始）

async/await是用來取代設計糟糕，晦澀難懂的promise的。async/await是更理想的解決回調地獄的方案。async/await使得異步中的異常可以輕松的解決。比promise又顯著的減少代碼量。

 

5.字符串格式化（變量帶入）

之前的JS，字符串標記僅有單引號和雙引號，兩者作用並無二致。

現在加入了新的字符串標記  `    ，撇號與單雙引號的最大區別是可以在字符串中使用變量和表達式。

例如原來的  "The area of a circle radius 4 is " + Math.PI * 4 * 4 現在就可以寫成

`The area of circle radius is ${Math.PI*4*4}`

把表達式寫在${}中，即可將運算結果直接放到字符串里。

 

 2019-01-07 Updated：

6.變量解構賦值（這里只說交換變量這種用法）

ES6加入了變量解構賦值的語法，會非常的方便，比如：

let [a,b,c] = [1,2,3]   //  等價於a=1,b=2,c=3

於是以前的變量交換，就有了新的寫法，以前需要用第三個變量來緩存結果，或者使用一種非常詭異且難以理解的N次或運算，現在不需要了，靠着新的解構賦值語法，只要一句話就能完成變量交換

var a=1,b=2;
[a,b] = [b,a];
console.log(a,b);   //  a == 2, b == 1